ajout pizzalist, pizzathumb, Component

f600eaa4 · Alexis Degroote · 6a75fe82 · f600eaa4 · f600eaa4 · f600eaa4
Commit f600eaa4 authored 3 years ago by Alexis Degroote
--- a/.babelrc
+++ b/.babelrc
 {
-	"presets": ["@babel/env"]
+	"presets": [
+		["@babel/env", {"modules": false}]
+	]
 }
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 	<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>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src -d build",
+    "build": "webpack --mode=production",
-    "watch": "./node_modules/.bin/babel src -d build --verbose --watch --source-maps"
+    "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",
@@ -15,6 +15,9 @@
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
-    "prettier": "^2.5.1"
+    "babel-loader": "^8.2.3",
+    "prettier": "^2.5.1",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.2"
  }
 }
--- a/src/components/Component.js
+++ b/src/components/Component.js
+export default class Component {
+    tagName;
+	attribute;
+    children;
+    constructor(tagName, attribute, children){
+        this.tagName = tagName;
+		this.attribute = attribute;
+        this.children = children;
+    }
+    render(){
+        if (this.children && this.attribute == null) {
+            return `<${this.tagName}> ${this.renderChildren(this.children)} </${this.tagName}>`;
+        } else if (this.children && this.attribute){
+            return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"> ${this.renderChildren(this.children)} </${this.tagName}>`;
+        }else if (this.attribute && this.children == null){
+            return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" />`;
+        }
+        return `<${this.tagName} />`;;
+    }
+    renderChildren(children) {
+        if (children instanceof Array)
+            return children.map(this.renderChildren).join('');
+        if (children instanceof Component)
+            return children.render();
+        return children;
+    }
+}
--- a/src/components/Img.js
+++ b/src/components/Img.js
+import Component from "./Component.js";
+export default class Img extends Component{
+	nameImg;
+	constructor(nameImg){
+		super('img', {name:'src', value:nameImg}, null);
+	}
+}
--- a/src/components/PizzaThumbnail.js
+++ b/src/components/PizzaThumbnail.js
+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)} €` ),
+					]),
+				]),
+			]),
+		]);
+	}
+}
--- a/src/data.js
+++ b/src/data.js
+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;
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
-const data = [
+import data from './data.js';
-	{
+import Component from './components/Component.js';
-		name: 'Regina',
+import Img from './components/Img.js';
-		base: 'tomate',
+import PizzaThumbnail from './components/PizzaThumbnail.js';
-		price_small: 6.5,
+import PizzaList from './pages/PizzaList.js';
-		price_large: 9.95,
-		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+const title = new Component( 'h1', null, ['La carte'] );
-	},
+document.querySelector('.pageTitle').innerHTML = title.render();
-	{
-		name: 'Napolitaine',
+/*const pizza = data[1];
-		base: 'tomate',
+const pizzaThumbnail = new PizzaThumbnail(pizza);
-		price_small: 6.5,
+document.querySelector( '.pageContent' ).innerHTML = pizzaThumbnail.render();
-		price_large: 8.95,
+*/
-		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
-	},
+const pizzaList = new PizzaList(data);
-	{
+document.querySelector( '.pageContent' ).innerHTML = pizzaList.render();
-		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',
-	}
-];
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
+import Component from "../components/Component.js";
+import PizzaThumbnail from "../components/PizzaThumbnail.js";
+import data from "../data.js";
+export default class PizzaList extends Component{
+    pizzalist=[];
+    constructor(data){
+        let i = 0;
+        data.array.forEach(element => {
+            this.pizzalist[i] = new PizzaThumbnail(element);
+            i++;
+        });
+    }
+    render(){
+        return `<section class="pizzalist>${this.pizzalist.forEach(element => {
+            element.render();
+        })}</section>`
+    }
+}
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+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: 'cheap-source-map'
+}