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 ea74725be09823ead90c91e8c2afe215399d1a5d Author: Tony CHEMIT <dev@tchemit.fr> Date: Tue Jan 17 08:56:56 2017 +0100 Use a package for poll tags + continue ui --- pollen-ui-riot-js/package.json | 4 +- pollen-ui-riot-js/src/main/web/css/main.css | 4 + pollen-ui-riot-js/src/main/web/i18n.json | 16 ++ pollen-ui-riot-js/src/main/web/js/AuthService.js | 4 + pollen-ui-riot-js/src/main/web/js/I18nHelper.js | 2 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 20 +- pollen-ui-riot-js/src/main/web/js/Session.js | 18 +- pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag | 51 ---- .../src/main/web/tag/CreatePollHeader.tag | 61 ---- pollen-ui-riot-js/src/main/web/tag/Home.tag | 25 +- .../src/main/web/tag/PollSettings.tag | 35 --- pollen-ui-riot-js/src/main/web/tag/Pollen.tag | 17 +- .../src/main/web/tag/poll/CreatePoll.tag | 92 ++++++ .../src/main/web/tag/{ => poll}/PollChoiceText.tag | 0 .../web/tag/{ => poll}/PollChoiceTextGroup.tag | 0 .../main/web/tag/{ => poll}/PollChoicesDate.tag | 12 +- .../main/web/tag/{ => poll}/PollChoicesImage.tag | 12 +- .../main/web/tag/{ => poll}/PollChoicesText.tag | 44 ++- .../main/web/tag/{ => poll}/PollDescription.tag | 19 +- .../src/main/web/tag/poll/PollSettings.tag | 314 +++++++++++++++++++++ .../src/main/web/tag/{ => poll}/PollVoters.tag | 12 +- pollen-ui-riot-js/webpack.config.js | 5 + 22 files changed, 532 insertions(+), 235 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index e4e68f6..359a232 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -33,8 +33,8 @@ "fsevents": "^1.0.17" }, "dependencies": { + "font-awesome": "4.6.3", "riot": "^3.0.5", - "riot-route": "^2.5.0", - "font-awesome": "4.6.3" + "riot-route": "^2.5.0" } } diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index f9fad08..5047d82 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -37,6 +37,10 @@ margin-bottom: 30px; } +a.mainColorBackground, input.mainColorBackground { + background-color: #13a2ff; +} + a { text-decoration: none; color: #13a2ff; diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 702e428..f54d573 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -53,6 +53,14 @@ "home_createTextPoll": "Créer un sondage de type text", "home_createImagePoll": "Créer un sondage de type image", "home_createDatePoll": "Créer un sondage de type date", + "poll_settings_basic_usage":"Pour un sondage simple, vous pouvez passer cette étape.", + "poll_settings_previous":"Précédent", + "poll_settings_next":"Continuer", + "poll_settings_skip":"Passer", + "poll_header_general":"Description", + "poll_header_choices":"Choix", + "poll_header_options":"Options", + "poll_header_voters":"Participants", "": "" }, "en": { @@ -109,6 +117,14 @@ "home_createTextPoll": "Create a text poll", "home_createImagePoll": "Create a image poll", "home_createDatePoll": "Create a date poll", + "poll_settings_basic_usage":"For a basic poll, you can skip this step.", + "poll_settings_previous":"Previous", + "poll_settings_next":"Continue", + "poll_settings_skip":"Skip", + "poll_header_general":"General", + "poll_header_choices":"Choices", + "poll_header_options":"Options", + "poll_header_voters":"Voters", "": "" } } \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/js/AuthService.js b/pollen-ui-riot-js/src/main/web/js/AuthService.js index 683e499..1aca463 100644 --- a/pollen-ui-riot-js/src/main/web/js/AuthService.js +++ b/pollen-ui-riot-js/src/main/web/js/AuthService.js @@ -30,6 +30,10 @@ class AuthService extends FetchService { return this.get("/v1/users/" + auth.id); } + connectedUserPromise() { + return this.get("/v1/users/connected"); + } + validateEmail(userId, token) { return this.put("/v1/users/" + userId + "?token=" + token); } diff --git a/pollen-ui-riot-js/src/main/web/js/I18nHelper.js b/pollen-ui-riot-js/src/main/web/js/I18nHelper.js index d91991b..376f117 100644 --- a/pollen-ui-riot-js/src/main/web/js/I18nHelper.js +++ b/pollen-ui-riot-js/src/main/web/js/I18nHelper.js @@ -25,7 +25,7 @@ module.exports = { let realKey = key.substring(value.length + 1); this.__[realKey] = bundle[key]; - console.info(realKey + " -> " + this.__[realKey]); + console.debug(realKey + " -> " + this.__[realKey]); } }); }, 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 0613862..630c8bd 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -1,24 +1,28 @@ let singleton = require("./Singleton"); let ChoiceText = require('./ChoiceText'); +let route = require("riot-route"); class PollForm { constructor() { - riot.observable(this); this.step = 0; + this.type = null; this.model = null; } previousStep() { - this._setStep(this.step - 1); + + console.info("prevousStep:: "+this.step); + this.setStep(this.step - 1); } nextStep() { - this._setStep(this.step + 1); + this.setStep(this.step + 1); } init(user) { console.info("init form"); + this.step = 0; this.model = { title: "Mon premier sondage", description: "", @@ -35,10 +39,6 @@ class PollForm { } } - onStepChanged(fn) { - this.on("stepChanged", fn); - } - fromTextChoices(form) { let choices = []; @@ -66,10 +66,10 @@ class PollForm { this.model.textChoices = choices; } - _setStep(step) { - console.info("set step:: " + step); + setStep(step) { + console.info("setStep:: " + step); this.step = step; - this.trigger("stepChanged", step); + route("poll/new/" + this.type + "/" + step, null, true); } } diff --git a/pollen-ui-riot-js/src/main/web/js/Session.js b/pollen-ui-riot-js/src/main/web/js/Session.js index 2b25621..6ae934f 100644 --- a/pollen-ui-riot-js/src/main/web/js/Session.js +++ b/pollen-ui-riot-js/src/main/web/js/Session.js @@ -26,6 +26,22 @@ class Session { return document.cookie.indexOf("pollen-connected=true") !== -1; } + connect(userService) { + console.info("Connect::"); + userService.connectedUserPromise().then((user) => { + if (!user) { + console.info("Connect error"); + this.user = null; + return Promise.reject(); + } + console.info("Connect user::"); + console.info(user); + this.user = user; + emitter.emitConnected(user); + return user; + }); + } + signIn(auth, userService) { console.info("SignIn::"); console.info(auth); @@ -36,9 +52,9 @@ class Session { return Promise.reject(); } console.info("SignIn user::"); + console.info(user); this.user = user; emitter.emitConnected(user); - console.info(user); return user; }); diff --git a/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag b/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag deleted file mode 100644 index 91a4d9a..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag +++ /dev/null @@ -1,51 +0,0 @@ -let route = require("riot-route"); -let authService = require("../js/AuthService"); -let session = require("../js/Session"); -let emitter = require("../js/EmitterService"); -let form = require("../js/PollForm"); - -require("./CreatePollHeader.tag"); -require("./PollDescription.tag"); -require("./PollChoicesText.tag"); -require("./PollChoicesImage.tag"); -require("./PollChoicesDate.tag"); -require("./PollSettings.tag"); -require("./PollVoters.tag"); - -<CreatePoll> - - <div> - <CreatePollHeader/> - <div> - <PollDescription show="{step == 0}"/> - <PollChoicesText show="{step == 1 && type == 'text'}"/> - <PollChoicesImage show="{step == 1 && type == 'image'}"/> - <PollChoicesDate show="{step == 1 && type == 'date'}"/> - <PollSettings show="{step == 2}"/> - <PollVoters show="{step == 3}"/> - </div> - </div> - - <script> - this.type = this.opts.type; - this.step = form.step; - if (session.isConnected()) { - form.init(session.user); - } else { - form.init(); - } - form.onStepChanged(step => { - this.step = step; - try { - this.update() - } catch (e) { - //FIXME J'ai une erreur, mais je ne sais pas quoi en faire... - console.error("Could not update on Create poll: ", e); - } - }); - </script> - <style> - - </style> - -</CreatePoll> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag b/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag deleted file mode 100644 index 4bfd050..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag +++ /dev/null @@ -1,61 +0,0 @@ -let form = require("../js/PollForm"); -<CreatePollHeader> - <div class="container"> - <div class="{step == 0 ? 'selectedTab' : ''}"> - <span class="fa-stack fa-2x"> - <i class="fa fa-circle-o fa-stack-2x"></i> - <strong class="fa-stack-1x">1</strong> - </span> - Description du sondage - </div> - <div class="{step == 1 ? 'selectedTab' : ''}"> - <span class="fa-stack fa-2x"> - <i class="fa fa-circle-o fa-stack-2x"></i> - <strong class="fa-stack-1x">2</strong> - </span> - Choix du sondage - </div> - <div class="{step == 2 ? 'selectedTab' : ''}"> - <span class="fa-stack fa-2x"> - <i class="fa fa-circle-o fa-stack-2x"></i> - <strong class="fa-stack-1x">3</strong> - </span> - Options du sondage - </div> - <div class="{step == 3 ? 'selectedTab' : ''}"> - <span class="fa-stack fa-2x"> - <i class="fa fa-circle-o fa-stack-2x"></i> - <strong class="fa-stack-1x">4</strong> - </span> - Participants au sondage - </div> - </div> - - <script> - this.step = form.step; - form.onStepChanged(step => { - this.step = step; - this.update() - }); - </script> - - <style> - .container { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - margin-bottom: 30px; - border-bottom: 1px solid #b2c7d3; - } - - .container > div { - margin-left: 12px; - margin-right: 12px; - } - - .selectedTab { - color: #13a2ff; - } - </style> -</CreatePollHeader> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/Home.tag b/pollen-ui-riot-js/src/main/web/tag/Home.tag index 4fb2fbd..836f817 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Home.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Home.tag @@ -1,29 +1,32 @@ -let session = require("../js/Session"); -let emitter = require("../js/EmitterService"); -let route = require("riot-route"); - - <Home> <div class="body-container"> <div class="split"> - <div onclick="{createText}"><a href="/poll/new/text">{__.createTextPoll}</a></div> - <div onclick="{createImage}"><a href="/poll/new/image">{__.createImagePoll}</a></div> - <div onclick="{createDate}"><a href="/poll/new/date">{__.createDatePoll}</a></div> + <div onclick="{createText}">{__.createTextPoll}</div> + <div onclick="{createImage}">{__.createImagePoll}</div> + <div onclick="{createDate}">{__.createDatePoll}</div> </div> </div> <script> + let session = require("../js/Session"); + let emitter = require("../js/EmitterService"); + let form = require("../js/PollForm"); + let route = require("riot-route"); + this.installBundle(session.locale, "home", emitter); this.createText = () => { - route("/poll/new/text"); + form.init(session.user); + route("/poll/new/text/0"); }; this.createImage = () => { - route("/poll/new/image"); + form.init(session.user); + route("/poll/new/image/0"); }; this.createDate = () => { - route("/poll/new/date"); + form.init(session.user); + route("/poll/new/date/0"); }; </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag b/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag deleted file mode 100644 index d8068fa..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/PollSettings.tag +++ /dev/null @@ -1,35 +0,0 @@ -let form = require("../js/PollForm"); - -<PollSettings> - <div> - Options du sondage - </div> - <div class="actions"> - <a class="button" onclick="{previousStep}">Précédent</a> - <a class="button" onclick="{nextStep}">Suivant</a> - </div> - - <script> - this.previousStep = (e) => { - form.previousStep(); - }; - this.nextStep = (e) => { - form.nextStep(); - }; - </script> - <style> - .actions { - margin-top: 50px; - margin-right: 10px; - margin-left: 10px; - margin-bottom: 10px; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - .actions > a { - margin: 5px; - } - </style> -</PollSettings> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag index f9100c5..19f89f0 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag @@ -4,17 +4,20 @@ require("./SignIn.tag"); require("./SignUp.tag"); require("./SignCheck.tag"); require("./Home.tag"); -require("./CreatePoll.tag"); - -let route = require("riot-route"); -let emitter = require("../js/EmitterService"); - +require("./poll/CreatePoll.tag"); <Pollen class="body-wrapper"> <Header></Header> <div class="body-content" ref="content"></div> <Footer></Footer> <script> + let emitter = require("../js/EmitterService"); + let session = require("../js/Session"); + let route = require("riot-route"); + + if (session.isConnected()) { + session.connect(require("../js/AuthService")); + } route("/poll/create", () => { riot.mount(this.refs.content, "createpoll"); @@ -46,8 +49,8 @@ let emitter = require("../js/EmitterService"); route("/user/favoriteList", () => { riot.mount(this.refs.content, "userfavoritelists"); }); - route("/poll/new/*", (type) => { - riot.mount(this.refs.content, "createpoll", {type: type}); + route("/poll/new/*/*", (type, step) => { + riot.mount(this.refs.content, "createpoll", {type: type, step:step}); }); route( () => { riot.mount(this.refs.content, "home"); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag new file mode 100644 index 0000000..76dcb10 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag @@ -0,0 +1,92 @@ +require("./PollDescription.tag"); +require("./PollChoicesText.tag"); +require("./PollChoicesImage.tag"); +require("./PollChoicesDate.tag"); +require("./PollSettings.tag"); +require("./PollVoters.tag"); + +<CreatePoll> + <div> + <div class="header-container"> + <div class="{step == 0 ? 'header-selected-tab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">1</strong> + </span> + {__.header_general} + </div> + <div class="{step == 1 ? 'header-selected-tab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">2</strong> + </span> + {__.header_choices} + </div> + <div class="{step == 2 ? 'header-selected-tab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">3</strong> + </span> + {__.header_options} + </div> + <div class="{step == 3 ? 'header-selected-tab' : ''}"> + <span class="fa-stack fa-2x"> + <i class="fa fa-circle-o fa-stack-2x"></i> + <strong class="fa-stack-1x">4</strong> + </span> + {__.header_voters} + </div> + </div> + <div> + <PollDescription if="{step == 0}" form="{form}" session="{session}" emitter="{emitter}"/> + <PollChoicesText if="{step == 1 && type == 'text'}" form="{form}" session="{session}" emitter="{emitter}"/> + <PollChoicesImage if="{step == 1 && type == 'image'}" form="{form}" session="{session}" + emitter="{emitter}"/> + <PollChoicesDate if="{step == 1 && type == 'date'}" form="{form}" session="{session}" emitter="{emitter}"/> + <PollSettings if="{step == 2}" form="{form}" session="{session}" emitter="{emitter}"/> + <PollVoters if="{step == 3}" form="{form}" session="{session}" emitter="{emitter}"/> + </div> + </div> + + <script> + this.type = opts.type; + this.form = require("../../js/PollForm"); + this.emitter = require("../../js/EmitterService"); + this.session = require("../../js/Session"); + this.form.type = this.type; + this.installBundle(this.session.locale, "poll", this.emitter); + + if (!this.form.model) { + this.form.init(this.session.user); + this.form.setStep(0); + } else if (opts.step) { + this.form.step = parseInt(opts.step); + } + this.step = this.form.step; + console.info("Current step!!!!!! " + this.step); + + </script> + <style> + + .header-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin-bottom: 30px; + border-bottom: 1px solid #b2c7d3; + } + + .header-container > div { + margin-left: 12px; + margin-right: 12px; + width: 160px; + } + + .header-selected-tab { + color: #13a2ff; + } + + </style> + +</CreatePoll> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoiceText.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceText.tag similarity index 100% rename from pollen-ui-riot-js/src/main/web/tag/PollChoiceText.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceText.tag diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoiceTextGroup.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceTextGroup.tag similarity index 100% rename from pollen-ui-riot-js/src/main/web/tag/PollChoiceTextGroup.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceTextGroup.tag diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag similarity index 71% rename from pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag index 7c8ff3f..394f4b2 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollChoicesDate.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag @@ -1,5 +1,3 @@ -let form = require("../js/PollForm"); - <PollChoicesDate> <div> Choix du sondage (type date) @@ -10,19 +8,17 @@ let form = require("../js/PollForm"); </div> <script> + this.form = opts.form; this.previousStep = (e) => { - form.previousStep(); + this.form.previousStep(); }; this.nextStep = (e) => { - form.nextStep(); + this.form.nextStep(); }; </script> <style> .actions { - margin-top: 50px; - margin-right: 10px; - margin-left: 10px; - margin-bottom: 10px; + margin: 50px 10px 10px; display: flex; flex-direction: row; justify-content: flex-start; diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag similarity index 71% rename from pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag index 7b57660..096e90c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollChoicesImage.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag @@ -1,5 +1,3 @@ -let form = require("../js/PollForm"); - <PollChoicesImage> <div> Choix du sondage (type image) @@ -10,19 +8,17 @@ let form = require("../js/PollForm"); </div> <script> + this.form = opts.form; this.previousStep = (e) => { - form.previousStep(); + this.form.previousStep(); }; this.nextStep = (e) => { - form.nextStep(); + this.form.nextStep(); }; </script> <style> .actions { - margin-top: 50px; - margin-right: 10px; - margin-left: 10px; - margin-bottom: 10px; + margin: 50px 10px 10px; display: flex; flex-direction: row; justify-content: flex-start; diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag similarity index 64% rename from pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag index 8f07fde..b35c603 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag @@ -1,6 +1,4 @@ -let form = require("../js/PollForm"); require('./PollChoiceTextGroup.tag'); - <PollChoicesText> <form ref="choices" onsubmit="{nextStep}"> <virtual each={item in counts}> @@ -9,56 +7,54 @@ require('./PollChoiceTextGroup.tag'); <div class="actions"> <a class="button" onclick="{addMoreChoices}"> <i class="fa fa-plus"/>Plus de choix</a> <a class="button" onclick="{previousStep}">Précédent</a> - <input type="submit" class="button" value="Suivant"> + <input type="submit" class="button mainColorBackground" value="Suivant"> </div> </form> <script> - this.counts = [5]; - this.count = 5; - this.form = form; - + this.form = opts.form; this.on('mount', () => { this.choices = this.refs.choices; - }); - - form.onStepChanged(step => { - if (step == 1) { - let choices = this.form.model.textChoices; - console.info("init step1 with " + choices.length + " choices"); - console.info(choices); + let choices = this.form.model.textChoices; + console.info("init step1 with " + choices.length + " choices"); + console.info(choices); + if (choices.length == 0) { + this.counts = []; + this.count = 0; + } else { this.counts = []; this.count = 0; let i; for (i = 0; i < choices.length; i++) { if (i > 0 && i % 5 == 0) { - this._addChoices(i); + this.addChoices(i); } } if (i <= 5 || i % 5 > 0) { - this._addChoices(this.count + 5); + this.addChoices(this.count + 5); } - console.info("Final count: " + this.count); - this.update(); } + console.info("Final count: " + this.count); + this.update(); + }); this.previousStep = (e) => { - form.fromTextChoices(this.choices); - form.previousStep(); + this.form.fromTextChoices(this.choices); + this.form.previousStep(); }; this.nextStep = (e) => { e.preventDefault(); e.stopPropagation(); - form.fromTextChoices(this.choices); - form.nextStep(); + this.form.fromTextChoices(this.choices); + this.form.nextStep(); }; this.addMoreChoices = () => { - this._addChoices(this.count + 5); + this.addChoices(this.count + 5); this.update({counts: this.counts}); }; - this._addChoices = (i) => { + this.addChoices = (i) => { this.count = i; this.counts.push(i); }; diff --git a/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollDescription.tag similarity index 73% rename from pollen-ui-riot-js/src/main/web/tag/PollDescription.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollDescription.tag index 82d5071..8b447dc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollDescription.tag @@ -1,29 +1,32 @@ -let form = require("../js/PollForm"); -let route = require("riot-route"); - <PollDescription> <form onsubmit="{nextStep}"> <label for="title">Titre du sondage</label> - <input ref="title" type="text" required name="title" id="title" value="{model.title}" placeholder="Enter le titre du sondage"> + <input ref="title" type="text" required name="title" id="title" value="{model.title}" + placeholder="Enter le titre du sondage"> <label for="name">Votre nom</label> <input ref="name" type="text" required name="name" id="name" value="{model.name}" placeholder="Enter votre nom"> <label for="email">Votre courriel</label> - <input ref="email" type="email" required name="email" id="email" value="{model.email}" placeholder="Enter votre courriel"> + <input ref="email" type="email" required name="email" id="email" value="{model.email}" + placeholder="Enter votre courriel"> <div class="actions"> <a class="button" onclick="{cancel}">Annuler</a> - <input type="submit" class="button" value="Suivant"> + <input type="submit" class="button mainColorBackground" value="Suivant"> </div> </form> <script> - this.model = form.model; + this.form = opts.form; + this.emitter = opts.emitter; + this.session = opts.session; + this.model = this.form.model; + let route = require("riot-route"); this.nextStep = (e) => { e.preventDefault(); e.stopPropagation(); this.model.title = this.refs.title.value; this.model.name = this.refs.name.value; this.model.email = this.refs.email.value; - form.nextStep(); + this.form.nextStep(); }; this.cancel = () => { route("home", null, true); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag new file mode 100644 index 0000000..86422f2 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollSettings.tag @@ -0,0 +1,314 @@ +<PollSettings> + + <div class="legend"> + {__.basic_usage} + <a class="button skip mainColorBackground" onclick="{nextStep}">{__.skip}</a> + </div> + + <div id="navigation"> + <nav class="bs-docs-sidebar"> + <ul id="sidebar" class="nav nav-stacked"> + <li> + <a onclick="{scrollTo}" href="#GlobalConfiguration">Poll</a> + <ul class="nav nav-stacked"> + <li><a onclick="{scrollTo}" href="#GlobalConfiguration_beginDate">Begin date</a></li> + <li><a onclick="{scrollTo}" href="#GlobalConfiguration_endDate">End date</a></li> + <li><a onclick="{scrollTo}" href="#GlobalConfiguration_resultVisibility">Result visibility</a> + </li> + <li><a onclick="{scrollTo}" href="#GlobalConfiguration_continiousVisibility">Continious + result</a></li> + </ul> + </li> + <li> + <a onclick="{scrollTo}" href="#ChoiceConfiguration">Choices</a> + <ul class="nav nav-stacked"> + <li><a onclick="{scrollTo}" href="#ChoiceConfigurationaddChoices">Add choices</a></li> + <li><a onclick="{scrollTo}" href="#ChoiceConfiguration_limitChoices">Limit choices</a></li> + </ul> + </li> + <li> + <a onclick="{scrollTo}" href="#VoteConfiguration">Votes</a> + <ul class="nav nav-stacked"> + <li><a onclick="{scrollTo}" href="#VoteConfiguration_countingType">Vote counting type</a></li> + <li><a onclick="{scrollTo}" href="#VoteConfiguration_visibility">Vote visibility</a></li> + <li><a onclick="{scrollTo}" href="#VoteConfiguration_anonymous">Anonymous vote</a></li> + </ul> + </li> + <li> + <a onclick="{scrollTo}" href="#CommentConfiguration">Comments</a> + <ul class="nav nav-stacked"> + <li><a onclick="{scrollTo}" href="#CommentConfiguration_enabled">Use comments</a></li> + <li><a onclick="{scrollTo}" href="#CommentConfiguration_visibility">Comment visibility</a></li> + </ul> + </li> + </ul> + </nav> + <div ref="content" class="content"> + <div class="config-group" id="GlobalConfiguration"> + <div class="config-header">Poll configuration</div> + <div id="GlobalConfiguration_beginDate" class="subgroup"> + <div class="config-subheader">Begin date</div> + <div class="config-description"> + When users can start to vote. + </div> + </div> + <div id="GlobalConfiguration_endDate" class="subgroup"> + <div class="config-subheader">End date</div> + <div class="config-description"> + Limit date of voting. + </div> + </div> + <div id="GlobalConfiguration_resultVisibility" class="subgroup"> + <div class="config-subheader">Result visibility</div> + <div class="config-description"> + Who can see results. + </div> + </div> + <div id="GlobalConfiguration_continiousVisibility" class="subgroup"> + <div class="config-subheader">Continious result</div> + <div class="config-description"> + Te see continious results. + </div> + </div> + </div> + + <div id="ChoiceConfiguration" class="config-group"> + <div class="config-header">Choices configuration</div> + <div id="ChoiceConfigurationaddChoices" class="subgroup"> + <div class="config-subheader">Can users add choices?</div> + <div class="config-description"> + Is users can add choices to poll? + </div> + </div> + <div id="ChoiceConfiguration_limitChoices" class="subgroup"> + <div class="config-subheader">Limit number of choices</div> + <div class="config-description"> + To limit the number of choices what user can vote on. + </div> + </div> + </div> + <div id="VoteConfiguration" class="config-group"> + <div class="config-header">Votes configuration</div> + <div id="VoteConfiguration_countingType" class="subgroup"> + <div class="config-subheader">Vote counting type</div> + <div class="config-description"> + Defines the vote counting type. + </div> + </div> + <div id="VoteConfiguration_visibility" class="subgroup"> + <div class="config-subheader">Vote visibility</div> + <div class="config-description"> + Who can see votes? + </div> + </div> + <div id="VoteConfiguration_anonymous" class="subgroup"> + <div class="config-subheader">Anonymous votes</div> + <div class="config-description"> + Anonymze votes + </div> + </div> + </div> + <div id="CommentConfiguration" class="config-group"> + <div class="config-header">Comments configuration</div> + <div id="CommentConfiguration_enabled" class="subgroup"> + <div class="config-subheader">Comment enabled?</div> + <div class="config-description"> + Can use comments on a poll? + </div> + </div> + <div id="CommentConfiguration_visibility" class="subgroup"> + <div class="config-subheader">Comment visibility</div> + <div class="config-description"> + Who can see comments. + </div> + </div> + </div> + </div> + </div> + <div class="actions"> + <a class="button" onclick="{previousStep}">{__.previous}</a> + <a class="button mainColorBackground" onclick="{nextStep}">{__.next}</a> + </div> + + <script> + this.form = opts.form; + this.installBundle(opts.session.locale, "poll_settings", opts.emitter); + this.previousStep = (e) => { + this.form.previousStep(); + }; + this.nextStep = (e) => { + this.form.nextStep(); + }; + + this.scrollTo = (e) => { + e.preventDefault(); + e.stopPropagation(); + let id = e.currentTarget.href.substring(e.currentTarget.href.indexOf('#') + 1); + if (id.indexOf('_')>-1) { + id = id.substring(0, id.indexOf('_')); + } + document.getElementById(id).scrollIntoView(); + }; + + </script> + <style> + + .config-header { + border-bottom: solid 2px #c8ccca; + font-size: 20px; + margin-bottom: 10px; + } + + .config-subheader { + border-bottom: solid 2px #c8ccca; + font-size: 18px; + margin-bottom: 10px; + } + + .config-description { + margin: 10px; + } + + .config-group { + height: 100%; + border: solid 2px #c8ccca; + padding: 10px; + border-radius: 10px; + } + + ul { + list-style: none; + } + + li { + margin-bottom: 5px; + margin-top: 5px; + } + + fieldset { + padding: 10px; + } + + .legend { + width: 100%; + height: 70px; + border-bottom: 1px solid #b2c7d3; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 30px; + font-size: 20px; + } + + .actions { + margin: 50px 10px 10px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + + .skip { + width: 100px; + } + + .actions > a, .skip { + margin: 5px; + } + + /*.fixed {*/ + /*position: fixed;*/ + /*}*/ + + /* sidebar */ + .bs-docs-sidebar { + /*padding-left: 20px;*/ + /*margin-top: 20px;*/ + /*margin-bottom: 20px;*/ + } + + /* all links */ + .bs-docs-sidebar .nav > li > a { + color: #999; + border-left: 2px solid transparent; + padding: 4px 20px; + font-size: 18px; + font-weight: 400; + } + + /* nested links */ + .bs-docs-sidebar .nav .nav > li > a { + padding-top: 5px; + padding-bottom: 5px; + padding-left: 30px; + font-size: 16px; + } + + /* active & hover links */ + .bs-docs-sidebar .nav > .active > a, + .bs-docs-sidebar .nav > li > a:hover, + .bs-docs-sidebar .nav > li > a:focus { + color: #563d7c; + text-decoration: none; + background-color: transparent; + border-left-color: #563d7c; + } + + /* all active links */ + .bs-docs-sidebar .nav > .active > a, + .bs-docs-sidebar .nav > .active:hover > a, + .bs-docs-sidebar .nav > .active:focus > a { + font-weight: 700; + } + + /* nested active links */ + .bs-docs-sidebar .nav .nav > .active > a, + .bs-docs-sidebar .nav .nav > .active:hover > a, + .bs-docs-sidebar .nav .nav > .active:focus > a { + font-weight: 500; + } + + /* hide inactive nested list */ + /*.bs-docs-sidebar .nav ul.nav {*/ + /*display: none;*/ + /*}*/ + + /* show active nested list */ + /*.bs-docs-sidebar .nav > .active > ul.nav {*/ + /*display: block;*/ + /*}*/ + + #sidebar { + height: 450px; + width: 300px; + margin-left: 10px; + } + + .content { + /*display: flex;*/ + /*flex-direction: column;*/ + /*justify-content: flex-start;*/ + /*background: white;*/ + /*border: solid 2px #c8ccca;*/ + /*padding: 45px 0;*/ + /*border-radius: 10px;*/ + /*text-align: center;*/ + /*align-items: flex-start;*/ + width: 99%; + height: 450px; + overflow-y: hidden; + padding-right: 20px; + align-self: flex-start; + flex-grow: 2; + } + + #navigation { + overflow: hidden; + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + /*justify-content: space-around;*/ + } + </style> +</PollSettings> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollVoters.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollVoters.tag similarity index 77% rename from pollen-ui-riot-js/src/main/web/tag/PollVoters.tag rename to pollen-ui-riot-js/src/main/web/tag/poll/PollVoters.tag index 364f742..b057aff 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollVoters.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollVoters.tag @@ -1,5 +1,3 @@ -let form = require("../js/PollForm"); - <PollVoters> <div> Participants au sondage @@ -11,12 +9,13 @@ let form = require("../js/PollForm"); </div> <script> + this.form = opts.form; this.previousStep = (e) => { - form.previousStep(); + this.form.previousStep(); }; this.validate = (e) => { - form.save().then(poll => { + this.form.save().then(poll => { console.info("poll saved"); console.info(poll); }).catch(errors => { @@ -27,10 +26,7 @@ let form = require("../js/PollForm"); </script> <style> .actions { - margin-top: 50px; - margin-right: 10px; - margin-left: 10px; - margin-bottom: 10px; + margin: 50px 10px 10px; display: flex; flex-direction: row; justify-content: flex-start; diff --git a/pollen-ui-riot-js/webpack.config.js b/pollen-ui-riot-js/webpack.config.js index 4082555..e5e78cc 100644 --- a/pollen-ui-riot-js/webpack.config.js +++ b/pollen-ui-riot-js/webpack.config.js @@ -38,6 +38,11 @@ module.exports = { {from: "src/main/web/css", to: "css"}, {from: "./node_modules/font-awesome/css", to: "css"}, {from: "./node_modules/font-awesome/fonts", to: "fonts"}, + {from: "./node_modules/bootstrap/dist/css", to: "css"}, + {from: "./node_modules/bootstrap/dist/fonts", to: "fonts"}, + {from: "./node_modules/scrollspy-js/js/scrollspy.js", to: "js"}, + {from: "./node_modules/bootstrap/dist/js/bootstrap.js", to: "js"}, + {from: "./node_modules/jquery/dist/js/jquery.js", to: "js"}, ]) ], -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.