From 0d3952498c829e4db7845b9a4bff27c40ed40e2a Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Fri, 16 Aug 2013 16:34:56 +0300
Subject: [PATCH] added working schedule

---
 static/css/base-site.css           | 12 +++++-
 static/css/jquery.timepicker.css   | 69 ++++++++++++++++++++++++++++++
 static/css/ui.css                  |  4 ++
 static/js/base-site.js             | 17 +++++++-
 static/js/jquery.timepicker.min.js |  1 +
 static/js/ui.js                    | 30 ++++++++++++-
 templates/base-site.html           | 61 +++++++++++++++++++++++++-
 templates/base.html                |  4 ++
 8 files changed, 193 insertions(+), 5 deletions(-)
 create mode 100755 static/css/jquery.timepicker.css
 create mode 100644 static/js/jquery.timepicker.min.js

diff --git a/static/css/base-site.css b/static/css/base-site.css
index 9e05412..6d92e45 100644
--- a/static/css/base-site.css
+++ b/static/css/base-site.css
@@ -27,9 +27,12 @@
  
     /* layout */
 
+html {
+    font-family: 'Maven Pro';
+}
+
 div.page,
 div.header-container {
-    font-family: 'Maven Pro';
     position: relative;
     min-width: 1000px;
     max-width: 1580px;
@@ -78,6 +81,7 @@ div.page-container.stretched {
 div.settings {
     background-color: #313131;
     position: absolute;
+    z-index: 1;
     top: 0px;
     left: 0px;
     width: 0px;
@@ -140,7 +144,7 @@ span.settings-item-label {
 
 span.settings-item-unit {
     font-size: 0.6em;
-    padding-left: 5px;
+    padding: 0px 0.2em;
 }
 
 div.settings-item-separator {
@@ -174,6 +178,10 @@ div.check-box.on.section div.check-box-button {
     background-color: #3498db;
 }
 
+input[type=text].working-schedule.number {
+    width: 50px;
+}
+
 
     /* media queries */
 
diff --git a/static/css/jquery.timepicker.css b/static/css/jquery.timepicker.css
new file mode 100755
index 0000000..ad4665d
--- /dev/null
+++ b/static/css/jquery.timepicker.css
@@ -0,0 +1,69 @@
+
+.ui-timepicker-wrapper {
+	overflow-y: auto;
+	height: 150px;
+	width: 6.5em;
+	background: #414141;
+	border: 1px solid #515151;
+	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	outline: none;
+	z-index: 10001;
+	margin: 0;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration {
+	width: 11em;
+}
+
+.ui-timepicker-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ui-timepicker-duration {
+	margin-left: 5px; color: #888;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-duration {
+	color: #888;
+}
+
+.ui-timepicker-list li {
+	padding: 3px 0 3px 5px;
+	cursor: pointer;
+	white-space: nowrap;
+	color: white;
+	list-style: none;
+	font-size: 0.8em;
+	margin: 0;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-selected {
+	background: #aaa; color: black;
+}
+
+li.ui-timepicker-selected,
+.ui-timepicker-list li:hover,
+.ui-timepicker-list .ui-timepicker-selected:hover {
+	background: #1980EC; color: #fff;
+}
+
+li.ui-timepicker-selected .ui-timepicker-duration,
+.ui-timepicker-list li:hover .ui-timepicker-duration {
+	color: #ccc;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled,
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	color: #888;
+	cursor: default;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	background: #f2f2f2;
+}
diff --git a/static/css/ui.css b/static/css/ui.css
index 61ea310..78bb79f 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -107,6 +107,10 @@ input[type=password].error {
     background-repeat: no-repeat;
 }
 
+input[type=text].time {
+    width: 75px;
+}
+
 
     /* combo box */
 
diff --git a/static/js/base-site.js b/static/js/base-site.js
index ba57deb..3cff20d 100644
--- a/static/js/base-site.js
+++ b/static/js/base-site.js
@@ -36,6 +36,21 @@ function initUI() {
     makeNumberValidator($('#gapEntry'), 1, 86400, false, false);
     makeNumberValidator($('#preCaptureEntry'), 0, 100, false, false);
     makeNumberValidator($('#postCaptureEntry'), 0, 100, false, false);
+    
+    makeTimeValidator($('#mondayFrom'));
+    makeTimeValidator($('#mondayTo'))
+    makeTimeValidator($('#tuesdayFrom'));
+    makeTimeValidator($('#tuesdayTo'))
+    makeTimeValidator($('#wednesdayFrom'));
+    makeTimeValidator($('#wednesdayTo'))
+    makeTimeValidator($('#thursdayFrom'));
+    makeTimeValidator($('#thursdayTo'))
+    makeTimeValidator($('#fridayFrom'));
+    makeTimeValidator($('#fridayTo'))
+    makeTimeValidator($('#saturdayFrom'));
+    makeTimeValidator($('#saturdayTo'))
+    makeTimeValidator($('#sundayFrom'));
+    makeTimeValidator($('#sundayTo'))
 }
 
 $(document).ready(function () {
@@ -50,7 +65,7 @@ $(document).ready(function () {
             $('div.page-container').addClass('stretched');
             $('div.settings-top-bar').addClass('open');
         }
-    });
+    }).click();
     
     initUI();
 });
diff --git a/static/js/jquery.timepicker.min.js b/static/js/jquery.timepicker.min.js
new file mode 100644
index 0000000..72b6b11
--- /dev/null
+++ b/static/js/jquery.timepicker.min.js
@@ -0,0 +1 @@
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){function b(a){if(a.minTime&&(a.minTime=s(a.minTime)),a.maxTime&&(a.maxTime=s(a.maxTime)),a.durationTime&&"function"!=typeof a.durationTime&&(a.durationTime=s(a.durationTime)),a.disableTimeRanges.length>0){for(var b in a.disableTimeRanges)a.disableTimeRanges[b]=[s(a.disableTimeRanges[b][0]),s(a.disableTimeRanges[b][1])];a.disableTimeRanges=a.disableTimeRanges.sort(function(a,b){return a[0]-b[0]})}return a}function c(b){var c=b.data("timepicker-settings"),d=b.data("timepicker-list");d&&d.length&&(d.remove(),b.data("timepicker-list",!1)),d=a("<ul />",{"class":"ui-timepicker-list"});var e=a("<div />",{"class":"ui-timepicker-wrapper",tabindex:-1});e.css({display:"none",position:"absolute"}).append(d),c.className&&e.addClass(c.className),null===c.minTime&&null===c.durationTime||!c.showDuration||e.addClass("ui-timepicker-with-duration");var f=c.minTime;"function"==typeof c.durationTime?f=s(c.durationTime()):null!==c.durationTime&&(f=c.durationTime);var h=null!==c.minTime?c.minTime:0,j=null!==c.maxTime?c.maxTime:h+v-1;h>=j&&(j+=v);for(var k=c.disableTimeRanges,l=0,m=k.length,n=h;j>=n;n+=60*c.step){var o=n%v,t=a("<li />");if(t.data("time",o),t.text(r(o,c.timeFormat)),(null!==c.minTime||null!==c.durationTime)&&c.showDuration){var u=a("<span />");u.addClass("ui-timepicker-duration"),u.text(" ("+q(n-f)+")"),t.append(u)}m>l&&(o>=k[l][1]&&(l+=1),k[l]&&o>=k[l][0]&&o<k[l][1]&&t.addClass("ui-timepicker-disabled")),d.append(t)}e.data("timepicker-input",b),b.data("timepicker-list",e);var w=c.appendTo;"string"==typeof w?w=a(w):"function"==typeof w&&(w=w(b)),w.append(e),i(b,d),d.on("click","li",function(){b.off("focus.timepicker"),b.on("focus.timepicker-ie-hack",function(){b.off("focus.timepicker-ie-hack"),b.on("focus.timepicker",y.show)}),g(b)||b[0].focus(),d.find("li").removeClass("ui-timepicker-selected"),a(this).addClass("ui-timepicker-selected"),p(b)&&(b.trigger("hideTimepicker"),e.hide())})}function d(){return new Date(1970,1,1,0,0,0)}function e(b){"ontouchstart"in document?a("body").on("touchstart.ui-timepicker",f):(a("body").on("mousedown.ui-timepicker",f),b.closeOnWindowScroll&&a(window).on("scroll.ui-timepicker",f))}function f(b){var c=a(b.target),d=c.closest(".ui-timepicker-input");0===d.length&&0===c.closest(".ui-timepicker-wrapper").length&&(y.hide(),a("body").unbind(".ui-timepicker"),a(window).unbind(".ui-timepicker"))}function g(a){var b=a.data("timepicker-settings");return(window.navigator.msMaxTouchPoints||"ontouchstart"in document)&&b.disableTouchKeyboard}function h(b,c,d){if(!d&&0!==d)return!1;var e=b.data("timepicker-settings"),f=!1,g=30*e.step;return c.find("li").each(function(b,c){var e=a(c),h=e.data("time")-d;return Math.abs(h)<g||h==g?(f=e,!1):void 0}),f}function i(a,b){b.find("li").removeClass("ui-timepicker-selected");var c=s(k(a));if(c){var d=h(a,b,c);if(d){var e=d.offset().top-b.offset().top;(e+d.outerHeight()>b.outerHeight()||0>e)&&b.scrollTop(b.scrollTop()+d.position().top-d.outerHeight()),d.addClass("ui-timepicker-selected")}}}function j(){if(""!==this.value){var b=a(this),c=b.data("timepicker-list");if(!c||!c.is(":visible")){var d=s(this.value);if(null===d)return b.trigger("timeFormatError"),void 0;var e=b.data("timepicker-settings"),f=!1;if(null!==e.minTime&&d<e.minTime?f=!0:null!==e.maxTime&&d>e.maxTime&&(f=!0),a.each(e.disableTimeRanges,function(){return d>=this[0]&&d<this[1]?(f=!0,!1):void 0}),e.forceRoundTime){var g=d%(60*e.step);g>=30*e.step?d+=60*e.step-g:d-=g}var h=r(d,e.timeFormat);f?l(b,h,"error")&&b.trigger("timeRangeError"):l(b,h)}}}function k(a){return a.is("input")?a.val():a.data("ui-timepicker-value")}function l(a,b,c){return a.data("ui-timepicker-value")!=b?(a.data("ui-timepicker-value",b),a.is("input")&&a.val(b),"select"==c?a.trigger("selectTime").trigger("changeTime").trigger("change"):"error"!=c&&a.trigger("changeTime"),!0):(a.trigger("selectTime"),!1)}function m(b){var c=a(this),d=c.data("timepicker-list");if(!d||!d.is(":visible")){if(40!=b.keyCode)return n(b,c);g(c)||c.focus()}switch(b.keyCode){case 13:return p(c)&&y.hide.apply(this),b.preventDefault(),!1;case 38:var e=d.find(".ui-timepicker-selected");return e.length?e.is(":first-child")||(e.removeClass("ui-timepicker-selected"),e.prev().addClass("ui-timepicker-selected"),e.prev().position().top<e.outerHeight()&&d.scrollTop(d.scrollTop()-e.outerHeight())):(d.find("li").each(function(b,c){return a(c).position().top>0?(e=a(c),!1):void 0}),e.addClass("ui-timepicker-selected")),!1;case 40:return e=d.find(".ui-timepicker-selected"),0===e.length?(d.find("li").each(function(b,c){return a(c).position().top>0?(e=a(c),!1):void 0}),e.addClass("ui-timepicker-selected")):e.is(":last-child")||(e.removeClass("ui-timepicker-selected"),e.next().addClass("ui-timepicker-selected"),e.next().position().top+2*e.outerHeight()>d.outerHeight()&&d.scrollTop(d.scrollTop()+e.outerHeight())),!1;case 27:d.find("li").removeClass("ui-timepicker-selected"),y.hide();break;case 9:y.hide();break;default:return n(b,c)}}function n(a,b){return!b.data("timepicker-settings").disableTextInput||a.ctrlKey||a.altKey||a.metaKey||2!=a.keyCode&&a.keyCode<46}function o(b){var c=a(this),d=c.data("timepicker-list");if(!d||!d.is(":visible"))return!0;switch(b.keyCode){case 96:case 97:case 98:case 99:case 100:case 101:case 102:case 103:case 104:case 105:case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:case 65:case 77:case 80:case 186:case 8:case 46:i(c,d);break;default:return}}function p(a){var b=a.data("timepicker-settings"),c=a.data("timepicker-list"),d=null,e=c.find(".ui-timepicker-selected");if(e.hasClass("ui-timepicker-disabled"))return!1;if(e.length?d=e.data("time"):k(a)&&(d=s(k(a)),i(a,c)),null!==d){var f=r(d,b.timeFormat);l(a,f,"select")}return!0}function q(a){var b,c=Math.round(a/60);if(Math.abs(c)<60)b=[c,x.mins];else if(60==c)b=["1",x.hr];else{var d=(c/60).toFixed(1);"."!=x.decimal&&(d=d.replace(".",x.decimal)),b=[d,x.hrs]}return b.join(" ")}function r(a,b){if(null!==a){for(var c,d,e=new Date(u.valueOf()+1e3*a),f="",g=0;g<b.length;g++)switch(d=b.charAt(g)){case"a":f+=e.getHours()>11?"pm":"am";break;case"A":f+=e.getHours()>11?"PM":"AM";break;case"g":c=e.getHours()%12,f+=0===c?"12":c;break;case"G":f+=e.getHours();break;case"h":c=e.getHours()%12,0!==c&&10>c&&(c="0"+c),f+=0===c?"12":c;break;case"H":c=e.getHours(),f+=c>9?c:"0"+c;break;case"i":var h=e.getMinutes();f+=h>9?h:"0"+h;break;case"s":a=e.getSeconds(),f+=a>9?a:"0"+a;break;default:f+=d}return f}}function s(a){if(""===a)return null;if(!a||a+0==a)return a;"object"==typeof a&&(a=a.getHours()+":"+t(a.getMinutes())+":"+t(a.getSeconds())),a=a.toLowerCase(),new Date(0);var b;if(-1===a.indexOf(":")?(b=a.match(/^([0-9]):?([0-5][0-9])?:?([0-5][0-9])?\s*([pa]?)m?$/),b||(b=a.match(/^([0-2][0-9]):?([0-5][0-9])?:?([0-5][0-9])?\s*([pa]?)m?$/))):b=a.match(/^(\d{1,2})(?::([0-5][0-9]))?(?::([0-5][0-9]))?\s*([pa]?)m?$/),!b)return null;var c,d=parseInt(1*b[1],10);c=b[4]?12==d?"p"==b[4]?12:0:d+("p"==b[4]?12:0):d;var e=1*b[2]||0,f=1*b[3]||0;return 3600*c+60*e+f}function t(a){return("0"+a).slice(-2)}var u=d(),v=86400,w={className:null,minTime:null,maxTime:null,durationTime:null,step:30,showDuration:!1,timeFormat:"g:ia",scrollDefaultNow:!1,scrollDefaultTime:!1,selectOnBlur:!1,disableTouchKeyboard:!0,forceRoundTime:!1,appendTo:"body",disableTimeRanges:[],closeOnWindowScroll:!1,disableTextInput:!1},x={decimal:".",mins:"mins",hr:"hr",hrs:"hrs"},y={init:function(c){return this.each(function(){var d=a(this);if("SELECT"==d[0].tagName){for(var e={type:"text",value:d.val()},f=d[0].attributes,g=0;g<f.length;g++)e[f[g].nodeName]=f[g].nodeValue;var h=a("<input />",e);d.replaceWith(h),d=h}var i=a.extend({},w);c&&(i=a.extend(i,c)),i.lang&&(x=a.extend(x,i.lang)),i=b(i),d.data("timepicker-settings",i),d.prop("autocomplete","off"),d.on("click.timepicker focus.timepicker",y.show),d.on("change.timepicker",j),d.on("keydown.timepicker",m),d.on("keyup.timepicker",o),d.addClass("ui-timepicker-input"),j.call(d.get(0))})},show:function(){var b=a(this),d=b.data("timepicker-settings");g(b)&&b.blur();var f=b.data("timepicker-list");if(!b.prop("readonly")&&(f&&0!==f.length&&"function"!=typeof d.durationTime||(c(b),f=b.data("timepicker-list")),!f.is(":visible"))){y.hide(),f.show(),b.offset().top+b.outerHeight(!0)+f.outerHeight()>a(window).height()+a(window).scrollTop()?f.offset({left:b.offset().left+parseInt(f.css("marginLeft").replace("px",""),10),top:b.offset().top-f.outerHeight()+parseInt(f.css("marginTop").replace("px",""),10)}):f.offset({left:b.offset().left+parseInt(f.css("marginLeft").replace("px",""),10),top:b.offset().top+b.outerHeight()+parseInt(f.css("marginTop").replace("px",""),10)});var i=f.find(".ui-timepicker-selected");if(i.length||(k(b)?i=h(b,f,s(k(b))):d.scrollDefaultNow?i=h(b,f,s(new Date)):d.scrollDefaultTime!==!1&&(i=h(b,f,s(d.scrollDefaultTime)))),i&&i.length){var j=f.scrollTop()+i.position().top-i.outerHeight();f.scrollTop(j)}else f.scrollTop(0);e(d),b.trigger("showTimepicker")}},hide:function(){a(".ui-timepicker-wrapper:visible").each(function(){var b=a(this),c=b.data("timepicker-input"),d=c.data("timepicker-settings");d&&d.selectOnBlur&&p(c),b.hide(),c.trigger("hideTimepicker")})},option:function(c,d){var e=this,f=e.data("timepicker-settings"),g=e.data("timepicker-list");if("object"==typeof c)f=a.extend(f,c);else if("string"==typeof c&&"undefined"!=typeof d)f[c]=d;else if("string"==typeof c)return f[c];return f=b(f),e.data("timepicker-settings",f),g&&(g.remove(),e.data("timepicker-list",!1)),e},getSecondsFromMidnight:function(){return s(k(this))},getTime:function(){var a=this,b=new Date;return b.setHours(0,0,0,0),new Date(b.valueOf()+1e3*s(k(a)))},setTime:function(a){var b=this,c=r(s(a),b.data("timepicker-settings").timeFormat);l(b,c)},remove:function(){var a=this;a.hasClass("ui-timepicker-input")&&(a.removeAttr("autocomplete","off"),a.removeClass("ui-timepicker-input"),a.removeData("timepicker-settings"),a.off(".timepicker"),a.data("timepicker-list")&&a.data("timepicker-list").remove(),a.removeData("timepicker-list"))}};a.fn.timepicker=function(b){return y[b]?y[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+" does not exist on jQuery.timepicker"),void 0):y.init.apply(this,arguments)}});
\ No newline at end of file
diff --git a/static/js/ui.js b/static/js/ui.js
index 769a560..8fbb1a3 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -293,5 +293,33 @@ function makeNumberValidator($input, minVal, maxVal, floating, sign, required) {
     }
     
     $input.keyup(validate);
-    $input.change(validate);
+    $input.change(validate).change();
+}
+
+function makeTimeValidator($input) {
+    function isValid(strVal) {
+        return strVal.match('^[0-2][0-9]:[0-5][0-9]$') != null;
+    }
+    
+    var msg = 'enter a valid time in the following format: HH:MM';
+    
+    function validate() {
+        var strVal = $input.val();
+        if (isValid(strVal)) {
+            $input.attr('title', '');
+            $input.removeClass('error');
+        }
+        else {
+            $input.attr('title', msg);
+            $input.addClass('error');
+        }
+    }
+    
+    $input.keyup(validate);
+    $input.change(validate).change();
+    $input.timepicker({
+        closeOnWindowScroll: true,
+        selectOnBlur: true,
+        timeFormat: 'H:i',
+    });
 }
