Skip to content
Snippets Groups Projects
Commit f1177f57 authored by KHARMACH's avatar KHARMACH
Browse files

TP4 fini

parent 6f2c3a86
Branches master
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html
+ 1
− 4
View file @ f1177f57
......@@ -32,10 +32,7 @@
</nav>
</header>
<section class="newsContainer" style="display:none">
<article>
<button class="closeButton"></button>
<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
</article>
</section>
<section class="pageContainer">
<header class="pageTitle"></header>
......
news.html 0 → 100644
+ 10
− 0
View file @ f1177f57
<article>
<button class="closeButton"></button>
<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
<p>
Découvrez notre nouvelle pizza
<strong class="spicy">Spicy</strong>
<br/>
aux délicieuses saveurs épicées !
</p>
</article>
package-lock.json
+ 52
− 99
View file @ f1177f57
......@@ -1108,9 +1108,9 @@
"dev": true
},
"@types/node": {
"version": "14.14.22",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz",
"integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==",
"version": "14.14.31",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
"integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==",
"dev": true
},
"@webassemblyjs/ast": {
......@@ -1260,24 +1260,24 @@
}
},
"@webpack-cli/configtest": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.0.tgz",
"integrity": "sha512-Un0SdBoN1h4ACnIO7EiCjWuyhNI0Jl96JC+63q6xi4HDUYRZn8Auluea9D+v9NWKc5J4sICVEltdBaVjLX39xw==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.1.tgz",
"integrity": "sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==",
"dev": true
},
"@webpack-cli/info": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.1.tgz",
"integrity": "sha512-fLnDML5HZ5AEKzHul8xLAksoKN2cibu6MgonkUj8R9V7bbeVRkd1XbGEGWrAUNYHbX1jcqCsDEpBviE5StPMzQ==",
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.2.tgz",
"integrity": "sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==",
"dev": true,
"requires": {
"envinfo": "^7.7.3"
}
},
"@webpack-cli/serve": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.2.2.tgz",
"integrity": "sha512-03GkWxcgFfm8+WIwcsqJb9agrSDNDDoxaNnexPnCCexP5SCE4IgFd9lNpSy+K2nFqVMpgTFw6SwbmVAVTndVew==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.3.0.tgz",
"integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
"dev": true
},
"@xtuc/ieee754": {
......@@ -1986,15 +1986,15 @@
}
},
"envinfo": {
"version": "7.7.3",
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.3.tgz",
"integrity": "sha512-46+j5QxbPWza0PB1i15nZx0xQ4I/EfQxg9J8Had3b408SV63nEtor2e+oiY63amTo9KTuh2a3XLObNwduxYwwA==",
"version": "7.7.4",
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
"integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==",
"dev": true
},
"es-module-lexer": {
"version": "0.3.26",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz",
"integrity": "sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==",
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.0.tgz",
"integrity": "sha512-iuEGihqqhKWFgh72Q/Jtch7V2t/ft8w8IPP2aEN8ArYKO+IWyo6hsi96hCdgyeEDQIV3InhYQ9BlwUFPGXrbEQ==",
"dev": true
},
"escalade": {
......@@ -2049,9 +2049,9 @@
"dev": true
},
"events": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
"integrity": "sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==",
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true
},
"execa": {
......@@ -2849,18 +2849,18 @@
}
},
"mime-db": {
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
"version": "1.46.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
"integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==",
"dev": true
},
"mime-types": {
"version": "2.1.28",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
"version": "2.1.29",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
"integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
"dev": true,
"requires": {
"mime-db": "1.45.0"
"mime-db": "1.46.0"
}
},
"mimic-fn": {
......@@ -3308,12 +3308,12 @@
"optional": true
},
"resolve": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
"integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true,
"requires": {
"is-core-module": "^2.1.0",
"is-core-module": "^2.2.0",
"path-parse": "^1.0.6"
}
},
......@@ -3682,9 +3682,9 @@
"dev": true
},
"terser": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.6.0.tgz",
"integrity": "sha512-vyqLMoqadC1uR0vywqOZzriDYzgEkNJFK4q9GeyOBHIbiECHiWLKcWfbQWAUaPfxkjDhapSlZB9f7fkMrvkVjA==",
"dev": true,
"requires": {
"commander": "^2.20.0",
......@@ -3935,9 +3935,9 @@
"dev": true
},
"watchpack": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.0.tgz",
"integrity": "sha512-UjgD1mqjkG99+3lgG36at4wPnUXNvis2v1utwTgQ43C22c4LD71LsYMExdWXh4HZ+RmW+B0t1Vrg2GpXAkTOQw==",
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
"integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==",
"dev": true,
"requires": {
"glob-to-regexp": "^0.4.1",
......@@ -3945,9 +3945,9 @@
}
},
"webpack": {
"version": "5.18.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.18.0.tgz",
"integrity": "sha512-RmiP/iy6ROvVe/S+u0TrvL/oOmvP+2+Bs8MWjvBwwY/j82Q51XJyDJ75m0QAGntL1Wx6B//Xc0+4VPP/hlNHmw==",
"version": "5.24.2",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.24.2.tgz",
"integrity": "sha512-uxxKYEY4kMNjP+D2Y+8aw5Vd7ar4pMuKCNemxV26ysr1nk0YDiQTylg9U3VZIdkmI0YHa0uC8ABxL+uGxGWWJg==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.0",
......@@ -3959,7 +3959,7 @@
"browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.7.0",
"es-module-lexer": "^0.3.26",
"es-module-lexer": "^0.4.0",
"eslint-scope": "^5.1.1",
"events": "^3.2.0",
"glob-to-regexp": "^0.4.1",
......@@ -3968,7 +3968,6 @@
"loader-runner": "^4.2.0",
"mime-types": "^2.1.27",
"neo-async": "^2.6.2",
"pkg-dir": "^5.0.0",
"schema-utils": "^3.0.0",
"tapable": "^2.1.1",
"terser-webpack-plugin": "^5.1.1",
......@@ -3976,52 +3975,6 @@
"webpack-sources": "^2.1.1"
},
"dependencies": {
"find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
"dev": true,
"requires": {
"locate-path": "^6.0.0",
"path-exists": "^4.0.0"
}
},
"locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
"dev": true,
"requires": {
"p-locate": "^5.0.0"
}
},
"p-limit": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
"dev": true,
"requires": {
"yocto-queue": "^0.1.0"
}
},
"p-locate": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
"dev": true,
"requires": {
"p-limit": "^3.0.2"
}
},
"pkg-dir": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
"integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
"dev": true,
"requires": {
"find-up": "^5.0.0"
}
},
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
......@@ -4036,17 +3989,17 @@
}
},
"webpack-cli": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.4.0.tgz",
"integrity": "sha512-/Qh07CXfXEkMu5S8wEpjuaw2Zj/CC0hf/qbTDp6N8N7JjdGuaOjZ7kttz+zhuJO/J5m7alQEhNk9lsc4rC6xgQ==",
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
"integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
"dev": true,
"requires": {
"@discoveryjs/json-ext": "^0.5.0",
"@webpack-cli/configtest": "^1.0.0",
"@webpack-cli/info": "^1.2.1",
"@webpack-cli/serve": "^1.2.2",
"@webpack-cli/configtest": "^1.0.1",
"@webpack-cli/info": "^1.2.2",
"@webpack-cli/serve": "^1.3.0",
"colorette": "^1.2.1",
"commander": "^6.2.0",
"commander": "^7.0.0",
"enquirer": "^2.3.6",
"execa": "^5.0.0",
"fastest-levenshtein": "^1.0.12",
......@@ -4058,9 +4011,9 @@
},
"dependencies": {
"commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.1.0.tgz",
"integrity": "sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==",
"dev": true
}
}
......
package.json
+ 2
− 2
View file @ f1177f57
......@@ -18,7 +18,7 @@
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.18.0",
"webpack-cli": "^4.4.0"
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
}
}
pizzaland-jar-with-dependencies.jar 0 → 100644
+ 0
− 0
View file @ f1177f57
File added
src/data.js deleted 100644 → 0
+ 0
− 27
View file @ 6f2c3a86
const data = [
{
name: 'Regina',
base: 'tomate',
price_small: 6.5,
price_large: 9.95,
image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
},
{
name: 'Napolitaine',
base: 'tomate',
price_small: 6.5,
price_large: 8.95,
image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
},
{
name: 'Spicy',
base: 'crème',
price_small: 5.5,
price_large: 8,
image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
];
export default data;
src/main.js
+ 21
− 5
View file @ f1177f57
import Router from './Router';
import data from './data';
import PizzaList from './pages/PizzaList';
import PizzaForm from './pages/PizzaForm';
import Component from './components/Component';
......@@ -18,7 +18,7 @@ Router.routes = [
];
// Router.navigate('/'); // affiche une page vide
pizzaList.pizzas = data;
// Router.navigate('/'); // affiche la liste des pizzas
// B.1. Sélectionner des éléments
......@@ -40,16 +40,18 @@ document.querySelector(
// );
// C.2. Navigation en JS : afficher/masquer un élément
const newsContainer = document.querySelector('.newsContainer'),
closeButton = newsContainer.querySelector('.closeButton');
const newsContainer = document.querySelector('.newsContainer');
// affichage du bandeau de news
/*
newsContainer.style.display = '';
// gestion du bouton fermer
closeButton.addEventListener('click', event => {
event.preventDefault();
newsContainer.style.display = 'none';
});
*/
// E.3. Deeplinking
// détection des boutons précédent/suivant du navigateur :
// on lit l'url courante dans la barre d'adresse et on l'envoie au Router
......@@ -57,3 +59,17 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false);
// affichage de la page initiale :
// même traitement que lors de l'appui sur les boutons précédent/suivant
window.onpopstate();
function displayNews(html) {
newsContainer.innerHTML += html;
newsContainer.style.display = '';
const closeButton = newsContainer.querySelector('.closeButton');
closeButton.addEventListener('click', event => {
event.preventDefault();
newsContainer.style.display = 'none';
});
}
fetch('./news.html')
.then(response => response.text())
.then(displayNews);
src/pages/PizzaForm.js
+ 32
− 1
View file @ f1177f57
......@@ -8,6 +8,19 @@ export default class AddPizzaPage extends Page {
Nom :
<input type="text" name="name">
</label>
<label>
Image :<br/>
<input type="text" name="image" placeholder="https://source.unsplash.com/xxxxxxx/600x600">
<small>Vous pouvez trouver des images de pizza sur <a href="https://unsplash.com/">https://unsplash.com/</a> puis utiliser l'URL <code>https://source.unsplash.com/xxxxxxx/600x600</code> où <code>xxxxxxx</code> est l'id de la photo choisie (celui dans la barre d'adresse)</small>
</label>
<label>
Prix petit format :
<input type="number" name="price_small" step="0.05">
</label>
<label>
Prix grand format :
<input type="number" name="price_large" step="0.05">
</label>
<button type="submit">Ajouter</button>
</form>`;
}
......@@ -24,12 +37,30 @@ export default class AddPizzaPage extends Page {
submit() {
// D.4. La validation de la saisie
const nameInput = this.element.querySelector('input[name="name"]'),
name = nameInput.value;
imageInput = this.element.querySelector('input[name="image"]'),
priceSmallInput = this.element.querySelector('input[name="price_small"]'),
priceLargeInput = this.element.querySelector('input[name="price_large"]'),
name = nameInput.value,
image = imageInput.value,
priceSmall = parseFloat(priceSmallInput.value),
priceLarge = parseFloat(priceLargeInput.value);
if (name === '') {
alert('Erreur : le champ "Nom" est obligatoire');
return;
}
fetch('http://localhost:8080/api/v1/pizzas', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: `${name}`,
image: `${image}`,
price_small: `${priceSmall}`,
price_large: `${priceLarge}`,
}),
});
alert(`La pizza ${name} a été ajoutée !`);
nameInput.value = '';
document.location.href = 'http://localhost:8000';
}
}
src/pages/PizzaList.js
+ 8
− 0
View file @ f1177f57
......@@ -13,4 +13,12 @@ export default class PizzaList extends Page {
this.#pizzas = value;
this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
}
mount(element) {
super.mount(element);
fetch('http://localhost:8080/api/v1/pizzas')
.then(response => response.json())
.then(pizzasList => (this.pizzas = pizzasList))
.then(res => (element.innerHTML = this.render()));
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment