infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve rendering of form polls with time values

pull/1/head
yflory 2021-05-28 16:58:22 +02:00
parent e68fccc863
commit 8871f41bfe
2 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
www/form/app-form.less
View File

@ -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 {

48
www/form/inner.js
View File

@ -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);
});
}