diff --git a/templates/base-site.html b/templates/base-site.html
index a65d764..dcf8f3e 100644
--- a/templates/base-site.html
+++ b/templates/base-site.html
@@ -8,7 +8,6 @@
 
 {% block script %}
     {{super()}}
-    <script type="text/javascript" src="{{STATIC_URL}}js/css-browser-selector.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/ui.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/base-site.js"></script>
 {% endblock %}
@@ -343,6 +342,66 @@
                         <td><span class="help-mark" title="phone numbers (separated by comma) that are added here will receive SMS notifications whenever a motion event is detected (leave empty to disable SMS notifications)">?</span></td>
                     </tr>
                 </table>
+
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Working Schedule</div>
+                <table class="settings">
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Monday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="mondayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="mondayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Mondays">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Tuesday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="tuesdayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="tuesdayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Tuesdays">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Wednesday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="wednesdayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="wednesdayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Wednesdays">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Thursday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="thursdayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="thursdayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Thursdays">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Friday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="fridayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="fridayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Friday">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Saturday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="saturdayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="saturdayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Saturday">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Sunday</span></td>
+                        <td class="settings-item-value">
+                            <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="sundayFrom">
+                            <span class="settings-item-unit">to</span><input type="text" class="styled working-schedule time" id="sundayTo">
+                        </td>
+                        <td><span class="help-mark" title="sets the working schedule time interval for Sunday">?</span></td>
+                    </tr>
+                </table>
             </div>
         </div>
         <div class="page-container">
diff --git a/templates/base.html b/templates/base.html
index 9cf8dfa..38c5fa4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,11 +8,15 @@
         {% endblock %}
         <title>{% block title %}{% endblock %}</title>
         {% block style %}
+            <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/jquery.timepicker.css" />
             <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/base.css" />
         {% endblock %}
         {% block script %}
+            <script type="text/javascript" src="{{STATIC_URL}}js/css-browser-selector.js"></script>
             <script type="text/javascript" src="{{STATIC_URL}}js/jquery.min.js"></script>
+            <script type="text/javascript" src="{{STATIC_URL}}js/jquery.timepicker.min.js"></script>
             <script type="text/javascript" src="{{STATIC_URL}}js/base.js"></script>
+            
             <script type="text/javascript">
                 var staticUrl = '{{STATIC_URL}}';
             </script>
-- 
2.39.5