315 lines
11 KiB
Plaintext
315 lines
11 KiB
Plaintext
<% @allow_ruling_timer = (current_user && (current_user.is_admin? || RulingTimerSetting.first.authorize?(current_user) rescue false)) %>
|
|
<% if @allow_ruling_timer %>
|
|
<%= csrf_meta_tags %>
|
|
<% @ruling_timer_temp = RulingTimerTemp.where(:user=>current_user).first %>
|
|
<% @ruling_timer_temp = RulingTimerTemp.new if @ruling_timer_temp.nil? %>
|
|
<% @ruling_timer_temp.check_and_store %>
|
|
<% @new_sub_tasks = RulingTimerSubTask.where(:user=>current_user,:status.ne=>"finish",:id.nin=>@ruling_timer_temp.sub_task_ids).to_a %>
|
|
<div class="timeman-container timeman-container-tc" id="timeman-container">
|
|
<div class="timeman-wrap">
|
|
<span id="timeman-block" class="timeman-block">
|
|
<span class="bx-time" id="timeman-timer">
|
|
<span class="current_time"><%=DateTime.now.new_offset('+08:00').strftime('%l:%M %p')%></span>
|
|
</span>
|
|
<span class="timeman-right-side" id="timeman-right">
|
|
<span class="timeman-beginning-but" id="timeman-status-block">
|
|
<% if @ruling_timer_temp.status == "working" %>
|
|
<i class="fa fa-stop-circle"></i>
|
|
<span id="timeman-status" class="timeman-status"><%=t("ruling_timer.working")%></span>
|
|
<% else %>
|
|
<i class="fa fa-play-circle"></i>
|
|
<span id="timeman-status" class="timeman-status">
|
|
<% if @ruling_timer_temp.status == "rest"%>
|
|
繼續
|
|
<% else %>
|
|
<% if @ruling_timer_temp.all_work_times_seconds == 0 %>
|
|
打卡上班
|
|
<% else %>
|
|
記錄的下班時間
|
|
<% end %>
|
|
<% end %>
|
|
</span>
|
|
<% end %>
|
|
</span>
|
|
</span>
|
|
<% if @new_sub_tasks.count != 0 %>
|
|
<button class="display_task_list btn btn-danger" title="<%=t("ruling_timer.new_tasks_hint")%>">New!</button>
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.display_task_list{
|
|
background: red;
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
}
|
|
.timeman-container{
|
|
float: left;
|
|
background: <%=current_site.orbit_bar_background_color%>;
|
|
color: <%=current_site.orbit_bar_text_color%>;
|
|
height: 100%;
|
|
}
|
|
@media screen and (max-width: 767px){
|
|
.timeman-container{
|
|
padding: 0 15px;
|
|
float: none;
|
|
}
|
|
}
|
|
.timeman-wrap{
|
|
height: 100%;
|
|
}
|
|
.current_time, .timeman-status{
|
|
line-height: 40px;
|
|
font-size: 1.3em;
|
|
}
|
|
.timeman-block {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
height: 100%;
|
|
text-align: left;
|
|
white-space: normal;
|
|
display: flex;
|
|
}
|
|
.timeman-right-side{
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
margin-left: 0.5em;
|
|
vertical-align: middle;
|
|
line-height: 2;
|
|
}
|
|
.timeman-beginning-but{
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.can_notify = true;
|
|
if (!('Notification' in window)) {
|
|
console.log('This browser does not support notification');
|
|
window.can_notify = false;
|
|
}
|
|
window.notify_icon_url = $('link[rel="shortcut icon"]').attr('href');
|
|
window.all_notifies = [];
|
|
window.add_notify = function(permission,time,end_time,title,body){
|
|
if(permission == "granted"){
|
|
all_notifies.push({"time": time,"end_time": end_time,"title": title,"body": body});
|
|
}
|
|
}
|
|
window.create_notify = function(title,body,idx){
|
|
if(window.can_notify){
|
|
console.log("create")
|
|
body = body || "";
|
|
var notify = new Notification(title,{"body": body,"icon": window.notify_icon_url,"tag": ("timer_notify_"+idx)});
|
|
if(idx != undefined){
|
|
notify.onclick = function(e){
|
|
e.preventDefault();
|
|
window.all_notifies[idx] = null;
|
|
notify.close();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
window.time_calc = {};
|
|
time_calc.sub_interval = function(time_str,interval,get_last_only){
|
|
var time_arr = time_str.split(":");
|
|
var interval_arr = interval.split(":");
|
|
time_arr = time_arr.map(function(v,i){return (parseInt(v)-parseInt(interval_arr[i]))})
|
|
var tmp = 0;
|
|
time_arr = time_arr.map(function(v,i){
|
|
v += tmp;
|
|
var max_val = 60;
|
|
if(i == time_arr.length - 1){
|
|
return v;
|
|
}else{
|
|
tmp = (v * max_val);
|
|
return 0;
|
|
}
|
|
})
|
|
time_arr.reverse();
|
|
if(get_last_only){
|
|
return time_arr[0];
|
|
}
|
|
else if(time_arr[0] < 0){
|
|
return 0;
|
|
}
|
|
tmp = 0;
|
|
time_arr = time_arr.map(function(v,i){
|
|
v += tmp;
|
|
var max_val = 60;
|
|
if(i == time_arr.length - 1)
|
|
max_val = 24;
|
|
tmp = Math.floor(v / max_val);
|
|
return (v % max_val);
|
|
})
|
|
time_arr.reverse();
|
|
time_arr = time_arr.map(function(v){return(v < 10 ? '0'+v : v)});
|
|
return time_arr.join(":");
|
|
}
|
|
time_calc.add_interval = function(time_str,interval){
|
|
var time_arr = time_str.split(":");
|
|
var interval_arr = interval.split(":");
|
|
time_arr = time_arr.map(function(v,i){return (parseInt(v)+parseInt(interval_arr[i]))})
|
|
time_arr.reverse();
|
|
var tmp = 0;
|
|
time_arr = time_arr.map(function(v,i){
|
|
v += tmp;
|
|
var max_val = 60;
|
|
if(i == time_arr.length - 1)
|
|
max_val = 24;
|
|
tmp = Math.floor(v / max_val);
|
|
return (v % max_val);
|
|
})
|
|
time_arr.reverse();
|
|
time_arr = time_arr.map(function(v){return(v < 10 ? '0'+v : v)});
|
|
return time_arr.join(":");
|
|
}
|
|
time_calc.get_next_hour = function(time_str){
|
|
var time_arr = time_str.split(":");
|
|
var hour = time_arr[0];
|
|
time_arr[0] = this.add_interval(hour,"1");
|
|
return time_arr.join(":");
|
|
}
|
|
time_calc.get_next_hour_only = function(time_str){
|
|
time_str = this.get_next_hour(time_str);
|
|
return time_str.replace(/:([:\d]+)/g,function(v){return v.replace(/\d/g,'0')});
|
|
}
|
|
window.timer_offset = (new Date().getTimezoneOffset() / -60).toString();
|
|
if(window.timer_offset[0] != "-"){
|
|
window.timer_offset = "+" + window.timer_offset;
|
|
}
|
|
window.time_tracker = {};
|
|
time_tracker.work_seconds = <%= @ruling_timer_temp.calc("work_times") %>;
|
|
time_tracker.rest_seconds = <%= @ruling_timer_temp.calc("rest_times") %>;
|
|
time_tracker.status = "<%= @ruling_timer_temp.status %>";
|
|
time_tracker.to_utc_date = function(date){
|
|
var new_date = new Date();
|
|
new_date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
|
|
return new_date;
|
|
}
|
|
time_tracker.getPaddedComp = function(comp) {
|
|
return ((parseInt(comp) < 10) ? ('0' + comp) : comp)
|
|
}
|
|
time_tracker.transform_second_to_time = function(seconds){
|
|
var hour = 3600;
|
|
var minute = 60;
|
|
var total_hour = this.getPaddedComp(Math.floor(seconds / hour));
|
|
var rest_seconds = seconds % hour;
|
|
var total_minute = this.getPaddedComp(Math.floor(rest_seconds / minute));
|
|
var total_second = this.getPaddedComp(rest_seconds % minute);
|
|
return total_hour + ":" + total_minute + ":" + total_second;
|
|
}
|
|
time_tracker.getDateString = function(date, format,is_chinese) {
|
|
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
var week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
|
if(is_chinese){
|
|
months = [];
|
|
for(var i=0;i<12;i++){
|
|
months.push((i+1)+"月");
|
|
}
|
|
week_days = ["週日","週一","週二","週三","週四","週五","週六"]
|
|
}
|
|
var getPaddedComp = function(comp) {
|
|
return ((parseInt(comp) < 10) ? ('0' + comp) : comp)
|
|
},
|
|
formattedDate = format,
|
|
o = {
|
|
"y+": date.getFullYear() + (is_chinese ? "年" : ""), // year
|
|
"MM+": getPaddedComp(date.getMonth() + 1), //raw month
|
|
"M+": months[date.getMonth()], //month
|
|
"d+": (is_chinese ? (date.getDate() + "日") : getPaddedComp(date.getDate())), //day
|
|
"w+": week_days[date.getDay()], //weekday
|
|
"h+": getPaddedComp((date.getHours() > 12) ? date.getHours() % 12 : date.getHours()), //hour
|
|
"H+": getPaddedComp(date.getHours()), //hour
|
|
"m+": getPaddedComp(date.getMinutes()), //minute
|
|
"s+": getPaddedComp(date.getSeconds()), //second
|
|
"S+": getPaddedComp(date.getMilliseconds()), //millisecond,
|
|
"b+": (date.getHours() >= 12) ? 'PM' : 'AM'
|
|
};
|
|
|
|
for (var k in o) {
|
|
if (new RegExp("(" + k + ")").test(format)) {
|
|
formattedDate = formattedDate.replace(RegExp.$1, o[k]);
|
|
}
|
|
}
|
|
return formattedDate;
|
|
};
|
|
<% if @ruling_timer_temp.events.count != 0 %>
|
|
if(window.can_notify){
|
|
function add_events_notifies(permission){
|
|
var notify_title = "";
|
|
<% @ruling_timer_temp.events.each do |event| %>
|
|
var now_str = time_tracker.getDateString(new Date,"H:m")
|
|
notify_title = "<%="#{event["start"]} ~ #{event["end"]} : #{event["event"]}"%>";
|
|
if(time_calc.sub_interval("<%=event["end"]%>",now_str,true) > 0){
|
|
add_notify(permission,"<%=event["start"]%>","<%=event["end"]%>",notify_title);
|
|
}
|
|
<% end %>
|
|
}
|
|
if (Notification.permission === 'default' || Notification.permission === 'undefined') {
|
|
Notification.requestPermission(function(permission){
|
|
add_events_notifies(permission);
|
|
});
|
|
}else{
|
|
add_events_notifies(Notification.permission);
|
|
}
|
|
}
|
|
<% end %>
|
|
$(document).ready(function(){
|
|
var is_chinese = ( I18n && I18n.locale.indexOf('zh') != -1 );
|
|
time_tracker.datetime_format = is_chinese ? 'y M d h:m b' : 'd M, y h:m b';
|
|
time_tracker.date_format = is_chinese ? 'y M d' : 'd M, y';
|
|
time_tracker.time_format = "h:m b";
|
|
time_tracker.date_time_str_format = 'y/MM/d H:m';
|
|
time_tracker.short_day = (is_chinese ? "d (w)" : "w d");
|
|
time_tracker.short_date = (is_chinese ? "M d (w)" : "w d, M");
|
|
var update_interval = 60 * 1000;
|
|
var time_tracker_timeout_id;
|
|
function update_time(){
|
|
time_tracker.now_str = time_tracker.getDateString(new Date,"H:m");
|
|
$(".current_time").html(time_tracker.getDateString(new Date,time_tracker.time_format));
|
|
if(window.all_notifies.length != 0){
|
|
window.all_notifies.forEach(function(notify,i){
|
|
if(notify != null){
|
|
if(window.time_calc.sub_interval(notify["end_time"],time_tracker.now_str,true) <= 0){
|
|
window.all_notifies[i] = null;
|
|
}else{
|
|
var remain_time = window.time_calc.sub_interval(notify["time"],time_tracker.now_str,true);
|
|
if(remain_time <= 2){
|
|
window.create_notify(notify["title"],notify["body"],i);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
var update_interval = 60 * 1000;
|
|
if(time_tracker_timeout_id)
|
|
window.clearTimeout(time_tracker_timeout_id);
|
|
time_tracker_timeout_id = window.setTimeout(update_time,update_interval)
|
|
}
|
|
update_time();
|
|
window.show_timer_window = function(need_display){
|
|
$("#timeman_main").css("display","");
|
|
if($("#timeman_main").hasClass("active_popup") && need_display !== true)
|
|
$("#timeman_main").removeClass("active_popup");
|
|
else{
|
|
var timeman_button = $('#timeman-container');
|
|
var timeman_button_offset = timeman_button.offset();
|
|
$("#timeman_main").css('top', timeman_button_offset.top + timeman_button.height() + 22);
|
|
$("#timeman_main .popup-window-angly-top").css('left', $('#timeman-right').offset().left);
|
|
$("#timeman_main").addClass("active_popup");
|
|
if($.fn.scrollingTabs)
|
|
$('#timeman_main .nav-pills').scrollingTabs('refresh');
|
|
}
|
|
}
|
|
$("#timeman-container #timeman-timer,#timeman-container .timeman-right-side").off("click").on("click",show_timer_window)
|
|
$(document).on("click",":not(.timeman-wrap,#timeman_main)",function(event){
|
|
var target = $(event.target);
|
|
if(target.is(":not(.timeman-wrap,#timeman_main,#ui-datepicker-div)")){
|
|
if(target.parents(".timeman-wrap,#timeman_main,#menu-popup-task,.popup-window,#ui-datepicker-div").length == 0){
|
|
$(".popup-window").css("display","none").removeClass("popup").removeClass("active_popup");
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
<% end %> |