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 8ee9e61a60000dc64c20232849e7f531efa9ab96 Author: Tony CHEMIT <dev@tchemit.fr> Date: Sat Jan 14 08:04:41 2017 +0100 ajout des choix de type text + quelques améliorations ailleurs --- pollen-ui-riot-js/src/main/web/js/AuthService.js | 48 ++------------ pollen-ui-riot-js/src/main/web/js/ChoiceText.js | 9 +++ .../src/main/web/js/EmitterService.js | 16 +++-- pollen-ui-riot-js/src/main/web/js/FetchService.js | 6 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 68 ++++++++++++++------ pollen-ui-riot-js/src/main/web/js/Session.js | 35 ++++++++++ pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag | 17 +++-- .../src/main/web/tag/CreatePollHeader.tag | 5 +- pollen-ui-riot-js/src/main/web/tag/Header.tag | 8 +-- .../src/main/web/tag/PollChoiceText.tag | 39 +++++++++++ .../src/main/web/tag/PollChoiceTextGroup.tag | 14 ++++ .../src/main/web/tag/PollChoicesText.tag | 75 ++++++++++++++++++---- .../src/main/web/tag/PollDescription.tag | 48 ++++++++++---- pollen-ui-riot-js/src/main/web/tag/SignIn.tag | 2 +- 14 files changed, 279 insertions(+), 111 deletions(-) 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 de60586..0efdabb 100644 --- a/pollen-ui-riot-js/src/main/web/js/AuthService.js +++ b/pollen-ui-riot-js/src/main/web/js/AuthService.js @@ -5,32 +5,13 @@ let FetchService = require("./FetchService"); class AuthService extends FetchService { - constructor() { - super(); - emitter.onUnauthorize(() => { - this.userPromise = null; - }); - - } - signIn(login, password) { return this.form("/v1/login", {login: login, password: password}) - .then((result) => { - if (!result) { + .then((auth) => { + if (!auth) { return Promise.reject(false); } - - session.auth = result; - console.info(session.auth); - - this.getUser().then( - user => { - console.info(user); - emitter.emitConnected(user); - } - ); - - + session.signIn(auth, this); return true; }); } @@ -40,29 +21,12 @@ class AuthService extends FetchService { } signOut() { - delete session.auth; - this.userPromise = null; + session.signOut(); return this.get("/v1/logout"); } - isConnected() { - return !!session.auth; - // return document.cookie.indexOf("pollen-connected=true") !== -1; - } - - getUser() { - if (!this.userPromise) { - this.userPromise = this.get("/v1/users/" + session.auth.id) - .then((result) => { - if (!result) { - this.userPromise = null; - return Promise.reject(); - } - return result; - }); - } - - return this.userPromise; + userPromise(auth) { + return this.get("/v1/users/" + auth.id); } validateEmail(userId, token) { diff --git a/pollen-ui-riot-js/src/main/web/js/ChoiceText.js b/pollen-ui-riot-js/src/main/web/js/ChoiceText.js new file mode 100644 index 0000000..d0e64d7 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/js/ChoiceText.js @@ -0,0 +1,9 @@ +class ChoiceText { + + constructor(text, description) { + this.text = text; + this.description = description; + } +} + +module.exports = ChoiceText; diff --git a/pollen-ui-riot-js/src/main/web/js/EmitterService.js b/pollen-ui-riot-js/src/main/web/js/EmitterService.js index df185d1..490fe83 100644 --- a/pollen-ui-riot-js/src/main/web/js/EmitterService.js +++ b/pollen-ui-riot-js/src/main/web/js/EmitterService.js @@ -1,10 +1,12 @@ let singleton = require("./Singleton"); -let EventEmitter = require('events'); -class EmitterService extends EventEmitter { +class EmitterService { + constructor() { + riot.observable(this); + } emitUnauthorize() { - this.emit("unauthorized"); + this.trigger("unauthorized"); } onUnauthorize(fn) { @@ -12,7 +14,7 @@ class EmitterService extends EventEmitter { } emitConnected(user) { - this.emit("connected", user); + this.trigger("connected", user); } onConnected(fn) { @@ -20,7 +22,7 @@ class EmitterService extends EventEmitter { } emitDisconnected(user) { - this.emit("disconnected", user); + this.trigger("disconnected", user); } onDisconnected(fn) { @@ -28,7 +30,7 @@ class EmitterService extends EventEmitter { } emitError() { - this.emit("error"); + this.trigger("error"); } onError(fn) { @@ -36,7 +38,7 @@ class EmitterService extends EventEmitter { } emitLocaleChanged(locale) { - this.emit("localeChanged", locale); + this.trigger("localeChanged", locale); } onLocaleChanged(fn) { 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 71c70fd..41d36e4 100644 --- a/pollen-ui-riot-js/src/main/web/js/FetchService.js +++ b/pollen-ui-riot-js/src/main/web/js/FetchService.js @@ -9,8 +9,12 @@ class FetchService { headers["Content-Type"] = "application/json"; } - if (session.auth) { + if (session.isConnected()) { + console.info("CONNNNNNECTED!!!") + headers["X-Pollen-Session-Token"] = session.auth.permission; + } else { + console.info("NONONONOONONONON CONNNNNNECTED!!!") } return fetch( session.configuration.endPoint + url, { 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 feafb5e..54121ae 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -1,21 +1,12 @@ let singleton = require("./Singleton"); -let session = require("./Session"); -let EventEmitter = require('events'); +let ChoiceText = require('./ChoiceText'); class PollForm { constructor() { - this.emitter = new EventEmitter(); + riot.observable(this); this.step = 0; - this.model = { - title: "", - description: "", - userName: "", - userEmail: "", - textChoices: [], - imageChoices: [], - dateChoices: [], - }; + this.model = null; } previousStep() { @@ -26,27 +17,62 @@ class PollForm { this._setStep(this.step + 1); } - _init(configuration, user) { + init(user) { console.info("init form"); - console.info(configuration); - console.info(user); + this.model = { + title: "Mon premier sondage", + description: "", + name: "Tony Chemit", + email: "user@pollen.org", + textChoices: [new ChoiceText("Mozart", "Requiem is so powerfull"), + new ChoiceText("Schubert", "Truit is so nice"), new ChoiceText("Malher", "So deep, so dark...")], + imageChoices: [], + dateChoices: [] + }; if (user) { - this.model.userEmail = user.email; + //FIXME On doit aussi remonter le nom de l'utilisateur + this.model.name = user.email; + this.model.email = user.email; } } onStepChanged(fn) { - this.emitter.on("stepChanged", fn); + this.on("stepChanged", fn); + } + + fromTextChoices(form) { + let choices = []; + + let map = {}; + let count = 0; + Array.prototype.forEach.call(form.elements, (e) => { + if (e.name && e.value) { + if (e.name.indexOf("choice") == 0) { + map[e.name] = e.value; + count++; + } + if (e.name.indexOf("description") == 0) { + map[e.name] = e.value; + } + } + }); + + for (let i = 0; i < count; i++) { + let text = map['choice' + i]; + let description = map['description' + i]; + choices.push(new ChoiceText(text, description)); + } + console.info("FromTextChoices"); + console.info(choices); + this.model.textChoices = choices; } _setStep(step) { + console.info("set step:: " + step); this.step = step; - this._emitStepChanged(step); + this.trigger("stepChanged", step); } - _emitStepChanged(step) { - this.emitter.emit("stepChanged", step); - } } module.exports = singleton(PollForm); 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 238e0c1..2959f13 100644 --- a/pollen-ui-riot-js/src/main/web/js/Session.js +++ b/pollen-ui-riot-js/src/main/web/js/Session.js @@ -1,4 +1,5 @@ let singleton = require("./Singleton"); +let emitter = require("./EmitterService"); class Session { @@ -9,6 +10,8 @@ class Session { this.locale = null; // pour contenir la configuration this.configuration = null; + // pour contenir l'utillisateur connecté + this.user = null; let lang = navigator.language || navigator.userLanguage; if (lang.indexOf('en') == 0) { @@ -16,6 +19,38 @@ class Session { } else { this.locale = 'fr'; } + emitter.onUnauthorize(() => { + this.user = null; + }); + } + + isConnected() { + return !!this.auth; + // return document.cookie.indexOf("pollen-connected=true") !== -1; + } + + signIn(auth, userService) { + this.auth = auth; + console.info("SignIn::"); + console.info(auth); + userService.userPromise(auth).then((user) => { + if (!user) { + console.info("SignIn error"); + this.user = null; + return Promise.reject(); + } + console.info("SignIn user::"); + this.user = user; + emitter.emitConnected(user); + console.info(user); + return user; + }); + + } + + signOut() { + delete this.auth; + delete this.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 index 5a943d8..9806476 100644 --- a/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag +++ b/pollen-ui-riot-js/src/main/web/tag/CreatePoll.tag @@ -17,18 +17,23 @@ require("./PollVoters.tag"); <div> <CreatePollHeader/> <div> - <PollDescription if="{step == 0}"/> - <PollChoicesText if="{step == 1 && type == 'text'}"/> - <PollChoicesImage if="{step == 1 && type == 'image'}"/> - <PollChoicesDate if="{step == 1 && type == 'date'}"/> - <PollSettings if="{step == 2}"/> - <PollVoters if="{step == 3}"/> + <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 { diff --git a/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag b/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag index 7f12a18..4bfd050 100644 --- a/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag +++ b/pollen-ui-riot-js/src/main/web/tag/CreatePollHeader.tag @@ -49,8 +49,9 @@ let form = require("../js/PollForm"); border-bottom: 1px solid #b2c7d3; } - .body-container > div { - + .container > div { + margin-left: 12px; + margin-right: 12px; } .selectedTab { diff --git a/pollen-ui-riot-js/src/main/web/tag/Header.tag b/pollen-ui-riot-js/src/main/web/tag/Header.tag index 8fa6d00..7da95ea 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Header.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Header.tag @@ -40,12 +40,8 @@ require("./HeaderI18n.tag"); this.user = null; - if (authService.isConnected()) { - authService.getUser() - .then((user) => { - this.user = user; - this.update(); - }, this.signOut); + if (session.isConnected()) { + this.user = session.user; } emitter.onConnected((user) => { diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoiceText.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoiceText.tag new file mode 100644 index 0000000..a20c03d --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoiceText.tag @@ -0,0 +1,39 @@ +<PollChoiceText> + + <div class="container"> + <label class="wide" for="choice{number}">Choix {number}</label> + <label if="{number == 1 }">Description</label> + </div> + <div class="container"> + + <input class="wide" if="{number == 1}" type="text" required ref="choice{number}" name="choice{number}" + id="choice{number}" + value="{(choices[0] || {text:''}).text}"> + <input class="wide" if="{number > 1}" type="text" ref="choice{number}" name="choice{number}" id="choice{number}" + value="{(choices[number - 1] || {text:''}).text}"> + <input class="wider" type="text" ref="description{number}" name="description{number}" id="description{number}" + value="{(choices[number - 1] || {description:''}).description}"> + </div> + + <script> + this.number = opts.number; + this.choices = opts.choices; + </script> + + <style> + .wide { + width: 440px; + } + + .wider { + width: 640px; + } + + .container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + </style> +</PollChoiceText> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoiceTextGroup.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoiceTextGroup.tag new file mode 100644 index 0000000..026cd3c --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoiceTextGroup.tag @@ -0,0 +1,14 @@ +require('./PollChoiceText.tag'); +<PollChoiceTextGroup> + <PollChoiceText number="{start}" choices="{choices}"/> + <PollChoiceText number="{start + 1}" choices="{choices}"/> + <PollChoiceText number="{start + 2}" choices="{choices}"/> + <PollChoiceText number="{start + 3}" choices="{choices}"/> + <PollChoiceText number="{start + 4}" choices="{choices}"/> + + <script> + this.choices = opts.choices; + this.descriptions = opts.descriptions; + this.start = parseInt(opts.start); + </script> +</PollChoiceTextGroup> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag b/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag index a4a76ff..8f07fde 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag +++ b/pollen-ui-riot-js/src/main/web/tag/PollChoicesText.tag @@ -1,35 +1,88 @@ let form = require("../js/PollForm"); +require('./PollChoiceTextGroup.tag'); <PollChoicesText> - <div> - Choix du sondage (type texte) - </div> - <div class="actions"> - <a class="button" onclick="{previousStep}">Précédent</a> - <a class="button" onclick="{nextStep}">Suivant</a> - </div> + <form ref="choices" onsubmit="{nextStep}"> + <virtual each={item in counts}> + <PollChoiceTextGroup choices="{form.model.textChoices}" start="{item - 4}"/> + </virtual> + <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"> + </div> + </form> <script> + this.counts = [5]; + this.count = 5; + this.form = 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); + this.counts = []; + this.count = 0; + let i; + for (i = 0; i < choices.length; i++) { + if (i > 0 && i % 5 == 0) { + this._addChoices(i); + } + } + if (i <= 5 || i % 5 > 0) { + this._addChoices(this.count + 5); + } + console.info("Final count: " + this.count); + this.update(); + } + }); + this.previousStep = (e) => { + form.fromTextChoices(this.choices); form.previousStep(); }; this.nextStep = (e) => { + e.preventDefault(); + e.stopPropagation(); + form.fromTextChoices(this.choices); form.nextStep(); }; + this.addMoreChoices = () => { + this._addChoices(this.count + 5); + this.update({counts: this.counts}); + }; + + this._addChoices = (i) => { + this.count = i; + this.counts.push(i); + }; </script> <style> - .actions { - margin-top: 50px; + + a.button > i { margin-right: 10px; - margin-left: 10px; - margin-bottom: 10px; + } + + .actions { + margin: 50px 10px 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } + .actions > a { margin: 5px; } + + .actions > input { + margin: 5px; + } </style> </PollChoicesText> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag b/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag index 34136b1..a4d9020 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag +++ b/pollen-ui-riot-js/src/main/web/tag/PollDescription.tag @@ -2,32 +2,52 @@ let form = require("../js/PollForm"); let route = require("riot-route"); <PollDescription> - <div> - Description du sondage - </div> - - <div class="actions"> - <a class="button" onclick="{cancel}">Annuler</a> - <a class="button" onclick="{nextStep}">Suivant</a> - </div> + <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"> + <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"> + <div class="actions"> + <a class="button" onclick="{cancel}">Annuler</a> + <input type="submit" class="button" value="Suivant"> + </div> + </form> <script> - this.nextStep = (e) => { form.nextStep(); }; - this.cancel = (e) => { route("/", null, true); }; + this.model = form.model; + 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.cancel = () => { + route("/", null, true); + }; </script> <style> + form > input { + width: 440px; + } + .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; align-items: center; } + .actions > a { margin: 5px; } + + .actions > input { + margin: 5px; + } </style> </PollDescription> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag index 1f5401e..b6f38ca 100644 --- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag +++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag @@ -1,8 +1,8 @@ let authService = require("../js/AuthService"); let session = require("../js/Session"); let emitter = require("../js/EmitterService"); -require("./popup/NewPassword.tag"); let route = require("riot-route"); +require("./popup/NewPassword.tag"); <SignIn> <div class="body-container"> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.