ui: new contest edit page and form_checkbox

packages/ui-default/components/form/checkbox.page.styl

@@ -3,16 +3,15 @@
 $checkbox-size = 16px
 
 .checkbox
-  font-size: rem($font-size-secondary)
+  font-size: rem($font-size-small) !important
-  line-height: 1.4
+  line-height: 1.4 !important
   border: 0
-  display: inline-block
+  display: inline-block !important
   vertical-align: middle
   cursor: pointer
   user-select: none
-  color: lighten($text-1-color, 30%)
+  color: lighten($text-1-color, 30%) !important
-  margin: $input-margin
+  margin: $input-margin !important
-  padding: ((rem($form-control-height) - (@line-height * @font-size)) / 2) 0
 
   &:hover
     color: $text-1-color
@@ -20,13 +19,12 @@ $checkbox-size = 16px
   input
     appearance: none
     border: 1px solid #D0D0D0
-    display: inline-block
     border-radius: 1px
     vertical-align: top
     width: rem($checkbox-size)
     height: rem($checkbox-size)
-    margin: ((@line-height * @font-size - rem($checkbox-size)) / 2) 0
+    margin: ((@line-height * @font-size - rem($checkbox-size)) / 2) 0  !important
-    margin-right: rem(5px)
+    margin-right: rem(5px) !important
     position: relative
     outline: 0
     transition: background .1s linear

packages/ui-default/pages/contest.page.styl

@@ -108,14 +108,6 @@ $highlight-button-color = #F6DF45
       .detail-button
         width: auto
 
-
-.page--contest_edit
-.page--contest_create
-  label
-    &.checkbox
-      margin-top: 24px
-
-
 .page--contest_problemlist
   .col--status
     width: rem(150px)

packages/ui-default/pages/contest_edit.page.ts

@@ -1,11 +1,32 @@
 import $ from 'jquery';
