ajout tp3

js/PageRenderer.js

@@ -9,5 +9,6 @@ export default class PageRenderer {
 		if (this.contentElement) {
 			this.contentElement.innerHTML = page.render();
 		}
+		page.mount(this.contentElement);
 	}
 }

js/main.js

 import data from './data.js';
 import HomePage from './pages/HomePage.js';
 import PageRenderer from './PageRenderer.js';
+import AddPizzaPage from './pages/AddPizzaPage.js';
 
 // Initialisation du PageRenderer
 PageRenderer.titleElement = document.querySelector('.pageTitle');
@@ -8,10 +9,92 @@ PageRenderer.contentElement = document.querySelector('.pizzasContainer');
 
 // Affichage de la HomePage
 const homePage = new HomePage(data);
+const pizzaPage = new AddPizzaPage();
 PageRenderer.renderPage(homePage); // affiche la liste des pizzas
+
+pizzaPage.onSubmit = function(
+	nom,
+	base,
+	image,
+	prix_petite,
+	prix_grande,
+	ingredients
+) {
+	const pizza = {
+		nom,
+		base,
+		prix_petite: Number(prix_petite),
+		prix_grande: Number(prix_grande),
+		image,
+	};
+	data.push(pizza);
+	homePage.pizzas = data;
+	PageRenderer.renderPage(homePage);
+};
+
 //
 // On aurait aussi pu faire ceci :
 //
 // const homePage = new HomePage([]);
 // homePage.pizzas = data;
 // PageRenderer.renderPage(homePage); // affiche la liste des pizzas
+
+// --- Partie A --- //
+//console.log(document.querySelector('.pageTitle'));
+//console.log(document.querySelector('img'));
+//console.log(document.querySelector('.pizzaFormButton'));
+//console.log(document.querySelector('footer a'));
+//console.log(document.querySelector('h4'));
+//console.log(document.querySelectorAll('li a'));
+//console.log(document.querySelectorAll('section ul li'));
+
+document.querySelector(
+	'.navbar-brand'
+).innerHTML += `<small class="label label-success">les pizzas c'est la vie</small>`;
+document.querySelector('h4').innerHTML = `<h4>Savoyarde</h4>`;
+document.querySelector('li').setAttribute('class', 'active');
+
+console.log(document.querySelectorAll('footer a')[1]);
+
+function handleClick(event) {
+	event.preventDefault();
+	console.log(event);
+}
+const link = document.querySelector('a');
+link.addEventListener('click', handleClick);
+
+function messageClick(event) {
+	event.preventDefault();
+	console.log(event.currentTarget.innerHTML);
+	document.querySelectorAll('.navbar-right li').forEach(element => {
+		element.setAttribute('class', '');
+	});
+	event.currentTarget.setAttribute('class', 'active');
+}
+
+document.querySelectorAll('.navbar-right li').forEach(element => {
+	element.addEventListener('click', messageClick);
+});
+
+document
+	.querySelector('.newsContainer')
+	.setAttribute('style', 'display:initial');
+
+function closeNewsContainer(event) {
+	event.preventDefault();
+	document
+		.querySelector('.newsContainer')
+		.setAttribute('style', 'display:none');
+}
+
+function showAddPizza(event) {
+	PageRenderer.renderPage(pizzaPage);
+}
+
+document
+	.querySelector('.closeButton')
+	.addEventListener('click', closeNewsContainer);
+
+document
+	.querySelector('.pizzaFormButton')
+	.addEventListener('click', showAddPizza);

js/pages/AddPizzaPage.js

+import Page from './Page.js';
+import PageRenderer from '../PageRenderer.js';
+
+export default class AddPizzaPage extends Page {
+	onSubmit;
+
+	constructor() {
+		super('Ajouter une pizza');
+		this.submit = this.submit.bind(this);
+	}
+
+	render() {
+		return /*html*/ `
+        <form class="addPizzaPage">
+        <label>
+            Nom :
+            <input type="text" name="nom" class="form-control">
+        </label>
+        <label>
+            Base :
+            <select name="base" class="form-control">
+                <option>Tomate</option>
+                <option>Crème</option>
+            </select>
+        </label>
+        <label>
+            Image :
+            <input type="text" name="image" class="form-control" placeholder="https://...">
+        </label>
+        <label>
+            Prix petit format :
+            <input type="number" name="prix_petite" class="form-control" step="0.05">
+        </label>
+        <label>
+            Prix grand format :
+            <input type="number" name="prix_grande" class="form-control" step="0.05">
+        </label>
+        <label>
+            Ingrédients :
+            <select name="ingredients" multiple="true" class="form-control">
+                <option value="1">Mozzarella</option>
+                <option value="2">Jambon</option>
+                <option value="3">Champignon</option>
+                <option value="4">Olives</option>
+            </select>
+        </label>
+        <button type="submit" class="btn btn-default">Ajouter</button>
+        <a class="btn btn-default btn-ingredient">Ajouter Ingrédients</a>
+    </form>
+    `;
+	}
+
+	renderIngredient() {
+		return /*html*/ `
+        <form class="addIngredientPage">
+        <label>
+            Nom :
+            <input type="text" name="nom" class="form-control">
+        </label>
+        <button type="submit" class="btn btn-default">Ajouter</button>
+    </form>
+    `;
+	}
+
+	mount(element) {
+		const form = document.querySelector('.addPizzaPage');
+		form.addEventListener('submit', this.submit);
+		const pageIngredient = this.renderIngredient();
+		document.querySelector('.btn-ingredient');
+	}
+
+	submit(event) {
+		event.preventDefault();
+		const nom = document.querySelector('input[name="nom"]').value;
+		const base = document.querySelector('select[name="base"]').selectedOptions;
+		const image = document.querySelector('input[name="image"]').value;
+		const prix_petite = document.querySelector('input[name="prix_petite"]')
+			.value;
+		const prix_grande = document.querySelector('input[name="prix_grande"]')
+			.value;
+		const ingredients = document.querySelector('select[name="ingredients"]')
+			.selectedOptions;
+
+		if (
+			nom == '' ||
+			base.length == 0 ||
+			image == '' ||
+			prix_petite == '' ||
+			prix_grande == '' ||
+			ingredients.length == 0
+		) {
+			alert('Il manque des valeurs Timothé');
+		} else {
+			console.log(
+				"Demande d'ajout de :" +
+					nom +
+					base +
+					image +
+					prix_petite +
+					prix_grande +
+					ingredients
+			);
+			event.currentTarget.reset();
+			debugger;
+			this.onSubmit(nom, base, image, prix_petite, prix_grande, ingredients);
+		}
+	}
+}

js/pages/Page.js

@@ -11,4 +11,12 @@ export default class Page extends Component {
 	renderTitle() {
 		return `<h1>${this.title}</h1>`;
 	}
+
+	mount(element) {
+		// Cette méthode sera appelée par PageRenderer après chaque render()
+		// par défaut, cette méthode ne fait rien
+		// ce sont les classes filles qui devront surcharger cette méthode
+	}
+
 }
+