From 4577a3baf0ed5953059d370d6030bdf6d83463a3 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 26 May 2021 17:02:34 +0200 Subject: [PATCH] Open and close a form --- www/common/common-ui-elements.js | 1 + www/form/app-form.less | 5 +- www/form/inner.js | 126 ++++++++++++++++++++++++++++++- 3 files changed, 129 insertions(+), 3 deletions(-) diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 4e33b83d0..41b5dfe62 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1133,6 +1133,7 @@ define([ sheet: 'sheets', poll: 'poll', kanban: 'kanban', + form: 'form', whiteboard: 'whiteboard', }; diff --git a/www/form/app-form.less b/www/form/app-form.less index 4ea9d3cf6..cc67ff4f1 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -38,6 +38,10 @@ flex: 1; justify-content: center; + .cp-form-input-block { + display: flex; + } + div.cp-form-creator-container { display: flex; flex: 1; @@ -71,7 +75,6 @@ margin-bottom: 5px; } .cp-form-input-block { - display: flex; //width: @form_input-width; &:not(.editing) { input { diff --git a/www/form/inner.js b/www/form/inner.js index f53141842..01cb9275b 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -20,9 +20,11 @@ define([ '/common/inner/access.js', '/common/inner/properties.js', + '/lib/datepicker/flatpickr.js', '/bower_components/sortablejs/Sortable.min.js', '/bower_components/file-saver/FileSaver.min.js', + 'css!/lib/datepicker/flatpickr.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'less!/form/app-form.less', ], function ( @@ -43,6 +45,7 @@ define([ Messages, AppConfig, Share, Access, Properties, + Flatpickr, Sortable ) { @@ -81,6 +84,13 @@ define([ Messages.form_isPublic = "Results are public"; Messages.form_isPrivate = "Results are private"; + Messages.form_open = "Open"; + Messages.form_setEnd = "Set closing date"; + Messages.form_removeEnd = "Remove closing date"; + Messages.form_isOpen = "This form is open"; + Messages.form_isClosed = "This form was closed on {0}"; + Messages.form_willClose = "This form will close on {0}"; + var editOptions = function (v, setCursorGetter, cb, tmp) { var add = h('button.btn.btn-secondary', [ h('i.fa.fa-plus'), @@ -304,8 +314,8 @@ define([ return results; }; var makeFormControls = function (framework, content, update) { - var send = h('button.btn.btn-primary', update ? Messages.form_update : Messages.form_submit); - var reset = h('button.btn.btn-danger-alt', Messages.form_reset); + var send = h('button.cp-open.btn.btn-primary', update ? Messages.form_update : Messages.form_submit); + var reset = h('button.cp-open.btn.btn-danger-alt', Messages.form_reset); $(reset).click(function () { if (!Array.isArray(APP.formBlocks)) { return; } APP.formBlocks.forEach(function (data) { @@ -345,6 +355,12 @@ define([ }); }); } + + if (APP.isClosed) { + send = undefined; + reset = undefined; + } + return h('div.cp-form-send-container', [send, reset, viewResults]); }; var updateForm = function (framework, content, editable, answers, temp) { @@ -542,6 +558,11 @@ define([ APP.isEditor = Boolean(priv.form_public); var $body = $('body'); + var $toolbarContainer = $('#cp-toolbar'); + var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'pad']); + $toolbarContainer.after(helpMenu.menu); + + var makeFormSettings = function () { var makePublic = h('button.btn.btn-primary', Messages.form_makePublic); if (content.answers.privateKey) { makePublic = undefined; } @@ -563,6 +584,73 @@ define([ }); }); + // End date / Closed state + var endDateContainer = h('div.cp-form-status-container'); + var $endDate = $(endDateContainer); + var refreshEndDate = function () { + $endDate.empty(); + + var endDate = content.answers.endDate; + var date = new Date(endDate).toLocaleString(); + var now = +new Date(); + var text = Messages.form_isOpen; + var buttonTxt = Messages.form_setEnd; + if (endDate <= now) { + text = Messages._getKey('form_isClosed', [date]); + buttonTxt = Messages.form_open; + action = function () { + }; + } else if (endDate > now) { + text = Messages._getKey('form_willClose', [date]); + buttonTxt = Messages.form_removeEnd; + } + + var button = h('button.btn.btn-secondary', buttonTxt); + + var $button = $(button).click(function () { + $button.attr('disabled', 'disabled'); + // If there is an end date, remove it + if (endDate) { + delete content.answers.endDate; + framework.localChange(); + refreshEndDate(); + return; + } + // Otherwise add it + var datePicker = h('input'); + var is24h = false; + var dateFormat = "Y-m-d H:i"; + try { + is24h = !new Intl.DateTimeFormat(navigator.language, { hour: 'numeric' }).format(0).match(/AM/); + } catch (e) {} + if (!is24h) { dateFormat = "Y-m-d h:i K"; } + var picker = Flatpickr(datePicker, { + enableTime: true, + time_24hr: is24h, + dateFormat: dateFormat, + minDate: new Date() + }); + var save = h('button.btn.btn-primary', Messages.settings_save); + $(save).click(function () { + var d = picker.parseDate(datePicker.value); + content.answers.endDate = +d; + framework.localChange(); + refreshEndDate(); + }); + var confirmContent = h('div', [ + h('div', Messages.form_setEnd), + h('div.cp-form-input-block', [datePicker, save]), + ]); + $button.after(confirmContent); + $button.remove(); + }); + + $endDate.append(h('div.cp-form-status', text)); + $endDate.append(h('div.cp-form-actions', button)); + + }; + refreshEndDate(); + var viewResults = h('button.btn.btn-primary', [ h('span.cp-app-form-button-results', Messages.form_viewResults), @@ -586,6 +674,7 @@ define([ }); return [ + endDateContainer, resultsType, viewResults, ]; @@ -659,6 +748,35 @@ define([ return div; }; + var endDateEl = h('div.alert.alert-warning.cp-burn-after-reading'); + var endDate; + var endDateTo; + var refreshEndDateBanner = function (force) { + var _endDate = content.answers.endDate; + if (_endDate === endDate && !force) { return; } + endDate = _endDate; + var date = new Date(endDate).toLocaleString(); + var text = Messages._getKey('form_isClosed', [date]); + if (endDate > +new Date()) { + text = Messages._getKey('form_willClose', [date]); + } + if ($('.cp-help-container').length && endDate) { + $(endDateEl).text(text); + $('.cp-help-container').before(endDateEl); + } else { + $(endDateEl).remove(); + } + + APP.isClosed = endDate && endDate < (+new Date()); + clearTimeout(endDateTo); + if (!APP.isClosed && endDate) { + setTimeout(function () { + refreshEndDateBanner(true); + $('.cp-form-send-container').find('.cp-open').remove(); + },(endDate - +new Date() + 100)); + } + }; + framework.onReady(function (isNew) { var priv = metadataMgr.getPrivateData(); @@ -720,6 +838,9 @@ define([ return; } + refreshEndDateBanner(); + + sframeChan.query("Q_FETCH_MY_ANSWERS", { channel: content.answers.channel, validateKey: content.answers.validateKey, @@ -739,6 +860,7 @@ define([ framework.onContentUpdate(function (newContent) { console.log(newContent); content = newContent; + refreshEndDateBanner(); var answers, temp; if (!APP.isEditor) { answers = getFormResults(); } else { temp = getTempFields(); }