seitime-frappe/frappe/www/feedback.html

{% extends "templates/web.html" %}

{% block title %}{{ _("Feedback") }}{% endblock %}

{% macro feedback_result(is_valid_request, subject, message='') %}
<div class="feedback-result" style="{{ 'display: none' if is_valid_request else '' }}">
	<div class='page-card'>
		<div class='page-card-head'>
			<span class='indicator darkgrey'>{{ _(subject) }}</span>
		</div>
		<p id="feedback-result">{{ _(message) }}</p>
		<div><a href='/' class='btn btn-primary btn-sm'>{{ _("Home") }}</a></div>
	</div>
</div>
{% endmacro %}

{% block page_content %}
{% if is_valid_request %}
	<div class="feedback">
		<p class='lead' id="feedback-msg"></p>

		<div>
			{{ _("Your rating: ") }}
			<i class='fa fa-fw fa-star-o star-icon' data-idx=1></i>
			<i class='fa fa-fw fa-star-o star-icon' data-idx=2></i>
			<i class='fa fa-fw fa-star-o star-icon' data-idx=3></i>
			<i class='fa fa-fw fa-star-o star-icon' data-idx=4></i>
			<i class='fa fa-fw fa-star-o star-icon' data-idx=5></i>
		</div>

		<div style='max-width: 500px;'>
			<p>{{ _("Full Name") }}</p>
			<input class="form-control fullname" type="text" placeholder="Your Full Name">
			<p>{{ _("Detailed feedback") }}</p>
			<textarea class='form-control feedback-text' style='min-height: 300px;'></textarea>
		</div>

		<p><button class='btn btn-primary btn-sm btn-submit'>{{ _("Submit") }}</button></p>

		{% if comment_list -%}
			<div class="comments">
				<br><br>
				<h3>{{ _("Communication") }}</h3>
				{% include 'templates/includes/comments/comments.html' %}
			</div>
		{% endif %}
	</div>
	{{ feedback_result(is_valid_request, "Thank You") }}
{% else %}
	{{ feedback_result(is_valid_request, "Invalid Input", error_message) }}
{% endif %}

<script>
	window.feedback = {
		init: function() {
			var me = this;

			this.key = frappe.utils.get_url_arg("key");
			this.reference_name = frappe.utils.get_url_arg("reference_name");
			this.reference_doctype = frappe.utils.get_url_arg("reference_doctype");
			this.sender = frappe.utils.get_url_arg("email");
			this.rating = frappe.utils.get_url_arg("rating") || 0;

			// set ratings
			this.set_ratings_icon(this.rating)

			this.bind_events();
			$("#feedback-msg").empty().html(__("Please share your feedback for {0}", [me.reference_name]));
		},

		set_ratings_icon: function(idx) {
			$('.star-icon.fa-star').removeClass('fa-star').addClass('fa-star-o');
			for(var i=0; i<parseInt(idx); i++) {
				$($('.star-icon').get(i)).removeClass('fa-star-o').addClass('fa-star');
			}
		},

		bind_events: function() {
			// bind ratings on hover
			var me = this;

			$('.star-icon').hover(function() {
				var idx = $(this).attr('data-idx');
				me.set_ratings_icon(idx);
			});

			// bind submit button
			$('.btn-submit').on('click', function() {
				if(!$('.star-icon.fa-star').length) {
					frappe.msgprint(__("Please give a rating."));
					return;
				} else if(!$('.fullname').val().length){
					frappe.msgprint(__("Please give a fullname."));
					return;
				} else if(!$('.feedback-text').val().length){
					frappe.msgprint(__("Please give a detailed feebdack."));
					return;
				}

				frappe.call({
					method: 'frappe.www.feedback.accept',
					args: {
						key: me.key,
						sender: me.sender,
						reference_name: me.reference_name,
						reference_doctype: me.reference_doctype,
						feedback: $('.feedback-text').val(),
						rating: $('.star-icon.fa-star').length,
						fullname: $('.fullname').val()
					},
					callback: function(r) {
						if(r.message) {
							$(".feedback, .feedback-result").toggle();
							$("#feedback-result").empty().html(__("Your Feedback for document {0} is saved successfully",
								[me.reference_name]));
						}
					}
				})
			});
		}
	};

	frappe.ready(function() {
		feedback.init();
	})
</script>
{% endblock %}