+import moment from 'moment-timezone';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
+import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
 import { ConfirmDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
 import { i18n, request, tpl } from 'vj/utils';
 
 const page = new NamedPage(['contest_edit', 'contest_create', 'homework_create', 'homework_edit'], (pagename) => {
   ProblemSelectAutoComplete.getOrConstruct($('[name="pids"]'), { multi: true, clearDefaultValue: false });
+  UserSelectAutoComplete.getOrConstruct<true>($('[name="maintainer"]'), { multi: true, clearDefaultValue: false });
+  $('[name="rule"]').on('change', () => {
+    const rule = $('[name="rule"]').val();
+    $('.contest-rule-settings').hide();
+    $(`.contest-rule--${rule}`).show();
+  }).trigger('change');
+  $('[name="beginAtDate"], [name="beginAtTime"], [name="duration"]').on('change', () => {
+    const beginAtDate = $('[name="beginAtDate"]').val();
+    const beginAtTime = $('[name="beginAtTime"]').val();
+    const duration = $('[name="duration"]').val();
+    console.log(beginAtDate, beginAtTime, duration);
+    const endAt = moment(`${beginAtDate} ${beginAtTime}`).add(+duration, 'hours').toDate();
+    if (endAt) $('[name="endAt"]').val(moment(endAt).format('YYYY-MM-DD HH:mm'));
+  });
+  $('[name="authorize"]').removeAttr('disabled').on('change', () => {
+    const authorized = $('[name="authorize"]').val();
+    $('.authorize-settings').hide();
+    $(`.authorize--${authorized}`).show();
+  }).trigger('change');
   if (pagename.endsWith('edit')) {
     let confirmed = false;
     $(document).on('click', '[value="delete"]', (ev) => {

packages/ui-default/templates/components/form.html

@@ -199,13 +199,14 @@
   <label class="checkbox">
     <input type="checkbox" name="{{ args.name }}"{% if args.value %} checked{% endif %}
       {{ form_attr('checkbox', args) }}
-    >{{ _(args.label) }}
+    >
+    {% if args.placeholder %}{{ _(args.placeholder) }}{% endif %}
   </label>
 </div>
 {% endmacro %}
 
 {% macro form_checkbox(args) %}
-{{ form_begin({columns:5, no_label:true}|assign(args)) }}
+{{ form_begin({columns:5}|assign(args)) }}
 {{ checkbox(args) }}
-{{ form_end({no_label:true}|assign(args)) }}
+{{ form_end(args) }}
 {% endmacro %}

packages/ui-default/templates/contest_edit.html

@@ -3,8 +3,11 @@
 <div class="row">
   <div class="medium-9 columns">
     <div class="section">
-      <div class="section__body">
+      <form method="post">
-        <form method="post">
+        <div class="section__header">
+          <h2 class="section__title">{{ _('Basic Settings') }}</h2>
+        </div>
+        <div class="section__body">
           <div class="row">
             {{ form.form_select({
               columns:3,
@@ -15,7 +18,7 @@
               row:false
             }) }}
             {{ form.form_text({
-              columns:4,
+              columns:9,
               label:'Title',
               name:'title',
               placeholder:_('title'),
@@ -23,22 +26,6 @@
               autofocus:true,
               row:false
             }) }}
-            {{ form.form_text({
-              columns:3,
-              label:'Invitation Code',
-              name:'code',
-              placeholder:_('(leave blank if none)'),
-              value:tdoc._code|default(''),
-              row:false
-            }) }}
-            {{ form.form_checkbox({
-              columns:2,
-              label:'Rated',
-              name:'rated',
-              placeholder:_('Is rated'),
-              value:tdoc.rated|default(true),
-              row:false
-            }) }}
           </div>
           <div class="row">
             {{ form.form_text({
@@ -68,35 +55,22 @@
             }) }}
             {{ form.form_text({
               columns:4,
-              label:'Assign',
+              label:'End Time',
-              name:'assign',
+              name:'endAt',
-              placeholder:_('Group / UID'),
+              placeholder:'YYYY-mm-dd HH:MM',
-              value:tdoc.assign|default(''),
+              value:beginAt.add(duration, 'hours').format('YYYY-M-D HH:mm'),
+              disabled:true,
               row:false
             }) }}
           </div>
-          <div class="row">
           {{ form.form_text({
-            columns:9,
+            columns:12,
             label:'Problems',
             name:'pids',
             value:pids,
             placeholder:_("Seperated with ','"),
-            row:false
+            row:true
           }) }}
-          {{ form.form_checkbox({
-            columns:3,
-            label:'Auto hide-and show',
-            name:'autoHide',
-            placeholder:'',
-            value:handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) and (tdoc.autoHide|default(true)),
-            disabled:not handler.user.hasPerm(perm.PERM_EDIT_PROBLEM),
-            row:false
-          }) }}
-          {% if tdoc.lockAt %}
-            <input type="hidden" name="lock" value="{{ ((tdoc.endAt - tdoc.lockAt)/60000)|int }}">
-          {% endif %}
-          </div>
           {{ form.form_textarea({
             columns:null,
             label:'Content',
@@ -104,6 +78,105 @@
             value:tdoc['content']|default(''),
             markdown:true
           }) }}
+        </div>
+        <div style="padding-top: 0" class="section__header">
+          <h2 class="section__title">{{ _('Authorize Settings') }}</h2>
+        </div>
+        <div class="section__body">
+          <div class="row">
+            {{ form.form_select({
+              columns:3,
+              label:'Authorize Control',
+              name:'authorize',
+              options:{
+                'public': _('Public'),
+                'invite': _('Need Invitation Code'),
+                'assign': _('Assign User/Group')
+              },
+              value: ("public" if not tdoc._code else "invite") if not tdoc.assign else "assign",
+              disabled:true,
+              row:false
+            }) }}
+            <div style="display: none" class="authorize-settings authorize--assign">
+            {{ form.form_text({
+              columns:9,
+              label:'Assign',
+              name:'assign',
+              placeholder:_('Group / UID'),
+              value:tdoc.assign|default(''),
+              row:false
+            }) }}
+            </div>
+            <div style="display: none" class="authorize-settings authorize--invite">
+            {{ form.form_text({
+              columns:9,
+              label:'Invitation Code',
+              name:'code',
+              placeholder:_('(leave blank if none)'),
+              value:tdoc._code|default(''),
+              row:false
+            }) }}
+            </div>
+          </div>
+          {{ form.form_text({
+            columns:12,
+            label:'Maintainer',
+            name:'maintainer',
+            help_text:_('Allow to Maintain Contest'),
+            value:tdoc.maintainer|default('')
+          }) }}
+        </div>
+        <div style="padding-top: 0" class="section__header">
+          <h2 class="section__title">{{ _('Contest Settings') }}</h2>
+        </div>
+        <div class="section__body">
+          <div class="row">
+            {{ form.form_checkbox({
+                columns:2,
+                label:'Rated',
+                name:'rated',
+                placeholder:_('Is rated'),
+                value:tdoc.rated|default(true),
+                row:false
+            }) }}
+            {{ form.form_checkbox({
+              columns:3,
+              label:'Auto hide-and show',
+              name:'autoHide',
+              placeholder:_('Auto hide problems between contest'),
+              value:handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) and (tdoc.autoHide|default(true)),
+              disabled:not handler.user.hasPerm(perm.PERM_EDIT_PROBLEM),
+              row:false
+            }) }}
+            {{ form.form_checkbox({
+              columns:3,
+              label:'Allow View Code',
+              name:'allowViewCode',
+              placeholder:_('Allow user view others code after contest'),
+              value:tdoc.allowViewCode|default(true),
+              row:false
+            }) }}
+            <div style="display: none" class="contest-rule-settings contest-rule--acm">
+            {{ form.form_text({
+              columns:4,
+              label:'Lock (minutes)',
+              name:'lock',
+              value:(((tdoc.endAt - tdoc.lockAt)/60000)|int)|default(''),
+              help_text:_('Lock scoreboard on last N minutes'),
+              row:false
+            }) }}
+            </div>
+            <div style="display: none" class="contest-rule-settings contest-rule--oi">
+            {{ form.form_text({
+              columns:4,
+              label:'Flexable Duration',
+              name:'contestDuration',
+              value:tdoc.duration|default(''),
+              help_text:_('Limit user in N hours finish contest'),
+              row:false
+            }) }}
+            </div>
+          </div>
           <div class="row">
             <div class="columns">
               <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">

packages/ui-default/templates/partials/setting.html

@@ -69,7 +69,7 @@
     {% set _val = current[setting.key] %}
     {{ form.form_checkbox({
           label:setting.name,
-          help_text:setting.desc,
+          placeholder:setting.desc,
           name:setting.key,
           value:setting.value if (_val === undefined or _val === null) else _val,
           disabled:setting.flag|bitand(2)
@@ -78,7 +78,8 @@
           label:setting.name,
           name:'booleanKeys.' + setting.key,
           value:true,
-          extra_class:'display-hidden'
+          extra_class:'display-hidden',
+          no_label:true
     })}}
   {% endif %}
   {% endif %}