Skip to content
Snippets Groups Projects
Commit 4a2ecd75 authored by Thomas OBRY's avatar Thomas OBRY
Browse files

arrivé à router (c dur zebi)

parent cb202be9
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1545 additions and 202 deletions
.babelrc
+ 4
− 1
View file @ 4a2ecd75
{
"presets": ["@babel/env"]
"presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
.vscode/.prettierrc 0 → 100644
+ 8
− 0
View file @ 4a2ecd75
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"tabWidth": 8,
"arrowParens": "avoid"
}
\ No newline at end of file
.vscode/settings.json 0 → 100644
+ 6
− 0
View file @ 4a2ecd75
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
\ No newline at end of file
index.html
+ 61
− 37
View file @ 4a2ecd75
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PizzaLand</title>
<link rel="icon" href="images/icon.png" sizes="96x96">
<link rel="icon" href="images/icon.png" sizes="96x96" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/news.css">
<link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/news.css" />
<link rel="stylesheet" href="css/pizzaList.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="build/main.js" defer></script>
<script src="build/main.bundle.js" defer></script>
</head>
<body>
<header>
......@@ -26,7 +26,9 @@
<ul class="mainMenu">
<li><a href="/" class="pizzaListLink">La carte</a></li>
<li><a href="/a-propos" class="aboutLink">À propos</a></li>
<li><a href="/ajouter-pizza" class="pizzaFormLink">Ajouter une pizza</a></li>
<li>
<a href="/ajouter-pizza" class="pizzaFormLink">Ajouter une pizza</a>
</li>
</ul>
</nav>
</header>
......@@ -35,9 +37,31 @@
<div class="pageContent"></div>
</section>
<footer>
<div>Une (incroyable) création originale de <a href="http://uidlt.fr">Thomas Fritsch</a> pour l'<a href="https://www.iut-a.univ-lille.fr/">IUT A</a> de l'<a href="https://www.univ-lille.fr/">Université de Lille</a></div>
<div>Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a></div>
<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
<div>
Une (incroyable) création originale de
<a href="http://uidlt.fr">Thomas Fritsch</a> pour l'<a
href="https://www.iut-a.univ-lille.fr/"
>IUT A</a
>
de l'<a href="https://www.univ-lille.fr/">Université de Lille</a>
</div>
<div>
Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a>
</div>
<div>
Icons made by
<a href="https://www.freepik.com/" title="Freepik">Freepik</a> from
<a href="https://www.flaticon.com/" title="Flaticon"
>www.flaticon.com</a
>
is licensed by
<a
href="http://creativecommons.org/licenses/by/3.0/"
title="Creative Commons BY 3.0"
target="_blank"
>CC 3.0 BY</a
>
</div>
</footer>
</body>
</html>
package-lock.json
+ 1261
− 18
View file @ 4a2ecd75
This diff is collapsed.
package.json
+ 22
− 15
View file @ 4a2ecd75
......@@ -4,7 +4,9 @@
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"watch": "webpack --mode=development --watch"
},
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js",
......@@ -12,6 +14,11 @@
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11"
"@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.20.0",
"webpack-cli": "^4.5.0"
}
}
src/Router.js 0 → 100644
+ 27
− 0
View file @ 4a2ecd75
import Component from "./components/Component.js";
import Img from "./components/Img.js";
import PizzaThumbnail from "./components/PizzaThumbnail.js";
import PizzaList from "./pages/PizzaList.js";
import data from "./data.js";
export default class Router {
static titleElement;
static contentElement;
static routes;
navigate(path) {
titleElement.innerHTML = ;
}
}
/*
const title = new Component("h1", null, ["La", " ", "carte"]);
document.querySelector(".pageTitle").innerHTML = title.render();
const pizzaList = new PizzaList(data);
document.querySelector(".pageContent").innerHTML = pizzaList.render();
console.log("pizzalist = " + pizzaList.render());
*/
src/components/Component.js 0 → 100644
+ 31
− 0
View file @ 4a2ecd75
export default class Component {
constructor(tagname, attribute, children) {
this.tagname = tagname;
this.attribute = attribute;
this.children = children;
}
render() {
if (this.children)
return `<${
this.tagname
} ${this.renderAttribute()}>${this.renderChildren()}</${this.tagname}>`;
else return `<${this.tagname} ${this.renderAttribute()}"/>`;
}
renderAttribute() {
if (this.attribute != null)
return `${this.attribute.name}="${this.attribute.value}"`;
}
renderChildren() {
if (this.children instanceof Array) {
let string = "";
this.children.forEach((element) => {
string += this.renderChild(element);
});
return string;
} else return this.renderChild(this.children);
}
renderChild(element) {
if (element instanceof Component) return element.render();
else return element;
}
}
src/components/Img.js 0 → 100644
+ 6
− 0
View file @ 4a2ecd75
import Component from "./Component.js";
export default class Img extends Component {
constructor(value) {
super("img", { name: "src", value: `${value}` });
}
}
src/components/PizzaThumbnail.js 0 → 100644
+ 27
− 0
View file @ 4a2ecd75
import Component from "./Component.js";
import Img from "./Img.js";
export default class PizzaThumbnail extends Component {
constructor({ name, image, price_small, price_large }) {
super("article", { name: "class", value: "pizzaThumbnail" }, [
new Component("a", { name: "href", value: image }, [
new Img(image),
new Component("section", null, [
new Component("h4", null, name),
new Component("ul", null, [
new Component(
"li",
null,
`Prix petit format : ${price_small.toFixed(2)} €`
),
new Component(
"li",
null,
`Prix grand format : ${price_large.toFixed(2)} €`
),
]),
]),
]),
]);
}
}
src/data.js 0 → 100644
+ 27
− 0
View file @ 4a2ecd75
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
+ 24
− 131
View file @ 4a2ecd75
// D. Manipulation des chaînes
// const name = 'Regina';
// const url = `images/${name.toLowerCase()}.jpg`;
// const html = `
// <article class="pizzaThumbnail">
// <a href="${url}">
// <img src="${url}" />
// <section>${name}</section>
// </a>
// </article>
// `;
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Manipulation des tableaux
// let data = [ 'Regina', 'Napolitaine', 'Spicy' ];
// html = '';
// // E.1. boucle for :
// for (let i = 0; i < data.length; i++) {
// const nom = data[i],
// url = `images/${nom.toLowerCase()}.jpg`;
// html += `<article class="pizzaThumbnail">
// <a href="${url}">
// <img src="${url}" />
// <section>${nom}</section>
// </a>
// </article>`;
// }
// document.querySelector('.pageContent').innerHTML = html;
// E.1. Array.forEach :
// html = '';
// data.forEach( nom => {
// const url = `images/${nom.toLowerCase()}.jpg`;
// html += `<a href="${url}">
// <img src="${url}" />
// <h4>${nom}</h4>
// </a>`;
// })
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Array.map + Array.join :
// html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg">
// <img src="images/${nom.toLowerCase()}.jpg" />
// <h4>${nom}</h4>
// </a>`).join('');
// document.querySelector('.pageContent').innerHTML = html;
// // E.1. Array.reduce :
// html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg">
// <img src="images/${nom.toLowerCase()}.jpg" />
// <h4>${nom}</h4>
// </a>`,'');
// document.querySelector('.pageContent').innerHTML = html;
// E.2. Les objets littéraux
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',
}
];
function render(pizzas) {
const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
`<article class="pizzaThumbnail">
<a href="${image}">
<img src="${image}" />
<section>
<h4>${name}</h4>
<ul>
<li>Prix petit format : ${price_small.toFixed(2)} €</li>
<li>Prix grand format : ${price_large.toFixed(2)} €</li>
</ul>
</section>
</a>
</article>`, '');
document.querySelector('.pageContent').innerHTML = html;
}
// G.1. Tri de tableaux
function sortByName(a, b) {
if ( a.name < b.name ) {
return -1;
} else if ( a.name > b.name ) {
return 1;
}
return 0;
}
// tri par price_small croissant PUIS par price_large croissant
function sortByPrice(a, b) {
if ( a.price_small !== b.price_small ) {
return a.price_small - b.price_small;
}
return a.price_large - b.price_large;
}
// // Attention : data.sort() modifie le tableau original
render( data );
// render( data.sort(sortByName) );
// render( data.sort(sortByPrice) );
// // G.2. Système de filtre
// render( data.filter( pizza => pizza.base == 'tomate' ))
// render( data.filter( pizza => pizza.price_small < 6 ))
// // deux possibilités pour les pizzas avec deux fois la lettre "i"
// render( data.filter( pizza => pizza.name.split('i').length == 3 ))
// render( data.filter( pizza => pizza.name.match(/i/g).length == 2 ))
// // G.3. Destructuring
// render( data.filter( ({base}) => base == 'tomate' ))
// render( data.filter( ({price_small}) => price_small < 6 ))
// render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
import Component from "./components/Component.js";
import Img from "./components/Img.js";
import PizzaThumbnail from "./components/PizzaThumbnail.js";
import PizzaList from "./pages/PizzaList.js";
import data from "./data.js";
import Router from "./Router.js";
const c = new Component("article", { name: "class", value: "pizzaThumbnail" }, [
new Img(
"https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300"
),
"Regina",
]);
const title = new Component("h1", null, ["La", " ", "carte"]);
document.querySelector(".pageTitle").innerHTML = title.render();
const pizzaList = new PizzaList(data);
document.querySelector(".pageContent").innerHTML = pizzaList.render();
console.log("pizzalist = " + pizzaList.render());
Router.titleElement = document.querySelector(".pageTitle");
Router.contentElement = document.querySelector(".pageContent");
Router.routes = [{ path: "/", page: pizzaList, title: "La carte" }];
src/pages/PizzaList.js 0 → 100644
+ 14
− 0
View file @ 4a2ecd75
import Component from "../components/Component.js";
import PizzaThumbnail from "./../components/PizzaThumbnail.js";
export default class PizzaList extends Component {
constructor(data) {
super("section", { name: "class", value: "pizzaList" }, data);
}
renderChildren() {
let html = "";
this.children.forEach((element) => {
html += new PizzaThumbnail(element).render();
});
return html;
}
}
webpack.config.js 0 → 100644
+ 27
− 0
View file @ 4a2ecd75
const path = require("path");
module.exports = {
// Fichier d'entrée :
entry: "./src/main.js",
// Fichier de sortie :
output: {
path: path.resolve(__dirname, "./build"),
filename: "main.bundle.js",
},
// compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
target: ["web", "es5"],
// connexion webpack <-> babel :
module: {
rules: [
{
test: /\.js$/, // tous les fichiers js ...
exclude: /node_modules/, // ... sauf le dossier node_modules ...
use: {
// ... seront compilés par babel !
loader: "babel-loader",
},
},
],
},
devtool: "source-map",
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment