This is an automated email from the git hooks/post-receive script. New commit to branch feature/72_poll_creation_confirmation in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 881ffdc3d9a3f6038b2fd618c13647cd9df19cdd Author: Kevin Morin <morin@codelutin.com> Date: Mon Jun 19 16:34:27 2017 +0200 refs #72 creation de la page de résumé --- pollen-ui-riot-js/src/main/web/i18n.json | 32 +++++ pollen-ui-riot-js/src/main/web/js/Poll.js | 6 + pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 4 + .../src/main/web/tag/poll/ChoiceView.tag.html | 11 +- .../src/main/web/tag/poll/Description.tag.html | 15 +- .../src/main/web/tag/poll/Podium.tag.html | 6 +- .../src/main/web/tag/poll/Results.tag.html | 2 +- .../src/main/web/tag/poll/Summary.tag.html | 159 +++++++++++++++++++++ .../src/main/web/tag/poll/Votes.tag.html | 2 +- .../src/main/web/tag/popup/QrCodeButton.tag.html | 1 + 10 files changed, 227 insertions(+), 11 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 789c6a4b..5f07ea76 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -15,6 +15,22 @@ "main_favoriteLists" : "Listes de favoris", "pagination_all": "Tous", "pagination_resultsPerPage": "Résultats par page", + "summary_choices": "Choix", + "summary_voteCountingType": "Type de sondage", + "summary_dates": "Dates", + "summary_addingChoices": "Ajout de choix", + "summary_voting": "Ouvert", + "summary_fromDate": "à partir du", + "summary_toDate": "jusqu'au", + "summary_admin": "Administration du sondage", + "summary_admininistrateNow": "Vous voulez modifier le sondage ? Cliquez sur le bouton suivant :", + "summary_editPoll": "Modifier le sondage", + "summary_urlForAdmin" : "Enregistrez l'adresse suivante pour administrer ce sondage ultérieurement", + "summary_urlForVote" : "Invitez de nouveaux participants en leur envoyant cette adresse", + "summary_sharing": "Partage", + "summary_invitations": "Nombre d'invitations à voter envoyées par email:", + "summary_voteNow": "Cliquez sur le bouton suivant pour voter :", + "summary_vote": "Voter", "poll_403": "Erreur : le sondage n'est pas accessible", "poll_closePoll": "Clôturer le sondage", "poll_reopenPoll": "Réouvrir le sondage", @@ -474,6 +490,22 @@ "main_favoriteLists" : "List of favorites", "pagination_all": "All", "pagination_resultsPerPage": "Results per page", + "summary_choices": "Choices", + "summary_voteCountingType": "Poll type", + "summary_dates": "Dates", + "summary_addingChoices": "Choice adding", + "summary_voting": "Open", + "summary_fromDate": "from", + "summary_toDate": "to", + "summary_admin": "Poll administration", + "summary_admininistrateNow": "You want to edit the poll? Click on the following button to do so:", + "summary_editPoll": "Edit the poll", + "summary_urlForAdmin" : "Save the following address to administrate the poll later", + "summary_urlForVote" : "Invite new participants with this address", + "summary_sharing": "Sharing", + "summary_invitations": "Number of invitations to vote sent by email:", + "summary_voteNow": "Click on the following button to vote:", + "summary_vote": "Vote", "poll_403": "Error : the poll is not available", "poll_choices": "Choices", "poll_votes": "Votes", diff --git a/pollen-ui-riot-js/src/main/web/js/Poll.js b/pollen-ui-riot-js/src/main/web/js/Poll.js index 41f6d4a5..c85ce33b 100644 --- a/pollen-ui-riot-js/src/main/web/js/Poll.js +++ b/pollen-ui-riot-js/src/main/web/js/Poll.js @@ -391,6 +391,12 @@ class Poll { return service.ignoreReport(this.id, target.id, report.id, this.permission || ""); } return Promise.reject("Init poll after ignore report"); + + loadVoteCountingType() { + voteCountingTypeService.getVoteCountingType(this.voteCountingType).then((voteCountingTypeValue) => { + this.voteCountingTypeValue = voteCountingTypeValue; + bus.trigger("poll", this); + }); } } diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index cbc3da8f..ed5d35f6 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -28,6 +28,7 @@ require("./SignCheck.tag.html"); require("./Home.tag.html"); require("./poll/EditPoll.tag.html"); require("./poll/Poll.tag.html"); +require("./poll/Summary.tag.html"); require("./poll/Polls.tag.html"); require("./Users.tag.html"); require("./UserProfile.tag.html"); @@ -155,6 +156,9 @@ require("./popup/InformationPopup.tag.html"); route("/poll/*/vote/*", (pollId, permission) => { riot.mount(this.refs.content, "poll", {pollId: pollId, tabName: "votes", permission: permission}); }); + route("/poll/*/summary/*", (pollId, permission) => { + riot.mount(this.refs.content, "summary", {pollId: pollId, permission: permission}); + }); route("/poll/*/vote/*/*", (pollId, voteId, permission) => { riot.mount(this.refs.content, "poll", {pollId: pollId, tabName: "votes", voteId: voteId, permission: permission}); }); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index b08d405d..c04378a9 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -1,6 +1,7 @@ require("./Report.tag.html"); <ChoiceView> - <div class="choice-view {with-info : opts.choice.choiceType === 'RESOURCE' || opts.choice.description}" + <div class="choice-view {center-choice : opts.center} + {with-info : opts.choice.choiceType === 'RESOURCE' || opts.choice.description && !opts.showdescription}" onclick={openModalImage} title={opts.choice.description}> <span class="choice-text" @@ -23,9 +24,10 @@ require("./Report.tag.html"); if={opts.choice.choiceType === "RESOURCE" && meta && !isImage(meta)}> {meta.name} </div> - <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description} class="info-label"> + <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description && !opts.showdescription} class="info-label"> <i class="fa fa-question-circle" aria-hidden="true"></i> </div> + <span if="{opts.choice.description && opts.showdescription}"> : <em>{opts.choice.description}</em></span> </div> <Report target={opts.choice}/> @@ -85,7 +87,7 @@ require("./Report.tag.html"); }; this.openModalImage = () => { - if (this.opts.choice.description || this.opts.choice.choiceType === "RESOURCE") { + if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { this.showModalImage = true; } }; @@ -113,6 +115,9 @@ require("./Report.tag.html"); .choice-view { flex-grow: 1; display: flex; + } + + .center-choice { justify-content: center; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html index 470617b4..c71b2f23 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html @@ -28,7 +28,15 @@ name="title" value="{form.model.title}" disabled={opts.form.model.isClosed} - placeholder="{__.titlePlaceHolder}"> + placeholder="{__.titlePlaceHolder}"/> + </div> + <div class="o-form-element"> + <label class="c-label" for="description">{__.description}</label> + <textarea ref="description" + class="c-field" + name="description" + disabled={opts.form.model.isClosed} + placeholder="{__.descriptionPlaceHolder}">{form.model.description}</textarea> </div> <div class="o-form-element"> <label class="c-label" for="name">{__.name}</label> @@ -39,7 +47,7 @@ name="name" value="{form.model.creatorName}" disabled={opts.form.model.isClosed} - placeholder="{__.namePlaceHolder}"> + placeholder="{__.namePlaceHolder}"/> </div> <div class="o-form-element"> <label class="c-label" for="email">{__.email}</label> @@ -49,7 +57,7 @@ name="email" value="{form.model.creatorEmail}" disabled={opts.form.model.isClosed} - placeholder="{__.emailPlaceHolder}"> + placeholder="{__.emailPlaceHolder}"/> </div> <script type="es6"> @@ -58,6 +66,7 @@ this.form = this.opts.form; this.submit = () => { this.form.model.title = this.refs.title.value; + this.form.model.description = this.refs.description.value; this.form.model.creatorName = this.refs.name.value; this.form.model.creatorEmail = this.refs.email.value; }; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html index adcb2d98..939041ee 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Podium.tag.html @@ -4,19 +4,19 @@ require("./ChoiceView.tag.html"); <div if={podium.step2} each={choice in podium.step2} class="podium-step second-step"> <div class="step-score colors-main-invers">2</div> <div class="choice"> - <ChoiceView choice={choice}/> + <ChoiceView choice={choice} center="true"/> </div> </div> <div if={podium.step1} each={choice in podium.step1} class="podium-step first-step"> <div class="step-score colors-main-invers">1</div> <div class="choice"> - <ChoiceView choice={choice}/> + <ChoiceView choice={choice} center="true"/> </div> </div> <div if={podium.step3} each={choice in podium.step3} class="podium-step third-step"> <div class="step-score colors-main-invers">3</div> <div class="choice"> - <ChoiceView choice={choice}/> + <ChoiceView choice={choice} center="true"/> </div> </div> </div> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html index 7ae30b60..7788d11c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html @@ -21,7 +21,7 @@ require("./Podium.tag.html"); <td class="score separator-top">{result.scoreOrder + 1}</td> <td class="votes separator-top">{result.scoreValue} {parent.__["unit_" + poll.voteCountingType + "_" + (result.scoreValue > 1 ? "many" : "one")]}</td> <td class="choice separator-top"> - <ChoiceView choice={poll.getChoice(result.choiceId)}/> + <ChoiceView choice={poll.getChoice(result.choiceId)} center="true"/> </td> </tr> </tbody> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html new file mode 100644 index 00000000..be2481b1 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Summary.tag.html @@ -0,0 +1,159 @@ +require("./Choices.tag.html"); +require("./Settings.tag.html"); +require("../popup/QrCodeButton.tag.html"); + +<Summary> + + <div class="container"> + + <div class="poll-info"> + <h2> + {poll.title} + </h2> + + <p><em>{poll.description}</em></p> + + <div if="{poll.voteCountingTypeValue}"> + {__.voteCountingType} : + <strong>{poll.voteCountingTypeValue.name}</strong> (<em>{poll.voteCountingTypeValue.helper}</em>) + </div> + </div> + + <div> + <h3>{__.choices}</h3> + <div each={choice, index in poll.choices} class="{odd-row: index % 2 > 0}"> + <ChoiceView choice={choice} showdescription="true"/> + </div> + </div> + + <div> + <h3>{__.dates}</h3> + <div if={poll.choiceAddAllowed}> + {__.addingChoices} + <span if={poll.beginChoiceDate}>{__.fromDate} <strong>{formatDate(poll.beginChoiceDate)}</strong></span> + <span if={poll.endChoiceDate}> {__.toDate} <strong>{formatDate(poll.endChoiceDate)}</strong></span> + </div> + <div> + {__.voting} + {__.fromDate} <strong>{formatDate(poll.beginDate)}</strong> + <span if={poll.endDate}> {__.toDate} <strong>{formatDate(poll.endDate)}</strong></span> + </div> + </div> + + <div> + <h3>{__.admin}</h3> + <p> + {__.admininistrateNow} + <a href="{window.location.origin}{window.location.pathname}#poll/{poll.id}/edit/{poll.permission}" class="c-button c-button--info"> + {__.editPoll} + </a> + </p> + <div> + <label class="c-label" for="urlForAdmin">{__.urlForAdmin}</label> + <div class="c-input-group u-small"> + <div class="o-field"> + <input class="c-field" + id="urlForAdmin" + ref="urlForAdmin" + type="text" + readonly="true" + value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote/{poll.permission}"> + </div> + <button class="c-button c-button--info" + onclick={copyUrl("urlForAdmin")}> + <i class="fa fa-clipboard" aria-hidden="true"></i> + </button> + </div> + </div> + </div> + + <div> + <h3>{__.sharing}</h3> + + <div if={poll.participants}> + {__.invitations} <strong>{poll.participants.length}</strong> + </div> + <div> + <QrCodeButton if={poll.pollType === "FREE"} value="{voteUrl}"/> + <a href="mailto:?subject={poll.title}&body={poll.title}%0D%0A{poll.description}%0D%0A{voteUrl}" class="c-button c-button--info"> + <i class="fa fa-paper-plane"></i> + </a> + </div> + + <div if={poll.pollType === "FREE"}> + <label class="c-label" for="urlForVote">{__.urlForVote}</label> + <div class="c-input-group u-small"> + <div class="o-field"> + <input class="c-field" + id="urlForVote" + ref="urlForVote" + type="text" + readonly="true" + value="{voteUrl}"> + </div> + <button class="c-button c-button--info" + onclick={copyUrl("urlForVote")}> + <i class="fa fa-clipboard" aria-hidden="true"></i> + </button> + </div> + </div> + + <div> + {__.voteNow} + <a href="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote/{poll.permission}" class="c-button c-button--info">{__.vote}</a> + </div> + + </div> + + </div> + + </div> + + <script type="es6"> + this.session = require("../../js/Session"); + let Error = require("../../js/Error"); + let route = require("riot-route"); + this.installBundle(this.session, "summary"); + + this.selectedTab = this.opts.tabName || "votes"; + + this.showVoteCountingTypeHelper = false; + this.voteUrl; + + this.poll = require("../../js/Poll"); + this.onPollChange = poll => { + this.poll = poll; + this.voteUrl = window.location.origin + window.location.pathname + "#poll/" + this.poll.id + "/vote"; + this.update(); + this.bus.trigger("pageChanged", poll.title); + }; + + this.listen("poll", this.onPollChange); + this.poll.init(this.opts.pollId, this.opts.voteId, this.opts.permission).catch((error) => { + this.bus.trigger("error", new Error(this._l(error.status))); + route("/"); + }).then(() => { + this.poll.loadChoices(); + this.poll.loadVoteCountingType(); + }); + + this.copyUrl = (refInputUrl) => () => { + this.refs[refInputUrl].select(); + document.execCommand("copy"); + }; + + </script> + + <style> + + .container > div { + margin-bottom: 20px; + line-height: 25px; + } + + .odd-row { + background-color: #eee; + } + + </style> +</Summary> 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 e6023f3e..507aec83 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 @@ -30,7 +30,7 @@ require("./Podium.tag.html"); </div> <div each={choice in poll.choices} class="choice separator-top"> <div class="choice-value"> - <ChoiceView choice={choice}/> + <ChoiceView choice={choice} center="true"/> </div> <div class="current-choice" if={poll.canVote}> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html index 132c133b..2069818f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html @@ -45,6 +45,7 @@ require("../QrCode.tag.html"); .o-modal .c-card .c-card__body { display: flex; + text-align: center; flex-direction: column; align-items: stretch; align-content: stretch; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.