client_management/app/views/admin/client_managements/project_dashboard.html.erb

245 lines
8.9 KiB
Plaintext

<%= csrf_meta_tag %>
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "client_management/dashboard" %>
<%= stylesheet_link_tag "select2/select2" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/jquery.form.js" %>
<%= javascript_include_tag "validator" %>
<%= javascript_include_tag "select2/select2.min" %>
<%= javascript_include_tag "jquery.viewport" %>
<% end %>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard-wrapper">
<div class="left-side">
<div id="url-box">
<span class="site-title"><%= @site_request.site_title %></span>
<span class="site-url">
<span id="edit-url-box">
<% if @site_request.new_site_url.nil? || @site_request.new_site_url == "" %>
<a href="" id="site-url-tag">Not Available</a>
<% else %>
<a href="<%= @site_request.new_site_url %>" target="_blank" id="site-url-tag"><%= @site_request.new_site_url %></a>
<% end %>
<a href="" id="edit-url-btn"><i class="icons-pencil"></i></a>
</span>
<span id="site-url-edit-box" style="display:none;">
<%= form_for @site_request, :url => {:action => "update_site_request"} do |f| %>
<%= f.text_field :new_site_url, :placeholder => "http://site-abbr.pending.rulingcom.com" %>
<button role="submit"><i class="icons-checkmark"></i></button>
<% end %>
</span>
</span>
<span class="pull-right request-type">
<%= @site_request.get_request_type %>
<% if @site_request.type == "upgrade" %>
<a href="<%= @site_request.upgrade_r2_site %>" target="_blank"><i class="icons-popup"></i></a>
<% end %>
</span>
</div>
<div id="timeline-box" class="collapsed">
<%= render :partial => "timeline_box" %>
</div>
<div id="dashboard">
<div class="conversations">
<% if @site_request.project_posts.count > 0 %>
<%= render :partial => "conversation", :collection => @site_request.project_posts.asc(:created_at) %>
<% else %>
<h3>No posts found</h3>
<% end %>
</div>
<div class="editor-wrapper">
<div id="post-loader" style="display:none;">
<%= image_tag("preloader.gif", size: "50") %>
<div>Posting your response.</div>
</div>
<%= form_for @project_post, :url => {:action => "create_project_post"}, :html => {:id => "dashboard-post"} do |f| %>
<textarea class="ckeditor" name="project_post[content]" data-fv-validation="required;" data-fv-messages="Cannot be empty;"></textarea>
<div class="ticket-internal-response-wrap">
<div class="ticket-internal-response">
<%= f.check_box :internal_response %>
<%= f.hidden_field :site_request_id , :value => @site_request.id.to_s %>
<%= f.hidden_field :user_id , :value => current_user.id.to_s %>
<span class="ticket-internal-response">Internal Response</span>
</div>
<div class="ticket-tag-member">
<!-- <h4 class="ticket-tag-mebmer-heading">Tag member</h4> -->
<select class="member_tags" multiple="multiple" name="project_post[user_tags][]">
<% @members.each do |member| %>
<%
name = member["name"][I18n.locale.to_s] == "" ? member["name"]["zh_tw"] : member["name"][I18n.locale.to_s]
name = "" if name.nil?
user_name = "(#{member["user_name"]})"
text = " #{name} #{user_name}"
%>
<option value="<%= member["id"] %>" data-member="<%= member.to_json %>"><%= text %></option>
<% end %>
</select>
</div>
<div class="submit-form-btn">
<input type="submit" class="btn btn-primary" id="dashboard-post-submit-btn" value="Submit">
</div>
</div>
<% end %>
</div>
</div>
</div>
<div class="right-side">
<%= render :partial => "progress_tracker" %>
</div>
</div>
<script type="text/javascript">
var locale = "<%= I18n.locale.to_s %>";
$("#edit-url-btn").on("click",function(){
$("#edit-url-box").hide();
$("#site-url-edit-box").show();
$("#site-url-edit-box input[type=text]").focus();
return false;
})
$("#site-url-edit-box form").on("submit",function(){
var form = $(this);
$.ajax({
url : form.attr("action"),
data : form.serialize(),
type : "post",
dataType : "json"
}).done(function(data){
$("#site-url-tag").attr("href", data.url).text(data.url);
$("#site-url-edit-box").hide();
$("#edit-url-box").show();
})
return false;
})
$(".member_tags").select2({
formatResult: function (el) {
var $el = $(el.element),
member = $el.data("member"),
name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
user_name = "(" + member.user_name + ")",
text = name + " " + user_name;
if (!el.id) { return el.text; }
var $state = $(
'<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
);
return $state;
},
placeholder: "Tag Members"
});
var fv = new FormValidator($("#dashboard-post"));
$("#dashboard-post-submit-btn").on("click",function(){
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
if(fv.isFormValidated()){
$("#dashboard-post").hide();
$("#post-loader").show();
fv.form.ajaxSubmit({
success : function(data){
setTimeout(function(){
fv.reset();
$(".member_tags").select2("val","");
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].setData("");
}
$("#dashboard-post").show();
$(".conversations").find("h3").remove();
$(".conversations").append(data);
$("#post-loader").hide();
},500)
},
error : function(){
$("#post-loader").find("img").hide();
$("#post-loader").find("div").text("There was some error.");
}
});
}
return false;
})
$(document).on("click", ".progress-checkbox", function(){
var el = $(this),
value = el.attr("name"),
checked = el.prop("checked");
$.ajax({
url : "<%= timeline_update_admin_client_management_path(@site_request.site_timeline) %>",
data : {"field" : value, "checked" : checked},
dataType : "json",
type : "post",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
}).success(function(data){
var span = el.parent().find("span"),
label = el.parent().find("label");
if(checked){
span.removeClass("deadline");
span.addClass("completed");
label.addClass("strikethrough");
span.text(data.time + " by " + data.name);
}else{
span.removeClass("completed");
span.addClass("deadline");
label.removeClass("strikethrough");
span.text(data.time);
}
})
})
var timelineBox = $("#timeline-box"),
expandBtn = $("#timeline-expand-btn");
expandBtn.on("click",function(){
if(timelineBox.hasClass("collapsed")){
timelineBox.removeClass("collapsed");
expandBtn.find("i").removeClass("icons-plus");
expandBtn.find("i").addClass("icons-minus");
$("#timeline-chart").show();
}else{
timelineBox.addClass("collapsed");
expandBtn.find("i").removeClass("icons-minus");
expandBtn.find("i").addClass("icons-plus");
$("#timeline-chart").hide();
}
})
var timelineHash = <%= @timeline.to_json.html_safe %>,
dataTable = null,
chart = null,
counter = 0,
titles = {
"test_site_creation_start" : "Test Site Creation",
"template_design_images_start" : "Template Images",
"template_html_css_start" : "Template HTML & CSS",
"customized_module_start" : "Customized Module",
"data_migration_start" : "Data Migration",
"site_structure_start" : "Structure & Data Finalizing ",
"site_migration_start" : "Site Migration"
}
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
var timelineOptions = {
timeline: { showRowLabels: true }
};
function drawChart() {
var container = document.getElementById('timeline-chart');
chart = new google.visualization.Timeline(container);
dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
$.each(timelineHash,function(i, tm){
var hs = tm[0],
keys = Object.keys(hs),
enddt = new Date(hs[keys[1]]),
startdt = new Date(hs[keys[0]]);
counter++;
console.log(hs[keys[1]]);
dataTable.addRow([counter.toString(), titles[keys[0]], startdt, enddt]);
})
chart.draw(dataTable, timelineOptions);
$("#timeline-chart").hide();
}
</script>