From 351e7426ff0a366e207c391eeb434f1f277acc1e Mon Sep 17 00:00:00 2001 From: flifloo Date: Sun, 27 Sep 2020 20:43:11 +0200 Subject: [PATCH] Home page rework --- locales/en.json | 4 +- locales/fr.json | 4 +- public/javascripts/index.js | 61 ++++++++++------- public/javascripts/layout.js | 2 +- views/index.pug | 84 ++++++++++++----------- views/layout.pug | 126 +++++++++++++++++------------------ views/mixin.pug | 3 +- 7 files changed, 155 insertions(+), 129 deletions(-) diff --git a/locales/en.json b/locales/en.json index 2889d7c..9367764 100644 --- a/locales/en.json +++ b/locales/en.json @@ -31,7 +31,9 @@ "day": "Day", "pay": "Pay", "payment": "Payment method", - "creditCard": "Credit card" + "creditCard": "Credit card", + "chooseDepartment": "Choose your department", + "chooseSandwich": "Choose your sandwich" }, "login": { "title": "Login", diff --git a/locales/fr.json b/locales/fr.json index 3e19a57..ed404e9 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -31,7 +31,9 @@ "day": "Jour", "pay": "Payer", "payment": "Mode de paiement", - "creditCard": "CB" + "creditCard": "CB", + "chooseDepartment": "Choisissez votre département", + "chooseSandwich": "Choisissez votre sandwiche" }, "login": { "title": "Se connecter", diff --git a/public/javascripts/index.js b/public/javascripts/index.js index fd3ecb6..e393aa4 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -1,37 +1,52 @@ -const orderAction = document.getElementById("order-action"); -const rmButton = document.getElementById("remove-order"); +const orders = document.getElementById("orders"); +const sandwich = document.getElementById("sandwich"); +const day = document.getElementById("day"); const locals = { - order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""), - sandwich: document.querySelector("label[for='sandwich1']").innerHTML, - day: document.querySelector("label[for='day1']").innerHTML + sandwich: document.querySelector("#oderCreator label").innerHTML, + date: document.querySelector("label[for=day]").innerHTML }; -const [min, max] = [document.getElementById("day1").min, document.getElementById("day1").max]; function lastOrderId() { - let list = document.querySelectorAll("div.order h2"); - return parseInt(list[list.length-1].innerText.replace(locals.order+" ", "")); + if (orders.lastChild) + return parseInt(orders.lastChild.id.replace("order", "")); + return 0; } -document.getElementById("add-order").addEventListener("click", () => { +document.getElementById("addOrder").addEventListener("click", () => { + if (!sandwich.value || !day.value) + return; + let id = lastOrderId() + 1; - orderAction.insertAdjacentHTML("beforebegin", `
-

${locals.order} ${id}

-
+ + //ToDo submit button check + + orders.insertAdjacentHTML("beforeend", `
+
+ -
-
- - +
+ +
+ remove
`); - document.getElementById("order"+lastOrderId()).scrollIntoView({behavior: "smooth"}); - rmButton.classList.remove("hide"); + + sandwich.selectedIndex = 0; + day.value = ""; + + let order = document.getElementById("order"+id); + order.querySelector("a").addEventListener("click", () => { + order.remove(); + if (lastOrderId() === 0) { + sandwich.required = true; + day.required = true; + } + }); + + document.getElementById("order"+id).scrollIntoView({behavior: "smooth"}); }); -rmButton.addEventListener("click", () => { - let id = lastOrderId(); - document.getElementById("order"+id).remove(); - if (id === 2) - rmButton.classList.add("hide"); +document.querySelector("form").addEventListener("submit", () => { + return lastOrderId(); }); diff --git a/public/javascripts/layout.js b/public/javascripts/layout.js index 0e6bc79..7dbd804 100644 --- a/public/javascripts/layout.js +++ b/public/javascripts/layout.js @@ -23,7 +23,7 @@ dark.addEventListener("click", () => { }); document.addEventListener("DOMContentLoaded", function() { - M.Sidenav.init(document.querySelectorAll(".sidenav")); + M.AutoInit(); }); function cb(token) { diff --git a/views/index.pug b/views/index.pug index 57752db..4f1787b 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,49 +1,55 @@ extends layout block content - div.card - h1= title - p=__("index.welcome") - form#order(action="/order" method="POST") - div.field - label(for="department")=__("department")+":" - +list("department", "department-list", "department", user ? user.DepartmentName : "", "off", true) - datalist#department-list - each department in departments - option(value=department.name) + div.container + h4.center=__("index.welcome") + div.row + form#order.col.s12(action="/order" method="POST") + div.row + div.input-field.col.s12 + select(name="department" required) + option(value="" disabled selected hidden)=__("index.chooseDepartment") + each department in departments + option(value=department.name)=department.name + label=__("department")+":" - div.field - label(for="firstname")=__("firstName")+":" - input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required) - div.field - label(for="lastname")=__("lastName")+":" - input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required) + div.row + div.input-field.col.s6 + input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required) + label(for="firstname")=__("firstName")+":" + div.input-field.col.s6 + input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required) + label(for="lastname")=__("lastName")+":" - div#order1.order - h2=__("order")+" 1" - div.field - label(for="sandwich1")=__("sandwich")+":" - +list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true) - div.field - label(for="day1")=__("index.day")+":" - input#day1(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "" name="dates[1]" required) + div#oderCreator.row + h5=__("order") + div.input-field.col.s6 + select#sandwich + option(value="" disabled selected hidden)=__("index.chooseSandwich") + each sandwich in sandwiches + option(value=sandwich.name)=sandwich.name + label=__("sandwich")+":" + div.input-field.col.s6 + input#day(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "") + label(for="day")=__("index.day")+":" + a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add - div#order-action - a#add-order + - a#remove-order.hide - + div#orders - h3=__("index.payment") - div.field.buttons - label(for="lyf_pay") LyfPay - input#lyf_pay(type="radio" name="payment" value="lyfPay" checked) - label(for="credit_card")=__("index.creditCard") - input#credit_card(type="radio" name="payment" value="creditCard") + div.row + h5=__("index.payment") + div.col.s12 + p + label + input(type="radio" name="payment" value="lyfPay" checked) + span LyfPay + p + label + input(type="radio" name="payment" value="creditCard") + span=__("index.creditCard") - div.field - +submit(value=__("index.pay")) - - datalist#sandwich-list - each sandwich in sandwiches - option(value=sandwich.name) + div.row.center + div.input-field.col.s12 + +submit(__("index.pay")) script(src="/javascripts/index.js") diff --git a/views/layout.pug b/views/layout.pug index 57aa2b3..912f7cd 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -6,7 +6,7 @@ html title= title link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons") link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css") - link(rel="stylesheet" href="/stylesheets/style.css") + //link(rel="stylesheet" href="/stylesheets/style.css") meta(name="viewport" content="width=device-width, initial-scale=1.0") body mixin nav @@ -31,72 +31,72 @@ html ul#mobile-nav.sidenav +nav - div.hide - block content + block content - div#more - a=__("layout.about") - a=__("contact") + .hide + div#more + a=__("layout.about") + a=__("contact") - div#dark.hide - div#about.popup.card.hide - h1=__("layout.about") - p=__("layout.aboutDescription") - div.images - div - img(src="/images/logoBio.png") - p=__("layout.bio") - div - img(src="/images/logoChimie.png") - p=__("layout.chemistry") - div - img(src="/images/logoGC.png") - p=__("layout.GC") - div - img(src="/images/logoGCGP.png") - p=__("layout.GCPD") - div - img(src="/images/logoGEA.png") - p=__("layout.GEA") - div - img(src="/images/logoInfo.png") - p=__("layout.IT") - p.before-link=__("layout.made") - a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix - p.before-link=__("layout.powered") - a(href="https://sapinet.fr" target="_blank") Sapinet - div#contact.popup.card.hide - h1=__("contact") - form(action="/contact" method="POST") - div.cont + div#dark.hide + div#about.popup.card.hide + h1=__("layout.about") + p=__("layout.aboutDescription") + div.images + div + img(src="/images/logoBio.png") + p=__("layout.bio") + div + img(src="/images/logoChimie.png") + p=__("layout.chemistry") + div + img(src="/images/logoGC.png") + p=__("layout.GC") + div + img(src="/images/logoGCGP.png") + p=__("layout.GCPD") + div + img(src="/images/logoGEA.png") + p=__("layout.GEA") + div + img(src="/images/logoInfo.png") + p=__("layout.IT") + p.before-link=__("layout.made") + a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix + p.before-link=__("layout.powered") + a(href="https://sapinet.fr" target="_blank") Sapinet + div#contact.popup.card.hide + h1=__("contact") + form(action="/contact" method="POST") + div.cont + div.field + label(for="firstNameContact")="* "+__("firstName") + input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required) + div.field + label(for="lastNameContact")="* "+__("lastName") + input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required) + div.cont + div.field + label(for="emailContact")="* "+__("email") + input#emailContact(type="email" name="email" value=user ? user.email : "" required) + div.field + label(for="phoneNumberContact")=__("layout.phoneNumber") + input#phoneNumberContact(type="tel" name="phoneNumber") div.field - label(for="firstNameContact")="* "+__("firstName") - input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required) + label(for="subjectContact")="* "+__("layout.subject") + +list("subjectContact", "subjectContactList", "subject", "", "off", true) + datalist#subjectContactList + option(value=__("layout.commandEdit")) + option(value=__("layout.commandRemove")) + option(value=__("layout.question")) + option(value=__("layout.profile")) + option(value=__("layout.other")) + p=__("layout.warnMessage") + div.field.message + label(for="messageContact")=__("layout.message") + textarea#messageContact(name="message" required) div.field - label(for="lastNameContact")="* "+__("lastName") - input#lastNameContact(type="text" name="lastName" value=user ? user.lastName : "" required) - div.cont - div.field - label(for="emailContact")="* "+__("email") - input#emailContact(type="email" name="email" value=user ? user.email : "" required) - div.field - label(for="phoneNumberContact")=__("layout.phoneNumber") - input#phoneNumberContact(type="tel" name="phoneNumber") - div.field - label(for="subjectContact")="* "+__("layout.subject") - +list("subjectContact", "subjectContactList", "subject", "", "off", true) - datalist#subjectContactList - option(value=__("layout.commandEdit")) - option(value=__("layout.commandRemove")) - option(value=__("layout.question")) - option(value=__("layout.profile")) - option(value=__("layout.other")) - p=__("layout.warnMessage") - div.field.message - label(for="messageContact")=__("layout.message") - textarea#messageContact(name="message" required) - div.field - +submit(value=__("send")) + +submit(value=__("send")) script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js") script(src="/javascripts/layout.js") diff --git a/views/mixin.pug b/views/mixin.pug index 2fa7ff4..a8af50a 100644 --- a/views/mixin.pug +++ b/views/mixin.pug @@ -1,6 +1,7 @@ mixin submit(value) div.recaptcha.recaptcha-cb - input(type="submit" value!=value) + button.btn.waves-effect.waves-light(type="submit" name="action")=value + i.material-icons.right send mixin list(id, list, name, value="", autocomplete="on", required=false) span.list_arrow