From 11dc7d12d58ba4ee705d06f80c196766ce311255 Mon Sep 17 00:00:00 2001
From: aemi-dev <42325924+aemi-dev@users.noreply.github.com>
Date: Thu, 5 Aug 2021 01:57:48 +0200
Subject: [PATCH] Hackathon 2021 - Timeline
---
www/form/app-form.less | 39 +++++++++++++
www/form/inner.js | 121 +++++++++++++++++++++--------------------
2 files changed, 102 insertions(+), 58 deletions(-)
diff --git a/www/form/app-form.less b/www/form/app-form.less
index ad26863bb..b4dd9d1a2 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -68,6 +68,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;
}
diff --git a/www/form/inner.js b/www/form/inner.js
index 02033885e..60303f3bd 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -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,
@@ -1826,10 +1828,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;
@@ -1845,6 +1902,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);
@@ -1979,6 +2041,7 @@ define([
}
return div;
});
+
$results.append(els);
});
if (showUser) {
@@ -2642,64 +2705,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();