This is an automated email from the git hooks/post-receive script. New commit to branch feature/component_choice_editor in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 97d672264254223f706f1dfa4bea1871a7d8593d Author: Kevin Morin <morin@codelutin.com> Date: Thu Mar 9 16:42:57 2017 +0100 - enrgistrement des choix de type date, datetime et resource - affichage des choix de types resources --- pollen-ui-riot-js/package.json | 1 + pollen-ui-riot-js/src/main/web/js/FetchService.js | 7 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 85 +++++++++++++--------- .../src/main/web/js/ResourceService.js | 44 +++++++++++ .../main/web/tag/components/date-picker.tag.html | 4 +- .../main/web/tag/components/time-picker.tag.html | 43 ++++++----- .../src/main/web/tag/poll/Choice.tag.html | 75 ++++++++++--------- .../src/main/web/tag/poll/CreatePoll.tag.html | 2 +- .../src/main/web/tag/poll/Votes.tag.html | 18 +++-- 9 files changed, 173 insertions(+), 106 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index 6f91f7a..0009670 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -38,6 +38,7 @@ "blaze": "^3.2.0", "font-awesome": "4.7.0", "moment": "^2.17.1", + "remarkable": "^1.7.1", "riot": "^3.0.5", "riot-route": "^2.5.0" } diff --git a/pollen-ui-riot-js/src/main/web/js/FetchService.js b/pollen-ui-riot-js/src/main/web/js/FetchService.js index e2a1883..bf6495d 100644 --- a/pollen-ui-riot-js/src/main/web/js/FetchService.js +++ b/pollen-ui-riot-js/src/main/web/js/FetchService.js @@ -97,15 +97,18 @@ class FetchService { return this.fetch(url, "DELETE", null, body); } - form(url, data) { + form(url, data, doNotStringify) { let formData = null; + console.log(data); if (data) { formData = new FormData(); let keys = Object.keys(data); keys.forEach((key) => { let value = data[key]; - if (typeof value === "object") { + console.log(key); + console.log(value); + if (!doNotStringify && (typeof value === "object")) { formData.set(key, JSON.stringify(value)); } else { formData.set(key, value); diff --git a/pollen-ui-riot-js/src/main/web/js/PollForm.js b/pollen-ui-riot-js/src/main/web/js/PollForm.js index 3b4ea42..cc44013 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -32,7 +32,8 @@ class PollForm { "options", "voters" ]; - this.service = require("./PollService"); + this.pollService = require("./PollService"); + this.resourceService = require("./ResourceService"); this.FormHelper = require("./FormHelper"); this.step = -1; this.isInit = false; @@ -51,7 +52,7 @@ class PollForm { this.choiceType = choiceType; console.info("init form"); - return this.service.empty(this.choiceType).then((poll) => { + return this.pollService.empty(this.choiceType).then((poll) => { this.model = poll; console.info("empty poll"); console.info(this.model); @@ -69,45 +70,63 @@ class PollForm { this.model.participant = []; switch (this.choiceType) { - case "DATE": - this.model.choiceType = "DATE"; - this.choices = [ - new Choice(this.model.choiceType, "2017-01-31T13:45", "Requiem is so powerfull"), - new Choice(this.model.choiceType, "2017-02-01T03:45", "Truit is so nice"), - new Choice(this.model.choiceType, "2017-02-02", "So deep, so dark...") - ]; - break; - - case "IMAGE": - this.model.choiceType = "RESOURCE"; - break; - - default: // "TEXT" - this.model.choiceType = "TEXT"; - this.choices = [ - new Choice(this.model.choiceType, "Mozart", "Requiem is so powerfull"), - new Choice(this.model.choiceType, "Schubert", "Truit is so nice"), - new Choice(this.model.choiceType, "Malher", "So deep, so dark...") - ]; - break; + case "DATE": + this.model.choiceType = "DATE"; + this.choices = [ + new Choice(this.model.choiceType, "2017-01-31T13:45", "Requiem is so powerfull"), + new Choice(this.model.choiceType, "2017-02-01T03:45", "Truit is so nice"), + new Choice(this.model.choiceType, "2017-02-02", "So deep, so dark...") + ]; + break; + + case "IMAGE": + this.model.choiceType = "RESOURCE"; + break; + + default: // "TEXT" + this.model.choiceType = "TEXT"; + this.choices = [ + new Choice(this.model.choiceType, "Mozart", "Requiem is so powerfull"), + new Choice(this.model.choiceType, "Schubert", "Truit is so nice"), + new Choice(this.model.choiceType, "Malher", "So deep, so dark...") + ]; + break; } this.isInit = true; this.step = 0; }); } - create() { + create(success) { console.info("form before create"); console.info(this.form); - return this.service.create(this.model, this.choices).then((result) => { - console.info("Poll created"); - console.info(result); - this.model.id = result.id; - this.model.permission = result.permission; - }).catch((error) => { - console.error("Could not create poll"); - console.error(error); - return Promise.reject(error); + + // if the choice is of type resource, then upload the file and set its id as choice value + let fileUploadPromises = []; + this.choices.forEach((choice, index) => { + if (choice.choiceType === "RESOURCE") { + let promise = new Promise((resolve, reject) => { + this.resourceService.create(choice.choiceValue).then((result) => { + choice.choiceValue = result.id; + resolve(result.id); + }); + }); + fileUploadPromises.push(promise); + } + }); + Promise.all(fileUploadPromises).then(() => { + this.pollService.create(this.model, this.choices).then((result) => { + console.info("Poll created"); + console.info(result); + this.model.id = result.id; + this.model.permission = result.permission; + }) + .then(success) + .catch((error) => { + console.error("Could not create poll"); + console.error(error); + Promise.reject(error); + }); }); } diff --git a/pollen-ui-riot-js/src/main/web/js/ResourceService.js b/pollen-ui-riot-js/src/main/web/js/ResourceService.js new file mode 100644 index 0000000..767a3e3 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/js/ResourceService.js @@ -0,0 +1,44 @@ +/*- + * #%L + * Pollen :: UI (Riot Js) + * %% + * Copyright (C) 2009 - 2017 CodeLutin + * %% + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * #L% + */ +let singleton = require("./Singleton"); +let FetchService = require("./FetchService"); + +class ResourceService extends FetchService { + + create(resource) { + console.log(resource); + return this.form("/v1/resources", {resource: resource}, true); + } + + getResource(resourceId) { + return this.get("/v1/resources/" + resourceId); + } + + getPreview(resourceId) { + return this.get("/v1/resources/" + resourceId + "/preview"); + } + + delete(resourceId) { + return this.doDelete("/v1/resources/" + resourceId); + } +} + +module.exports = singleton(ResourceService); diff --git a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html index 7c2d35a..1bc357e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/date-picker.tag.html @@ -96,7 +96,7 @@ const d = this.moment(end).add(i - end.isoWeekday(), "days"); this.endBuffer.push(dayObj(d)); } - }; + }; this.on("mount", () => { if (!opts.date) { @@ -130,7 +130,7 @@ }); document.addEventListener("click", handleClickOutside); this.update(); - }); + }); this.on("unmount", () => { document.removeEventListener("click", handleClickOutside); diff --git a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html index 8c9f9d1..f1bcb63 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/time-picker.tag.html @@ -1,5 +1,5 @@ <time-picker> - <input type="time" class="calendar-field" onclick="{open}" value="{opts.time.time.format('HH:mm')}" readonly="{!session.timeInputSupported}" /> + <input type="time" class="calendar-field" onclick="{open}" value="{opts.time.time.format('LT')}" readonly="{!session.timeInputSupported}" /> <div class="c-calendar c-calendar--higher" if="{opts.time.isvisible && !session.timeInputSupported}"> @@ -20,12 +20,11 @@ </div> <script type="es6"> - let session = require("../../js/Session"); - + this.session = require("../../js/Session"); this.moment = require("moment"); - this.moment.locale(session.locale); + this.moment.locale(this.session.locale); - this.installBundle(session, "time-picker", locale => { + this.installBundle(this.session, "time-picker", locale => { this.opts.time.time.locale(locale); this.moment.locale(locale); }); @@ -48,52 +47,52 @@ }; this.on("mount", () => { - if (!opts.time) { - opts.time = {time: this.moment()}; + if (!this.opts.time) { + this.opts.time = {time: this.moment()}; } - if (!opts.time.time) { - opts.time.time = this.moment(); + if (!this.opts.time.time) { + this.opts.time.time = this.moment(); } - opts.time.time = toMoment(opts.time); + this.opts.time.time = toMoment(this.opts.time.time); document.addEventListener("click", handleClickOutside); - }); + }); this.on("unmount", () => { document.removeEventListener("click", handleClickOutside); }); this.open = () => { - opts.time.isvisible = true; + this.opts.time.isvisible = true; this.trigger("open"); }; this.close = () => { - if (opts.time.isvisible) { - opts.time.isvisible = false; + if (this.opts.time.isvisible) { + this.opts.time.isvisible = false; this.trigger("close"); } }; this.select = e => { - opts.time.time = e.item.day.date; - this.trigger('select', opts.time.time); + this.opts.time.time = e.item.day.date; + this.trigger("select", this.opts.time.time); }; this.prevHour = () => { - opts.time.time = opts.time.time.subtract(1, "hour"); + this.opts.time.time = this.opts.time.time.subtract(1, "hour"); }; this.nextHour = () => { - opts.time.time = opts.time.time.add(1, "hour"); + this.opts.time.time = this.opts.time.time.add(1, "hour"); }; this.prevMinute = () => { - opts.time.time = opts.time.time.subtract(1, "minute"); + this.opts.time.time = this.opts.time.time.subtract(1, "minute"); }; this.nextMinute = () => { - opts.time.time = opts.time.time.add(1, "minute"); + this.opts.time.time = this.opts.time.time.add(1, "minute"); }; function getWindowDimensions() { @@ -104,7 +103,7 @@ x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight || e.clientHeight || g.clientHeight; return { width: x, height: y }; - }; + } const positionDropdown = () => { const w = getWindowDimensions(); @@ -112,7 +111,7 @@ if (!m) { return; } - if (!opts.time.isvisible) { + if (!this.opts.time.isvisible) { // Reset position m.style.marginTop = ""; m.style.marginLeft = ""; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html index 22a40b1..557f302 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html @@ -3,16 +3,16 @@ require("../components/time-picker.tag.html"); <Choice> <div class="choice-container"> <button type="button" class="c-button fa fa-pencil" alt="texte" onclick="{setTextType}"/> - <input type="text" ref="choiceText" class="{choiceType === 'TEXT' ? 'selected' : 'hidden'}" value="{choiceType === 'TEXT' ? choice.choiceValue : null}"/> + <input type="text" ref="choiceText" class="{choice.choiceType === 'TEXT' ? 'selected' : 'hidden'}" value="{choice.choiceType === 'TEXT' ? choice.choiceValue : null}"/> - <button type="button" class="c-button fa fa-image" alt="image" onclick="{setImageType}"/> - <input type="file" ref="choiceImage" class="{choiceType === 'RESOURCE' ? 'selected' : 'hidden'}"/> + <button type="button" class="c-button fa fa-image" alt="resource" onclick="{setImageType}"/> + <input type="file" ref="choiceResource" class="{choice.choiceType === 'RESOURCE' ? 'selected' : 'hidden'}"/> <button type="button" class="c-button fa fa-calendar" alt="date" onclick="{setDateType}"/> - <date-picker ref="choiceDate" class="{choiceType.startsWith('DATE') ? 'selected' : 'hidden'}" date="{date}"/> + <date-picker ref="choiceDate" class="{choice.choiceType.startsWith('DATE') ? 'selected' : 'hidden'}" date="{date}"/> - <button type="button" class="c-button fa fa-clock-o {!choiceType.startsWith('DATE') ? 'hidden' : ''}" alt="heure" onclick="{toggleTime}"/> - <time-picker ref="choiceTime" class="{choiceType === 'DATETIME' ? 'selected' : 'hidden'}" time="{time}"/> + <button type="button" class="c-button fa fa-clock-o {!choice.choiceType.startsWith('DATE') ? 'hidden' : ''}" alt="heure" onclick="{toggleTime}"/> + <time-picker ref="choiceTime" class="{choice.choiceType === 'DATETIME' ? 'selected' : 'hidden'}" time="{time}"/> <input type="hidden" ref="description" value="{choice.description}"/> </div> @@ -31,32 +31,24 @@ require("../components/time-picker.tag.html"); this.mode = this.opts.mode; this.edit = this.opts.mode === "create" || this.opts.mode === "edit"; - if (this.opts.choiceType) { - this.choiceType = this.opts.choiceType; - } else { - this.choiceType = "TEXT"; - } Object.assign(this.choice = {}, this.opts.choice); - if (this.choiceType === "DATE") { - this.date = { - date: moment(this.opts.choice.choiceValue) - }; - this.time = { - time: moment() - }; - } else if (this.choiceType === "DATETIME") { - this.time = { - time: moment(this.opts.choice.choiceValue) - }; + if (this.choice.choiceType.startsWith("DATE")) { this.date = { - date: moment() + date: moment(parseInt(this.opts.choice.choiceValue, 10)) }; } else { this.date = { - date: moment() + date: moment().startOf('day') + }; + } + + if (this.choice.choiceType === "DATETIME") { + this.time = { + time: moment(parseInt(this.opts.choice.choiceValue, 10)) }; + } else { this.time = { - time: moment() + time: moment().startOf('day') }; } @@ -70,37 +62,44 @@ require("../components/time-picker.tag.html"); }); this.setTextType = () => { - this.choiceType = "TEXT"; + this.choice.choiceType = "TEXT"; }; this.setImageType = () => { - this.choiceType = "RESOURCE"; + this.choice.choiceType = "RESOURCE"; }; this.setDateType = () => { - if (!this.choiceType.startsWith("DATE")) { - this.choiceType = "DATE"; + if (!this.choice.choiceType.startsWith("DATE")) { + this.choice.choiceType = "DATE"; } }; this.toggleTime = () => { - if (this.choiceType === "DATE") { - this.choiceType = "DATETIME"; - } else if (this.choiceType === "DATETIME") { - this.choiceType = "DATE"; + if (this.choice.choiceType === "DATE") { + this.choice.choiceType = "DATETIME"; + } else if (this.choice.choiceType === "DATETIME") { + this.choice.choiceType = "DATE"; } }; this.getValue = () => { let choiceValue = {}; - if (this.choiceType === "TEXT") { - console.log("TEXT"); + if (this.choice.choiceType === "RESOURCE") { + choiceValue = this.refs.choiceResource.files[0]; + + } else if (this.choice.choiceType.startsWith("DATE")) { + let selectedMoment = this.date.date; + if (this.choice.choiceType === "DATETIME") { + selectedMoment.set({hour: this.time.time.hour(), minute: this.time.time.minute()}); + } + choiceValue = selectedMoment.valueOf(); + + } else { choiceValue = this.refs.choiceText.value; - } else if (this.choiceType.startsWith("DATE")) { - choiceValue = this.refs.choiceDate.value; } console.log(choiceValue); - return new Choice(this.choiceType, choiceValue, this.refs.description.value, this.choice.id); + return new Choice(this.choice.choiceType, choiceValue, this.refs.description.value, this.choice.id); }; /*this.onEditChoice = () => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html index ed425f7..b3ce776 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html @@ -106,7 +106,7 @@ require("./Created.tag.html"); if (this.form.step !== this.form.steps.length - 1) { this.form.nextStep(); } else { - this.form.create().then(() => { + this.form.create(() => { let route = require("riot-route"); route("poll/" + this.form.model.id + "/" + this.form.model.permission); }); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index 5d10108..00afda4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -14,8 +14,7 @@ <tr> <th></th> <th each="{choice in choices}"> - <div class="{choice.choiceType==='DATE'?'choiceDate':''}"> - {choice.choiceValueStr} + <div id="{choice.id}" class="{choice.choiceType==='DATE'?'choiceDate':''}"> </div> </th> </tr> @@ -91,6 +90,9 @@ this.voteId = null; this.loaded = false; let moment = require("moment"); + let session = require("../../js/Session"); + let Remarkable = require('remarkable'); + this.md = new Remarkable(); this.i18nCallback = (locale) => { moment.locale(locale); @@ -107,18 +109,18 @@ this.update({votePeriod: this.votePeriod}); this.choices.forEach(c => { if (c.choiceType === "DATE") { - if (c.choiceValue.indexOf("T") > -1) { - c.choiceValueStr = moment(c.choiceValue).format("LLL"); - } else { - c.choiceValueStr = moment(c.choiceValue).format("LL"); - } + c.choiceValueStr = moment(parseInt(c.choiceValue, 10)).format("LL"); + } else if (c.choiceType === "DATETIME") { + c.choiceValueStr = moment(parseInt(c.choiceValue, 10)).format("LLL"); + } else if (c.choiceType === "RESOURCE") { + c.choiceValueStr = "![](" + session.configuration.endPoint + "/v1/resources/" + c.choiceValue + "/preview)"; } else { c.choiceValueStr = c.choiceValue; } + document.getElementById(c.id).innerHTML = this.md.render(c.choiceValueStr); }); }; - let session = require("../../js/Session"); this.installBundle(session, "poll_votes", this.i18nCallback); let voteService = require("../../js/VoteService"); let choiceService = require("../../js/ChoiceService"); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.