Import all

2020-05-05 09:53:14 +02:00
parent 0e4c9c0fea
commit 7de4bab059
1411 changed files with 163444 additions and 0 deletions
--- a/Formations/NSI/Bloc1/WEB/SuperTable/index.html
+++ b/Formations/NSI/Bloc1/WEB/SuperTable/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <title>L'apprentissage de Linux</title>
+    </head>
+    <body>
+        <header>
+            <h1>Super table</h1>
+
+            <nav>
+            </nav>
+        </header>
+
+        <section id="corps">
+            <table id="table">
+                <thead>
+                    <tr>
+                        <th>Firstname</th>
+                        <th>Lastname</th>
+                        <th>Age</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="datatable">
+                </tbody>
+            </table> 
+             <button id="addRow" type="button">Ajouter ligne</button> 
+        </section>
+        <footer>
+        </footer>
+    </body>
+    <script src="script.js"></script>
+</html>
--- a/Formations/NSI/Bloc1/WEB/SuperTable/script.js
+++ b/Formations/NSI/Bloc1/WEB/SuperTable/script.js
@@ -0,0 +1,103 @@
+/* eslint-disable no-unused-vars */
+
+'use strict';
+
+let datas = [
+    {
+        firstname: "Jill",
+        lastname: "Smith",
+        age: 50
+    },
+    {
+        firstname: "Eve",
+        lastname: "Jackson",
+        age: 94
+    },
+]
+
+let editing = false;
+
+document.addEventListener('DOMContentLoaded', () => {
+    updateTable(datas);
+    //console.log(Array.from(document.getElementsByClassName('modifier')));
+    document.getElementById('addRow').onclick = () => appendQueryLine();
+}, false);
+
+function toggleEditing() {
+    editing = !editing
+}
+
+function feedDatas (datas) {
+    return datas.reduce( (acc, d) => {
+        return acc.concat(`<tr> 
+            <th>${d.firstname}</th>
+            <th>${d.lastname}</th>
+            <th>${d.age}</th>
+            <th><button class="modifier">Mod</button><button class="remover">Del</button></th>
+        </tr>`)
+    }, "")
+}
+
+function updateTable () {
+    let tbody = document.getElementById("datatable");
+    tbody.innerHTML = feedDatas(datas)
+    Array.from(document.getElementsByClassName('modifier')).map(d => d.onclick = () => modifyPersonne(d));
+}
+
+function appendQueryLine () {
+    if (!editing) {
+        editing = true
+        let tbody = document.getElementById("datatable");
+        tbody.innerHTML += `<tr>
+            <th><input id="firstname"></input></th>
+            <th><input id="lastname"></input></th>
+            <th><input id="age"></input></th>
+            <th><button id="save">Ok</button><button id="cancel">Ann</button></th>
+    </tr>`
+        document.getElementById('save').onclick= () => savePersonne();
+        document.getElementById('cancel').onclick= () => removeQueryLine();
+    } else {
+        console.log("Already editing")
+    }
+}
+
+function removeQueryLine () {
+    if (editing) {
+        feedDatas(datas)
+        updateTable()
+        toggleEditing()
+    }
+}
+
+function modifyPersonne (d) {
+    toggleEditing()
+    let cells = d.parentElement.parentElement.children
+
+    d.parentElement.innerHTML = `<button id="save">Ok</button><button id="cancel">Ann</button>`
+    document.getElementById('save').onclick= () => savePersonne();
+    document.getElementById('cancel').onclick= () => removeQueryLine();
+
+    let firstname = cells[0].firstChild.nodeValue
+    let lastname = cells[1].firstChild.nodeValue
+    let age = cells[2].firstChild.nodeValue
+
+    cells[0].innerHTML = `<input id="firstname" value=${firstname} ></input></th>`
+    cells[1].innerHTML = `<input id="lastname" value=${lastname} ></input></th>`
+    cells[2].innerHTML = `<input id="age" value=${age} ></input></th>`
+}
+
+function savePersonne () {
+    let firstname = document.getElementById("firstname");
+    let lastname = document.getElementById("lastname");
+    let age = document.getElementById("age");
+    datas.push(
+        {
+            firstname: firstname.value,
+            lastname: lastname.value,
+            age: age.value
+        }
+    )
+    updateTable()
+    toggleEditing()
+}
+
--- a/Formations/NSI/Bloc1/WEB/SuperTable/style.css
+++ b/Formations/NSI/Bloc1/WEB/SuperTable/style.css
@@ -0,0 +1,53 @@
+body
+{
+    margin: auto;
+    overflow: hidden;
+}
+
+section
+{
+    height: 100vh;
+}
+
+
+thead
+{
+    background-color: #333;
+    color: #fff;
+}
+
+th
+{
+    width: 100px;
+}
+
+input
+{
+    width: 90px;
+}
+
+button
+{
+    width: 100px;
+}
+
+#mod 
+{
+    background-color: yellow;
+}
+
+#del 
+{
+    background-color: red;
+}
+
+#cancel 
+{
+    background-color: red;
+}
+
+#save 
+{
+    background-color: yellow;
+}
+