Hackathon 2021 - Timeline
aemi-dev
parent
53ba25b5b0
commit
b365c411ea
|
|
@ -69,6 +69,45 @@
|
|||
justify-content: center;
|
||||
min-width: 300px;
|
||||
|
||||
table.cp-chart-table {
|
||||
|
||||
--color: @colortheme_apps[pad];
|
||||
margin-top: 2em;
|
||||
margin-right: auto;
|
||||
min-width: 400px;
|
||||
padding-bottom: 2rem;
|
||||
width: min-content;
|
||||
|
||||
tr {
|
||||
min-height: 200px;
|
||||
min-width: max-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td {
|
||||
margin: 0 auto;
|
||||
min-width: 20px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
th {
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
tr:not(:first-of-type):not(:last-of-type):not(:nth-of-type(5n+1)) {
|
||||
th {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-bar:not(:hover) {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-form-input-block {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ define([
|
|||
'/common/common-hash.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/common-ui-elements.js',
|
||||
'/common/tippy/tippy.min.js',
|
||||
'/common/clipboard.js',
|
||||
'/common/inner/common-mediatag.js',
|
||||
'/common/hyperscript.js',
|
||||
|
|
@ -54,6 +55,7 @@ define([
|
|||
Hash,
|
||||
UI,
|
||||
UIElements,
|
||||
tippy,
|
||||
Clipboard,
|
||||
MT,
|
||||
h,
|
||||
|
|
@ -1920,10 +1922,65 @@ define([
|
|||
icon: h('i.cptools.cptools-form-poll')
|
||||
},
|
||||
};
|
||||
|
||||
var makeTimeline = APP.makeTimeline = function (answers) {
|
||||
// Here for mockup purpose
|
||||
Object.keys(answers).forEach(function (k) {
|
||||
console.log(answers[k].time);
|
||||
answers[k].time += Math.floor(Math.random() * 10 - 5) * 24 * 3600 * 1000;
|
||||
console.log(answers[k].time);
|
||||
});
|
||||
|
||||
var answersByTime = {};
|
||||
Object.keys(answers).forEach(function (curve) {
|
||||
var obj = answers[curve];
|
||||
var key = new Date(obj.time).toLocaleDateString();
|
||||
if (!answersByTime[key]) {
|
||||
answersByTime[key] = {date: obj.time, count: 1};
|
||||
} else {
|
||||
answersByTime[key].count++;
|
||||
}
|
||||
});
|
||||
|
||||
var dates = Object.keys(answersByTime).sort(function (a, b) {
|
||||
return answersByTime[a].time - answersByTime[b].time;
|
||||
});
|
||||
|
||||
var maxCount = 0;
|
||||
|
||||
Object.keys(answersByTime).forEach(function (date) {
|
||||
var count = answersByTime[date].count;
|
||||
if (count > maxCount) {
|
||||
maxCount = count;
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(answersByTime).forEach(function (date) {
|
||||
var answer = answersByTime[date];
|
||||
answer.percent = answer.count / maxCount;
|
||||
answer.count = answer.count || "";
|
||||
});
|
||||
|
||||
console.log(answersByTime);
|
||||
console.log(dates);
|
||||
|
||||
console.log('done');
|
||||
|
||||
return Charts.table(h('tbody',dates.map(function (date) {
|
||||
var count = answersByTime[date].count;
|
||||
var percent = answersByTime[date].percent;
|
||||
|
||||
var bar = h('td.cp-bar', { style: '--size: ' + Number(percent).toFixed(2), "data-tippy-placement": "top", title: `${count} - ${date}` });
|
||||
var dateEl = h('th', { scope: "row" }, date);
|
||||
|
||||
return h('tr', bar, dateEl );
|
||||
})), ["charts-css", "cp-chart-table", "column", "data-spacing-2", "show-labels", "labels-align-center"]);
|
||||
};
|
||||
|
||||
var renderResults = APP.renderResults = function (content, answers, showUser) { // XXX hackathon
|
||||
var $container = $('div.cp-form-creator-results').empty();
|
||||
|
||||
|
||||
if (!Object.keys(answers || {}).length) {
|
||||
$container.append(h('div.alert.alert-info', Messages.form_results_empty));
|
||||
return;
|
||||
|
|
@ -1939,6 +1996,11 @@ define([
|
|||
// https://chartscss.org/charts/column/
|
||||
// XXX hackathon set column colours with the cryptpad brand color in app-form.less
|
||||
|
||||
var heading = h('h2#cp-title', `Total answers count: ${Object.keys(answers).length}`);
|
||||
$(heading).appendTo($container);
|
||||
var timeline = h('div.cp-form-creator-results-timeline');
|
||||
var $timeline = $(timeline).appendTo($container);
|
||||
$timeline.append(makeTimeline(answers));
|
||||
var controls = h('div.cp-form-creator-results-controls');
|
||||
var $controls = $(controls).appendTo($container);
|
||||
var exportButton = h('button.btn.btn-secondary', Messages.form_exportCSV);
|
||||
|
|
@ -2073,6 +2135,7 @@ define([
|
|||
}
|
||||
return div;
|
||||
});
|
||||
|
||||
$results.append(els);
|
||||
});
|
||||
if (showUser) {
|
||||
|
|
@ -2736,64 +2799,6 @@ define([
|
|||
var $responseMsg = $(responseMsg);
|
||||
var refreshResponse = function () {
|
||||
if (true) { return; } // XXX 4.10.0
|
||||
$responseMsg.empty();
|
||||
Messages.form_updateMsg = "Update response message"; // XXX 4.10.0
|
||||
Messages.form_addMsg = "Add response message"; // XXX 4.10.0
|
||||
Messages.form_responseMsg = "Add a message that will be displayed in the response page."; // XXX 4.10.0
|
||||
var text = content.answers.msg ? Messages.form_updateMsg : Messages.form_addMsg;
|
||||
var btn = h('button.btn.btn-secondary', text);
|
||||
$(btn).click(function () {
|
||||
var editor;
|
||||
if (!APP.responseModal) {
|
||||
var t = h('textarea');
|
||||
var div = h('div', [
|
||||
h('p', Messages.form_responseMsg),
|
||||
t
|
||||
]);
|
||||
var cm = SFCodeMirror.create("gfm", CMeditor, t);
|
||||
editor = APP.responseEditor = cm.editor;
|
||||
editor.setOption('lineNumbers', true);
|
||||
editor.setOption('lineWrapping', true);
|
||||
editor.setOption('styleActiveLine', true);
|
||||
editor.setOption('readOnly', false);
|
||||
setTimeout(function () {
|
||||
editor.setValue(content.answers.msg || '');
|
||||
editor.refresh();
|
||||
editor.save();
|
||||
editor.focus();
|
||||
});
|
||||
|
||||
var buttons = [{
|
||||
className: 'primary',
|
||||
name: Messages.settings_save,
|
||||
onClick: function () {
|
||||
var v = editor.getValue();
|
||||
content.answers.msg = v.trim(0, 2000); // XXX 4.10.0 max length?
|
||||
framework.localChange();
|
||||
framework._.cpNfInner.chainpad.onSettle(function () {
|
||||
UI.log(Messages.saved);
|
||||
refreshResponse();
|
||||
});
|
||||
},
|
||||
//keys: []
|
||||
}, {
|
||||
className: 'cancel',
|
||||
name: Messages.cancel,
|
||||
onClick: function () {},
|
||||
keys: [27]
|
||||
}];
|
||||
APP.responseModal = UI.dialog.customModal(div, { buttons: buttons });
|
||||
} else {
|
||||
editor = APP.responseEditor;
|
||||
setTimeout(function () {
|
||||
editor.setValue(content.answers.msg || '');
|
||||
editor.refresh();
|
||||
editor.save();
|
||||
editor.focus();
|
||||
});
|
||||
}
|
||||
UI.openCustomModal(APP.responseModal);
|
||||
});
|
||||
// $responseMsg.append(btn); // XXX 4.10.0
|
||||
};
|
||||
//refreshResponse();
|
||||
|
|
|
|||
Loading…
Reference in New Issue