diff --git a/www/form/app-form.less b/www/form/app-form.less index 8795b71aa..efe97ed86 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -74,6 +74,9 @@ .cp-form-block-question { margin-bottom: 5px; } + .cp-form-block-content { + overflow-x: auto; + } .cp-form-input-block { //width: @form_input-width; &:not(.editing) { @@ -218,7 +221,7 @@ } .cp-form-type-poll { - display: flex; + display: inline-flex; flex-flow: column; & > div { display: flex; @@ -236,6 +239,12 @@ width: 100%; } } + .cp-poll-time-day { + flex-basis: 100px; + border-right: 1px solid @cryptpad_text_col; + border-left: 1px solid @cryptpad_text_col; + border-top: 1px solid @cryptpad_text_col; + } &.cp-form-poll-switch { flex-flow: row; & > div { @@ -249,6 +258,13 @@ .cp-form-poll-option, .cp-poll-switch { width: 200px; } + .cp-poll-time-day { + flex-basis: 40px; + border-right: none; + border-bottom: 1px solid @cryptpad_text_col; + border-left: 1px solid @cryptpad_text_col; + border-top: 1px solid @cryptpad_text_col; + } } .cp-form-poll-choice, .cp-form-poll-answer { .fa { diff --git a/www/form/inner.js b/www/form/inner.js index 71fe9de9b..a0a52e673 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -53,10 +53,15 @@ define([ var is24h = false; var dateFormat = "Y-m-d H:i"; + var timeFormat = "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"; } + is24h = false; + if (!is24h) { + dateFormat = "Y-m-d h:i K"; + timeFormat = "h:i K"; + } Messages.button_newform = "New Form"; // XXX Messages.form_invalid = "Invalid form"; @@ -190,8 +195,13 @@ define([ enableTime: true, time_24hr: is24h, dateFormat: dateFormat, + defaultDate: val ? new Date(val) : undefined }); - } else if (v.type === 'day') { Flatpickr(input); } + } else if (v.type === 'day') { + Flatpickr(input, { + defaultDate: val ? new Date(val) : undefined + }); + } } // if this element was active before the remote change, restore cursor @@ -342,6 +352,7 @@ define([ var duplicates = false; $container.find('input').each(function (i, el) { var val = $(el).val().trim(); + if (v.type === "day" || v.type === "time") { val = +new Date(val); } if (values.indexOf(val) === -1) { values.push(val); } else { duplicates = true; } }); @@ -392,12 +403,22 @@ define([ }; var makePollTable = function (answers, opts) { + // Sort date values + if (opts.type !== "text") { + opts.values.sort(function (a, b) { + return +new Date(a) - +new Date(b); + }); + } // Create first line with options var els = opts.values.map(function (data) { if (opts.type === "day") { var _date = new Date(data); data = _date.toLocaleDateString(); } + if (opts.type === "time") { + var _dateT = new Date(data); + data = Flatpickr.formatDate(_dateT, timeFormat); + } return h('div.cp-poll-cell.cp-form-poll-option', data); }); // Insert axis switch button @@ -407,6 +428,28 @@ define([ els.unshift(h('div.cp-poll-cell.cp-poll-switch', switchAxis)); var lines = [h('div', els)]; + // Add an initial row to "time" values containing the days + if (opts.type === "time") { + var days = [h('div.cp-poll-cell')]; + var _days = {}; + opts.values.forEach(function (d) { + var date = new Date(d); + var day = date.toLocaleDateString(); + _days[day] = _days[day] || 0; + _days[day]++; + }); + var dayValues = Object.keys(_days).map(function (d) { return _days[d]; }); + var minDay = Math.min.apply(null, dayValues); + console.log(_days, minDay); + Object.keys(_days).forEach(function (day) { + days.push(h('div.cp-poll-cell.cp-poll-time-day', { + style: 'flex-grow:'+(_days[day]-1)+';' + }, day)); + }); + var width = (opts.values.length + 2)*100; + lines.unshift(h('div', days)); + } + // Add answers if (Array.isArray(answers)) { answers.forEach(function (answer) { @@ -957,7 +1000,6 @@ define([ $tag.find('.cp-form-poll-choice').each(function (i, el) { if (!el._setValue) { return; } var $el = $(el); - console.log(el, $el.data('option'), val); el._setValue(val[$el.data('option')] || 0); }); }