Add modification + BDD structure

contact.sql

@@ -0,0 +1,70 @@
+-- phpMyAdmin SQL Dump
+-- version 4.8.3
+-- https://www.phpmyadmin.net/
+--
+-- Hôte : 127.0.0.1:3306
+-- Généré le :  mar. 27 nov. 2018 à 10:58
+-- Version du serveur :  5.7.23
+-- Version de PHP :  7.0.32
+
+SET SQL_MODE = "no_auto_value_on_zero";
+SET AUTOCOMMIT = 0;
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @`old_character_set_client` = @@`character_set_client` */;
+/*!40101 SET @`old_character_set_results` = @@`character_set_results` */;
+/*!40101 SET @`old_collation_connection` = @@`collation_connection` */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Base de données :  `contact`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `contact`
+--
+
+DROP TABLE IF EXISTS `contact`;
+CREATE TABLE IF NOT EXISTS `contact`
+(
+  `id`           INT(10) UNSIGNED                       NOT NULL AUTO_INCREMENT,
+  `first_name`   VARCHAR(255) COLLATE `utf8_unicode_ci` NOT NULL,
+  `last_name`    VARCHAR(255) COLLATE `utf8_unicode_ci` NOT NULL,
+  `surname`      VARCHAR(255) COLLATE `utf8_unicode_ci` DEFAULT NULL,
+  `email`        VARCHAR(255) COLLATE `utf8_unicode_ci` DEFAULT NULL,
+  `address`      VARCHAR(255) COLLATE `utf8_unicode_ci` DEFAULT NULL,
+  `phone_number` VARCHAR(255) COLLATE `utf8_unicode_ci` DEFAULT NULL,
+  `birthday`     DATE                                   DEFAULT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = `utf8`
+  COLLATE = `utf8_unicode_ci`;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `logs`
+--
+
+DROP TABLE IF EXISTS `logs`;
+CREATE TABLE IF NOT EXISTS `logs`
+(
+  `id`      INT(10)                                 NOT NULL AUTO_INCREMENT,
+  `level`   SMALLINT(5)                             NOT NULL,
+  `message` VARCHAR(2000) COLLATE `utf8_unicode_ci` NOT NULL,
+  `file`    VARCHAR(255) COLLATE `utf8_unicode_ci`  NOT NULL,
+  `line`    VARCHAR(6) COLLATE `utf8_unicode_ci`    NOT NULL,
+  `date`    DATETIME                                NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = `utf8`
+  COLLATE = `utf8_unicode_ci`;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT = @`old_character_set_client` */;
+/*!40101 SET CHARACTER_SET_RESULTS = @`old_character_set_results` */;
+/*!40101 SET COLLATION_CONNECTION = @`old_collation_connection` */;

src/View/Site/tpl/footer.php

@@ -4,7 +4,7 @@
 <div id="modal" class="md-modal">
     <div class="md-content">
 
-        <h3 class="md-header">Add contact</h3>
+        <h3 class="md-header md-title">Add contact</h3>
 
         <div class="md-container row">
             <form class="col s12">

static/js/javascript.js

@@ -23,9 +23,6 @@ let displayContacts = (contacts) => {
 
 $(document).ready(() => {
 
-    let modal = $('.modal');
-
-    modal.modal();
 
     let search = (query) => {
         if (query.length >= 2) {
@@ -81,7 +78,43 @@ $(document).ready(() => {
     });
 
     $(document).on("click", ".add-contacts", () => {
-        $("#modal").addClass("md-show");
+        let modal = $("#modal");
+
+        modal.find("input").each((i, e) => {
+            let $e = $(e);
+
+            $e.val("");
+            $e.removeClass("valid");
+            $e.removeClass("invalid");
+            $e.parent().find("label").removeClass("active");
+        });
+
+        modal.find(".md-title").text("Add Contact");
+        modal.removeAttr("data-id");
+        modal.addClass("md-show");
+    });
+
+    $(document).on("click", ".modify", function () {
+        let modal = $("#modal");
+        let $contact = $(this).closest("tr");
+        let id = parseInt($contact.attr("data-id"), 10);
+        let inputs = modal.find("input");
+        let td = $contact.find("td");
+
+        modal.find(".md-title").text("Modify Contact");
+        modal.attr("data-id", id);
+        modal.addClass("md-show");
+
+        for (let i = 0; i < 7; i++) {
+            let input = $(inputs[i]);
+            let value = $(td[i]).text();
+
+            input.val(value);
+            if (value !== "") {
+                input.addClass("valid");
+                input.parent().find("label").addClass("active");
+            }
+        }
     });
 
     $(document).on("click", "#md-cancel", () => {
@@ -89,6 +122,7 @@ $(document).ready(() => {
     });
 
     $(document).on("click", "#md-validate", () => {
+        let modal = $("#modal");
         let firstName = $("#first_name").val();
         let lastName = $("#last_name").val();
         let surname = $("#surname").val();
@@ -97,6 +131,10 @@ $(document).ready(() => {
         let phoneNumber = $("#phone_number").val();
         let birthday = $("#birthday").val();
 
+        let id = modal.attr("data-id");
+
+        console.log(modal, id);
+
         if (firstName !== "" && lastName !== "") {
             let data = {
                 firstName,
@@ -108,6 +146,28 @@ $(document).ready(() => {
                 birthday: (birthday !== "" ? birthday : null),
             };
 
+            if (id && parseInt(id, 10) > 0) {
+                id = parseInt(id, 10);
+                data["id"] = id;
+                $.ajax({
+                    url: "/api/contact/update",
+                    method: "POST",
+                    data,
+                    success: function (result) {
+                        result = JSON.parse(result);
+
+                        for (let i = 0; i < contacts.length; i++) {
+                            if (contacts[i].id === id) {
+                                contacts[i] = result;
+                            }
+                        }
+
+                        $("table tbody").empty();
+                        displayContacts(contacts);
+                        $("#modal").removeClass("md-show");
+                    }
+                })
+            } else {
                 $.ajax({
                     url: "/api/contact/insert",
                     method: "POST",
@@ -124,6 +184,7 @@ $(document).ready(() => {
                     }
                 });
             }
+        }
     });
 
     $(document).on("click", ".delete", function () {
@@ -143,4 +204,17 @@ $(document).ready(() => {
         })
     });
 
+    setInterval(() => {
+        $.ajax({
+            url: "/api/contact/get-contacts",
+            method: "GET",
+            success: function (data) {
+                contacts = JSON.parse(data).contacts;
+
+                $("table tbody").empty();
+                displayContacts(contacts);
+            }
+        })
+    }, 10000);
+
 });