BDE_IUT_Info/SOD
Archived
1
0
Fork 0
Code Activity

Home page rework

Browse source
This commit is contained in:
Ethanell 2020-09-27 20:43:11 +02:00
parent 77514867ed
commit 351e7426ff
7 changed files with 155 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/en.json
View file

@ -31,7 +31,9 @@
"day": "Day", "day": "Day",
"pay": "Pay", "pay": "Pay",
"payment": "Payment method", "payment": "Payment method",
"creditCard": "Credit card" "creditCard": "Credit card",
"chooseDepartment": "Choose your department",
"chooseSandwich": "Choose your sandwich"
}, },
"login": { "login": {
"title": "Login", "title": "Login",

4
locales/fr.json
View file

@ -31,7 +31,9 @@
"day": "Jour", "day": "Jour",
"pay": "Payer", "pay": "Payer",
"payment": "Mode de paiement", "payment": "Mode de paiement",
"creditCard": "CB" "creditCard": "CB",
"chooseDepartment": "Choisissez votre département",
"chooseSandwich": "Choisissez votre sandwiche"
}, },
"login": { "login": {
"title": "Se connecter", "title": "Se connecter",

61
public/javascripts/index.js
View file

@ -1,37 +1,52 @@
const orderAction = document.getElementById("order-action"); const orders = document.getElementById("orders");
const rmButton = document.getElementById("remove-order"); const sandwich = document.getElementById("sandwich");
const day = document.getElementById("day");
const locals = { const locals = {
order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""), sandwich: document.querySelector("#oderCreator label").innerHTML,
sandwich: document.querySelector("label[for='sandwich1']").innerHTML, date: document.querySelector("label[for=day]").innerHTML
day: document.querySelector("label[for='day1']").innerHTML
}; };
const [min, max] = [document.getElementById("day1").min, document.getElementById("day1").max];
function lastOrderId() { function lastOrderId() {
let list = document.querySelectorAll("div.order h2"); if (orders.lastChild)
return parseInt(list[list.length-1].innerText.replace(locals.order+" ", "")); 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; let id = lastOrderId() + 1;
orderAction.insertAdjacentHTML("beforebegin", `<div id="order${id}" class="order">
<h2>${locals.order} ${id}</h2> //ToDo submit button check
<div class="field">
orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
<div class="input-field col s6">
<input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
<label for="sandwich${id}">${locals.sandwich}</label> <label for="sandwich${id}">${locals.sandwich}</label>
<span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
</div> </div>
<div class="field"> <div class="input-field col s6">
<label for="day${id}">${locals.day}</label> <input id="date${id}" type="date" name="dates[${id}]" value="${day.value}" readonly required>
<input id="da${id}y" type="date" min="${min}" max="${max}" name="dates[${id}]" required> <label for="date${id}">${locals.day}</label>
</div> </div>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">remove</i></a>
</div>`); </div>`);
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", () => { document.querySelector("form").addEventListener("submit", () => {
let id = lastOrderId(); return lastOrderId();
document.getElementById("order"+id).remove();
if (id === 2)
rmButton.classList.add("hide");
}); });

2
public/javascripts/layout.js
View file

@ -23,7 +23,7 @@ dark.addEventListener("click", () => {
}); });
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
M.Sidenav.init(document.querySelectorAll(".sidenav")); M.AutoInit();
}); });
function cb(token) { function cb(token) {

84
views/index.pug
View file

@ -1,49 +1,55 @@
extends layout extends layout
block content block content
div.card div.container
h1= title h4.center=__("index.welcome")
p=__("index.welcome") div.row
form#order(action="/order" method="POST") form#order.col.s12(action="/order" method="POST")
div.field div.row
label(for="department")=__("department")+":" div.input-field.col.s12
+list("department", "department-list", "department", user ? user.DepartmentName : "", "off", true) select(name="department" required)
datalist#department-list option(value="" disabled selected hidden)=__("index.chooseDepartment")
each department in departments each department in departments
option(value=department.name) option(value=department.name)=department.name
label=__("department")+":"
div.field div.row
label(for="firstname")=__("firstName")+":" div.input-field.col.s6
input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required) input#firstname(type="text" name="firstName" value=user ? user.firstName : "" required)
div.field label(for="firstname")=__("firstName")+":"
label(for="lastname")=__("lastName")+":" div.input-field.col.s6
input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required) input#lastname(type="text" name="lastName" value=user ? user.lastName : "" required)
label(for="lastname")=__("lastName")+":"
div#order1.order div#oderCreator.row
h2=__("order")+" 1" h5=__("order")
div.field div.input-field.col.s6
label(for="sandwich1")=__("sandwich")+":" select#sandwich
+list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true) option(value="" disabled selected hidden)=__("index.chooseSandwich")
div.field each sandwich in sandwiches
label(for="day1")=__("index.day")+":" option(value=sandwich.name)=sandwich.name
input#day1(type="date" min=date.firstDate ? date.firstDate : "" max=date.lastDate ? date.lastDate : "" name="dates[1]" required) 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 div#orders
a#add-order +
a#remove-order.hide -
h3=__("index.payment") div.row
div.field.buttons h5=__("index.payment")
label(for="lyf_pay") LyfPay div.col.s12
input#lyf_pay(type="radio" name="payment" value="lyfPay" checked) p
label(for="credit_card")=__("index.creditCard") label
input#credit_card(type="radio" name="payment" value="creditCard") input(type="radio" name="payment" value="lyfPay" checked)
span LyfPay
p
label
input(type="radio" name="payment" value="creditCard")
span=__("index.creditCard")
div.field div.row.center
+submit(value=__("index.pay")) div.input-field.col.s12
+submit(__("index.pay"))
datalist#sandwich-list
each sandwich in sandwiches
option(value=sandwich.name)
script(src="/javascripts/index.js") script(src="/javascripts/index.js")

126
views/layout.pug
View file

@ -6,7 +6,7 @@ html
title= title title= title
link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons") 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="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") meta(name="viewport" content="width=device-width, initial-scale=1.0")
body body
mixin nav mixin nav
@ -31,72 +31,72 @@ html
ul#mobile-nav.sidenav ul#mobile-nav.sidenav
+nav +nav
div.hide block content
block content
div#more .hide
a=__("layout.about") div#more
a=__("contact") a=__("layout.about")
a=__("contact")
div#dark.hide div#dark.hide
div#about.popup.card.hide div#about.popup.card.hide
h1=__("layout.about") h1=__("layout.about")
p=__("layout.aboutDescription") p=__("layout.aboutDescription")
div.images div.images
div div
img(src="/images/logoBio.png") img(src="/images/logoBio.png")
p=__("layout.bio") p=__("layout.bio")
div div
img(src="/images/logoChimie.png") img(src="/images/logoChimie.png")
p=__("layout.chemistry") p=__("layout.chemistry")
div div
img(src="/images/logoGC.png") img(src="/images/logoGC.png")
p=__("layout.GC") p=__("layout.GC")
div div
img(src="/images/logoGCGP.png") img(src="/images/logoGCGP.png")
p=__("layout.GCPD") p=__("layout.GCPD")
div div
img(src="/images/logoGEA.png") img(src="/images/logoGEA.png")
p=__("layout.GEA") p=__("layout.GEA")
div div
img(src="/images/logoInfo.png") img(src="/images/logoInfo.png")
p=__("layout.IT") p=__("layout.IT")
p.before-link=__("layout.made") p.before-link=__("layout.made")
a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix
p.before-link=__("layout.powered") p.before-link=__("layout.powered")
a(href="https://sapinet.fr" target="_blank") Sapinet a(href="https://sapinet.fr" target="_blank") Sapinet
div#contact.popup.card.hide div#contact.popup.card.hide
h1=__("contact") h1=__("contact")
form(action="/contact" method="POST") form(action="/contact" method="POST")
div.cont 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 div.field
label(for="firstNameContact")="* "+__("firstName") label(for="subjectContact")="* "+__("layout.subject")
input#firstNameContact(type="text" name="firstName" value=user?user.firstName:"" required) +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 div.field
label(for="lastNameContact")="* "+__("lastName") +submit(value=__("send"))
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"))
script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
script(src="/javascripts/layout.js") script(src="/javascripts/layout.js")

3
views/mixin.pug
View file

@ -1,6 +1,7 @@
mixin submit(value) mixin submit(value)
div.recaptcha.recaptcha-cb 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) mixin list(id, list, name, value="", autocomplete="on", required=false)
span.list_arrow span.list_arrow