This is an automated email from the git hooks/post-receive script. New commit to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 3a579a09b1310f16ba4223e905dfe5e1b4ec1278 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Feb 1 16:21:23 2017 +0100 amélioration rendu choix de date --- pollen-ui-riot-js/src/main/web/js/PollForm.js | 4 +- .../src/main/web/tag/poll/PollChoiceDate.tag | 87 ++++++++++++++++++++-- .../src/main/web/tag/poll/PollChoices.tag | 8 +- .../src/main/web/tag/poll/PollVotes.tag | 24 ++++-- 4 files changed, 107 insertions(+), 16 deletions(-) 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 3b0b8e5..6644259 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -71,8 +71,8 @@ class PollForm { case 'date': this.model.choiceType = 'DATE'; this.choices = [ - new Choice(this.model.choiceType, "2017-01-31", "Requiem is so powerfull"), - new Choice(this.model.choiceType, "2017-02-01", "Truit is so nice"), + 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; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag index ddfa367..69e5137 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag @@ -45,9 +45,20 @@ <div class="choice-container-child"> <input type="hidden" name="id{number}" value="{choice.id}"> <div class="choice-inputs"> - <input type="date" ref="choice" name="choice{number}" value="{choice.choiceValue}" - disabled="{edit && !editing && choice.choiceValue?'disabled':''}" - class="choice-wide {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + <div class="choice-wide choice-date"> + <input type="hidden" ref="choice" name="choice{number}" id="choice{number}" + value="{choice.choiceValue}"> + <input type="date" ref="date" name="date{number}" id="date{number}" + value="{choice.date}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}" + class="choice-wide {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + <i class="fa fa-clock-o fa-15x"/> + <input type="checkbox" ref="timed" checked="{timed?'checked':''}" onclick="{toggleTimed}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}"> + <input type="time" ref="time" name="time{number}" id="time{number}" value="{choice.time}" + disabled="{edit && !editing && choice.time || !timed?'disabled':''}" + required="{timed?'required':''}"> + </div> <input type="text" ref="description" name="description{number}" value="{choice.description}" disabled="{edit && !editing && choice.choiceValue?'disabled':''}" class="choice-wider {edit && !editing && choice.choiceValue?'choice-disabled':''}"> @@ -62,6 +73,30 @@ this.mode = opts.mode; this.edit = opts.mode == 'add' || opts.mode == 'edit'; this.choice = opts.choice; + + opts.emitter.on('prepareSave', () => { + let choiceValue = this.refs.date.value; + if (choiceValue && this.timed && this.refs.time.value) { + choiceValue += 'T' + this.refs.time.value; + } + this.refs.choice.value = choiceValue; + }); + + let choiceValue = this.choice.choiceValue; + if (choiceValue) { + let index = choiceValue.indexOf('T'); + if (index == -1) { + this.choice.date = choiceValue; + this.timed = false; + } else { + this.choice.date = choiceValue.substring(0, index); + this.choice.time = choiceValue.substring(index + 1); + this.timed = true; + } + console.info('init choice: (' + this.timed + ')'); + console.info(this.choice); + } + this.on('mount', () => { if (this.number == 0 || this.edit) { this.refs.choice.required = "required"; @@ -71,9 +106,21 @@ } }); + this.toggleTimed = () => { + this.timed = !this.timed; + }; + this.prepareSave = () => { + let date = this.refs.choice.value; + let time = this.refs.time.value; + let choiceValue = date; + if (this.timed) { + choiceValue += 'T' + time; + } this.$choice = { - choiceValue: this.refs.choice.value, + date: date, + time: time, + choiceValue: choiceValue, description: this.refs.description.value }; }; @@ -94,7 +141,9 @@ ref.classList.add("choice-view"); Object.assign(this.choice, this.$choice); console.info(this.choice); - this.refs.choice.value = this.choice.choiceValue; + this.refs.choice.value = this.choice.date; + this.refs.time.value = this.choice.time; + this.timed = !!this.choice.time; this.refs.description.value = this.choice.description; } @@ -112,6 +161,10 @@ <style> + .fa-15x { + font-size: 1.5em; + } + .icon { border-style: none; background-color: white; @@ -156,8 +209,15 @@ .choice-inputs { display: flex; flex-direction: row; - justify-content: flex-start; - align-items: center; + } + + .choice-date { + display: flex; + flex-direction: row; + } + + .choice-date > i { + padding-top: 5px; } .choice-disabled { @@ -172,5 +232,18 @@ border: 2px solid white; } + input[type=date] { + width: 165px; + /*margin-right: 10px;*/ + } + + input[type=time] { + width: 130px; + } + + input[type=checkbox] { + width: 20px; + } + </style> </PollChoiceDate> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag index 0d66ab0..5980894 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag @@ -27,7 +27,7 @@ require('./PollChoiceDate.tag'); this.form.model = opts.poll; this.form.choiceType = (opts.poll.choiceType || 'text').toLowerCase(); this.form.mode = 'view'; - if (opts.poll.choiceAddAllowed && opts.poll.status == 'ADDING_CHOICES') { + if (opts.poll.choiceAddAllowed && opts.poll.status === 'ADDING_CHOICES') { // can add choices @@ -145,7 +145,8 @@ require('./PollChoiceDate.tag'); number: choiceNumber, choice: this.form.choices[choiceNumber] || {choiceValue: '', description: ''}, mode: this.form.mode, - session: this.session + session: this.session, + emitter:this })[0]; this.choiceTags[choiceNumber] = tag; @@ -222,6 +223,9 @@ require('./PollChoiceDate.tag'); this.action = (e) => { e.preventDefault(); e.stopPropagation(); + + this.trigger('prepareSave'); + if (this.form.mode == 'create') { this.form.fromDomToChoices(this.formDom); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag index 2684fc3..40c754e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag @@ -14,7 +14,9 @@ <tr> <th></th> <th each="{choice in choices}"> - {choice.choiceValue} + <div class="{choice.choiceType==='DATE'?'choiceDate':''}"> + {choice.choiceValueStr} + </div> </th> </tr> </thead> @@ -89,7 +91,6 @@ this.voteId = null; this.loaded = false; - this.i18nCallback = (locale) => { moment.locale(locale); this.votePeriod = ''; @@ -103,6 +104,17 @@ this.votePeriod = '( ' + this.votePeriod + ' )'; } 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'); + } + } else { + c.choiceValueStr =c.choiceValue; + } + }); }; let session = require("../../js/Session"); @@ -115,11 +127,8 @@ this.permission = opts.permission; this.poll = opts.poll; - - this.i18nCallback(); this.voting = this.poll.status === 'VOTING' || this.poll.status === 'CLOSED'; - this.votes = []; this.choices = []; @@ -296,12 +305,17 @@ console.info("get choices"); console.info(result); this.choices = result; + + this.i18nCallback(); this.refresh(); }); </script> <style> + .choiceDate { + width: 240px; + } .fa-15x { font-size: 1.5em; } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.