Advancing more on calendar rules edition

server/src/uds/static/adm/js/gui-d-calendar.coffee

@@ -14,10 +14,11 @@ gui.calendars.link = ->
     return
 
   freqDct =
-    'DAILY': [gettext('day'), gettext('days')]
+    'DAILY': [gettext('day'), gettext('days'), gettext('Dayly')]
-    'WEEKLY': [gettext('week'), gettext('weeks')]
+    'WEEKLY': [gettext('week'), gettext('weeks'), gettext('Weekly')]
-    'MONTHLY': [gettext('month'), gettext('months')]
+    'MONTHLY': [gettext('month'), gettext('months'), gettext('Monthly')]
-    'YEARLY': [gettext('year'), gettext('years')]
+    'YEARLY': [gettext('year'), gettext('years'), gettext('Yearly')]
+    'WEEKDAYS': ['', '', gettext('Weekdays')]
 
   weekDays = [
     gettext('Sun'), gettext('Monday'), gettext('Tuesday'), gettext('Wednesday'), gettext('Thursday'), gettext('Friday'), gettext('Saturday')
@@ -46,16 +47,68 @@ gui.calendars.link = ->
     
   newEditFnc = (forEdit) ->
     realFnc = (value, refreshFnc) ->
+      sortFnc = (a, b) ->
+        return 1 if a.value > b.value
+        return -1 if a.value < b.value
+        return 0
+
       api.templates.get "calendar_rule", (tmpl) ->
         content = api.templates.evaluate(tmpl,
+            freqs: ( {id: key, value: val[2]} for own key, val of freqDct)
             days: (w.substr(0, 3) for w in weekDays)
         )
-        modalId = gui.launchModal((if value is null then gettext("New rule") else gettext("Edit rule")), content,
+        modalId = gui.launchModal((if value is null then gettext("New rule") else gettext("Edit rule") + ' <b>' + value.name + '</b>' ), content,
           actionButton: "<button type=\"button\" class=\"btn btn-success button-accept\">" + gettext("Save") + "</button>"
         )
+        $('#div-interval').show()
+        $('#div-weekdays').hide()
+
+        # Fill in fields if needed
+        if value != null
+            alert('ok')
+
+
+        # apply styles
         gui.tools.applyCustoms modalId
+
+        # Event handlers
+
+        # Change frequency
+        $('#id-rule-freq').on 'change', () ->
+          $this = $(this)
+          if $this.val() == "WEEKDAYS"
+            $('#div-interval').hide()
+            $('#div-weekdays').show()
+          else
+            $('#div-interval').show()
+            $('#div-weekdays').hide()
+          return
+
+        # Save
         $(modalId + " .button-accept").click ->
-          alert('Save')
+
+          value = { id: '' } if value is null
+
+          values = {}
+
+          $(modalId + ' :input').each ()->
+            values[this.name] = $(this).val()
+            return
+
+          $(modalId + ' :input[type=checkbox]').each ()->
+            gui.doLog this.name, $(this).prop('checked')
+            values[this.name] = $(this).prop('checked')
+            return
+
+          value.name = values.rule_name
+
+          if $('#id-rule-freq').val() == 'WEEKDAYS'
+            value.interval = -1
+          else
+            value.interval = values.rule_interval
+
+          gui.doLog value, values
+
 
     if forEdit is true
       (value, event, table, refreshFnc) ->

server/src/uds/static/adm/js/gui-tools.coffee

@@ -69,6 +69,7 @@
         if $tspn.attr("basic") != "true"
           $tspn.bootstrapSwitch()
 
+      # datepicker
       $.each $(selector + " input[type=date]:not([readonly])"), (index, tspn) ->
         $tspn = $(tspn)
         if $tspn.val() is '2000-01-01'
@@ -87,6 +88,13 @@
 
         $tspn.parent().datepicker options
 
+      # timepicker
+      $.each $(selector + " input[type=time]:not([readonly])"), (index, tspn) ->
+        $tspn = $(tspn)
+        $tspn.timepicker
+          showMeridian: false
+          defaultTime: false
+
       # Activate "cool" selects
       $.each $(selector + " .selectpicker"), (index, tspn) ->
         $tspn = $(tspn)

server/src/uds/templates/uds/admin/index.html

@@ -20,6 +20,7 @@
         <link href="{% get_static_prefix %}adm/css/jquery.bootstrap-touchspin.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/bootstrap-select.min.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/bootstrap-datepicker3.css" rel="stylesheet" media="screen">
+        <link href="{% get_static_prefix %}adm/css/bootstrap-timepicker.css" rel="stylesheet" media="screen">
 
         <link href="{% get_static_prefix %}adm/css/jquery.dataTables.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/TableTools.css" rel="stylesheet" media="screen">
@@ -74,6 +75,7 @@
         <script src="{% get_static_prefix %}adm/js/bootstrap-switch.min.js"></script>
         <script src="{% get_static_prefix %}adm/js/jquery.bootstrap-touchspin.js"></script>
         <script src="{% get_static_prefix %}adm/js/bootstrap-datepicker.js"></script>
+        <script src="{% get_static_prefix %}adm/js/bootstrap-timepicker.js"></script>
         <script src="{% get_static_prefix %}adm/js/datepicker-locales/bootstrap-datepicker.{{ LANGUAGE_CODE }}.min.js"></script>
         
         <script src="{% get_static_prefix %}adm/js/bootstrap-select.min.js"></script>

server/src/uds/templates/uds/admin/tmpl/calendar_rule.html

@@ -15,26 +15,21 @@
     </div>
   </div>
 
-  <div class="form-group">
-    <label for="id-rule-freq" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Frequency for this rule'%}">{% trans 'Frequency' %}</label>
-    <div class="col-sm-9">
-      <div class="input-group col-sm-12">
-        <select class="selectpicker show-menu-arrow show-tick"  name="rule_frequency" data-style="btn-default" data-width="100%" id="id-rule-freq" required>
-          <option value="YEARLY">{% trans 'Yearly' %}</option>
-          <option value="MONTHLY">{% trans 'Monthly' %}</option>
-          <option value="WEEKLY">{% trans 'Weekly' %}</option>
-          <option value="DAILY">{% trans 'Daily' %}</option>
-          <option value="WEEKDAYS">{% trans 'Weekdays' %}</option>
-        </select>
-      </div>
-    </div>
-  </div>
-
   <div class="form-group">
     <label for="id-rule-start" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Start date'%}">{% trans 'Start' %}</label>
     <div class="col-sm-9">
+      <div class="row">
+        <div class="col-sm-6">
           <div class="input-group date">
-          <input type="date" required placeholder="starting date for rule" id="id-rule-start" name="rule_start" class="form-control modal_field_data " aria-required="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+              <input type="date" required placeholder="starting date for rule" id="id-rule-start" name="rule_start_date" class="form-control modal_field_data " aria-required="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="input-group bootstrap-timepicker timepicker">
+              <input type="time" value="00:00" name="rule_start_time" class="form-control input-small">
+              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -42,26 +37,47 @@
   <div class="form-group">
     <label for="id-rule-end" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'End date'%}">{% trans 'End' %}</label>
     <div class="col-sm-9">
+      <div class="row">
+        <div class="col-sm-6">
           <div class="input-group date">
-          <input type="date" required placeholder="Ending date for rule" id="id-rule-end" name="rule_end" clear="true" class="form-control modal_field_data" aria-required="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+              <input type="date" required placeholder="ending date for rule" id="id-rule-start" name="rule_end_date" class="form-control modal_field_data " aria-required="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="input-group bootstrap-timepicker timepicker">
+              <input type="time" value="00:00" name="rule_end_time" class="form-control input-small">
+              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
+          </div>
+        </div>
       </div>
     </div>    
   </div>
 
   <div class="form-group">
-    <label for="id-rule-interval-num" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Repeat interval for this rule'%}">{% trans 'Interval' %}</label>
+    <label for="id-rule-freq" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Frequency for this rule'%}">{% trans 'Frequency' %}</label>
     <div class="col-sm-9">
-      <input id="id-rule-interval-num" name="rule_comments" type="numberic" class="form-control" placeholder="{% trans 'Repeat interval for rule' %}" autofocus required>
+      <select class="selectpicker show-menu-arrow show-tick"  name="rule_frequency" data-style="btn-default" data-width="100%" id="id-rule-freq" required>
+        {% verbatim %}{{#each freqs}}
+        <option value="{{ id }}">{{ value }}</option>
+        {{/each}}{% endverbatim %}
+      </select>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group" id="div-interval">
+    <label for="id-rule-interval-num" class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Repeat interval for this rule in frequency units'%}">{% trans 'Interval' %}</label>
+    <div class="col-sm-9">
+      <input id="id-rule-interval-num" name="rule_interval" type="numeric" class="form-control" placeholder="{% trans 'Repeat interval for rule' %}" autofocus required>
+    </div>
+  </div>
+
+  <div class="form-group" id="div-weekdays">
     <label class="col-sm-3 control-label" data-toggle="tooltip" data-title="{% trans 'Weekdays for this rule'%}">{% trans 'Weekdays' %}</label>
     <div class="col-sm-9">
       <div class="btn-group" data-toggle="buttons">
         {% verbatim %}{{#each days}}
         <label class="btn btn-default">
-          <input type="checkbox" name="{{ this }}" basic="true" autocomplete="off">{{ this }}
+          <input type="checkbox" name="wd_{{ this }}" basic="true" autocomplete="off">{{ this }}
         </label>
         {{/each}}{% endverbatim %}
       </div>