Add robots.txt

Rename for case sensitive
Optimize search engine
Remove useless options htaccess
Add Modal
Add delete, add contact

.htaccess

@@ -1,5 +1,3 @@
-Options +FollowSymlinks
-
 RewriteEngine on
 RewriteBase /
 

index.php

@@ -12,10 +12,10 @@ date_default_timezone_set( 'Europe/Paris' );
 setlocale( LC_TIME, "fr_FR.UTF-8" );
 error_reporting( E_ALL );
 
-require( 'src/lib/functions.php' );
+require( "src/lib/functions.php" );
-require( 'src/config.php' );
+require( "src/Config.php" );
 
-require 'src/Autoloader.php';
+require( "src/Autoloader.php" );
 Autoloader::register();
 
 new BDD();

robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/API/APIContact.php

@@ -172,7 +172,7 @@ class APIContact extends API {
     }
 
     public function search( array $data ) {
-        if ( count_chars( $data[ "query" ] ) >= 3 ) {
+        if ( count_chars( $data[ "query" ] ) >= 2 ) {
             $result = Contact::search( $data[ "query" ] );
             if ( $result !== null ) {
                 $this->returnJson( [

src/Config.php

@@ -3,8 +3,8 @@
 namespace CAUProject3Contact;
 
 class Config {
-    const SITE_JS_VERSION = '0.01';
+    const SITE_JS_VERSION = '0.02';
-    const SITE_CSS_VERSION = '0.01';
+    const SITE_CSS_VERSION = '0.02';
 
     const TITLE_HEADER = 'Your contact';
     const DESCRIPTION_HEADER = 'Manage your contact easly';

src/Model/BDD.php

@@ -8,16 +8,16 @@ use PDO;
 class BDD {
 
     // Server BDD
-//    const SQL_SERVER = 'sql.sanchez-mathieu.fr';    // BDD Server
+    const SQL_SERVER = 'sql.sanchez-mathieu.fr';    // BDD Server
-//    const SQL_LOGIN = 'why7n0_contact';             // BDD Login
+    const SQL_LOGIN = 'why7n0_contact';             // BDD Login
-//    const SQL_PASSWORD = 'fC3c87Gy';                // BDD Password
+    const SQL_PASSWORD = 'fC3c87Gy';                // BDD Password
-//    const SQL_DB = 'why7n0_contact';                // BDD Name
+    const SQL_DB = 'why7n0_contact';                // BDD Name
 
     // Local BDD
-    const SQL_SERVER = 'localhost';     // BDD Server
+//    const SQL_SERVER = 'localhost';     // BDD Server
-    const SQL_LOGIN = 'root';           // BDD Login
+//    const SQL_LOGIN = 'root';           // BDD Login
-    const SQL_PASSWORD = '';            // BDD Password
+//    const SQL_PASSWORD = '';            // BDD Password
-    const SQL_DB = 'contact';           // BDD Name
+//    const SQL_DB = 'contact';           // BDD Name
 
     private static $bdd;
 

src/Model/Contact.php

@@ -93,7 +93,7 @@ class Contact {
         $lastKey = endKey( $words );
         foreach ( $words as $key => $word ) {
             $normal = self::getQuerySearch( $word, [ "first_name", "last_name", "surname" ] );;
-            $hard = self::getQuerySearch( $word, [ "email", "address", "phone_number" ] );
+            $hard = self::getQuerySearch( $word, [ "email", "address", "phone_number", "birthday" ] );
             $q1 .= $normal;
             $q2 .= $normal;
             $q3 .= $hard;

src/View/Site/Index.php

@@ -2,7 +2,7 @@
 
     <div class="row">
         <div class="col s12 main-container">
-            <table class="highlight centered">
+            <table class="highlight centered responsive-table">
                 <thead>
                 <tr>
                     <th>First Name</th>
@@ -12,12 +12,13 @@
                     <th>Address</th>
                     <th>Phone Number</th>
                     <th>Birthday</th>
+                    <th colspan="2"></th>
                 </tr>
                 </thead>
                 <tbody>
                 <?php
                 foreach ( $contacts as $contact ) {
-                    echo "<tr>";
+                    echo "<tr data-id='" . $contact->getId() . "'>";
                     echo "  <td>" . $contact->getFirstName() . "</td>";
                     echo "  <td>" . $contact->getLastName() . "</td>";
                     echo "  <td>" . ( $contact->getSurname() ? $contact->getSurname() : "" ) . "</td>";
@@ -25,6 +26,8 @@
                     echo "  <td>" . ( $contact->getAddress() ? $contact->getAddress() : "" ) . "</td>";
                     echo "  <td>" . ( $contact->getPhoneNumber() ? $contact->getPhoneNumber() : "" ) . "</td>";
                     echo "  <td>" . ( $contact->getBirthday() ? date( "Y-m-d", strtotime( $contact->getBirthday() ) ) : "" ) . "</td>";
+                    echo "  <td><i class=\"material-icons left modify\">create</i></td>";
+                    echo "  <td><i class=\"material-icons left delete\">delete</i></td>";
                     echo "</tr>";
                 }
                 ?>

src/View/Site/tpl/footer.php

@@ -1,16 +1,55 @@
 </div>
 </main>
 
-<div id="modal" class="modal modal-fixed-footer">
+<div id="modal" class="md-modal">
-    <div class="modal-content">
+    <div class="md-content">
-        <h4>Add new contact</h4>
+
-        <p>Test</p>
+        <h3 class="md-header">Add contact</h3>
+
+        <div class="md-container row">
+            <form class="col s12">
+                <div class="row">
+                    <div class="input-field col s6">
+                        <input id="first_name" type="text" class="validate" required>
+                        <label for="first_name">First Name*</label>
                     </div>
-    <div class="modal-footer">
+                    <div class="input-field col s6">
-        <a class="waves-effect waves-green btn-flat">Validate</a>
+                        <input id="last_name" type="text" class="validate" required>
-        <a class="waves-effect waves-red btn-flat">Cancel</a>
+                        <label for="last_name">Last Name*</label>
+                    </div>
+                    <div class="input-field col s6">
+                        <input id="surname" type="text" class="validate">
+                        <label for="surname">Surname</label>
+                    </div>
+                    <div class="input-field col s6">
+                        <input id="email" type="email" class="validate">
+                        <label for="email">Email</label>
+                    </div>
+                    <div class="input-field col s6">
+                        <input id="address" type="text" class="validate">
+                        <label for="address">Address</label>
+                    </div>
+                    <div class="input-field col s6">
+                        <input id="phone_number" type="tel" class="validate">
+                        <label for="phone_number">Phone Number</label>
+                    </div>
+                    <div class="input-field col s6">
+                        <input id="birthday" type="date" class="validate">
+                        <label for="birthday">Birthday</label>
+                    </div>
+                    <div class="col s12 mandatory">* fields mandatory</div>
+                </div>
+            </form>
+        </div>
+
+        <div class="md-footer">
+            <a class="waves-effect waves-green btn-flat" id="md-validate">Validate</a>
+            <a class="waves-effect waves-red btn-flat" id="md-cancel">Cancel</a>
+        </div>
+
     </div>
 </div>
+<div class="md-overlay"></div>
 
 <footer class="page-footer blue">
     <div class="footer-copyright">
@@ -21,12 +60,12 @@
     </div>
 </footer>
 
-<script src="/js/jquery-3.3.1.min.js"></script>
+<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
-<script async src="/js/materialize.min.js"></script>
+<script type="text/javascript" src="/js/materialize.min.js"></script>
 
-<script async src="/js/javascript.js?v=<?= CAUProject3Contact\Config::SITE_JS_VERSION ?>"></script>
+<script async type="text/javascript"
+        src="/js/javascript.js?v=<?= CAUProject3Contact\Config::SITE_JS_VERSION ?>"></script>
 
-<link href="/css/materialize.min.css" rel="stylesheet">
 <link href="/css/style.css?v=<?= CAUProject3Contact\Config::SITE_CSS_VERSION ?>" rel="stylesheet">
 
 </body>

src/View/Site/tpl/head.php

@@ -24,6 +24,8 @@
           content="https://<?= $_SERVER[ 'SERVER_NAME' ] . \CAUProject3Contact\Config::FAVICON_PATH ?>"/>
     <!--    <meta property="fb:app_id"              content="1000452166691027" /> -->
 
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700%7CRoboto+Condensed:400,700%7CMaterial+Icons'
           rel='stylesheet' type='text/css'>
 
@@ -32,6 +34,10 @@
 
     <meta name="theme-color" content="#ffffff">
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link type="text/css" rel="stylesheet" href="/css/materialize.min.css" media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="/css/modal.css">
+
     <?php if ( isset( $this->head[ 'robotNoIndex' ] ) && $this->head[ 'robotNoIndex' ] == true ) { ?>
         <meta name="robots" content="noindex"/>
     <?php } ?>

static/css/modal.css

@@ -0,0 +1,767 @@
+/* General styles for the modal */
+
+/*
+Styles for the html/body for special modal where we want 3d effects
+Note that we need a container wrapping all content on the page for the
+perspective effects (not including the modals and the overlay).
+*/
+.md-perspective,
+.md-perspective body {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-perspective body {
+    background: #222;
+    -webkit-perspective: 600px;
+    -moz-perspective: 600px;
+    perspective: 600px;
+}
+
+.md-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    max-width: 630px;
+    min-width: 320px;
+    height: auto;
+    z-index: 2000;
+    visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    -moz-transform: translateX(-50%) translateY(-50%);
+    -ms-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.md-show {
+    visibility: visible;
+}
+
+.md-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    opacity: 0;
+    background: rgba(150, 150, 150, 0.8);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show ~ .md-overlay {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Content styles */
+.md-content {
+    color: #000;
+    background: #FFF;
+    position: relative;
+    border-radius: 3px;
+    margin: 0 auto;
+}
+
+.md-content h3 {
+    margin: 0;
+    padding: 0.4em;
+    text-align: center;
+    font-size: 2.4em;
+    font-weight: 300;
+    opacity: 0.8;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px 3px 0 0;
+}
+
+.md-content > div {
+    padding: 15px 40px;
+    margin: 0;
+    font-weight: 300;
+    font-size: 1.15em;
+}
+
+.md-content > div p {
+    margin: 0;
+    padding: 10px 0;
+}
+
+.md-content > div ul {
+    margin: 0;
+    padding: 0 0 30px 20px;
+}
+
+.md-content > div ul li {
+    padding: 5px 0;
+}
+
+.md-content button {
+    display: block;
+    margin: 0 auto;
+    font-size: 0.8em;
+}
+
+/* Individual modal styles with animations/transitions */
+
+/* Effect 1: Fade in and scale up */
+.md-effect-1 .md-content {
+    -webkit-transform: scale(0.7);
+    -moz-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    transform: scale(0.7);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-1 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 2: Slide from the right */
+.md-effect-2 .md-content {
+    -webkit-transform: translateX(20%);
+    -moz-transform: translateX(20%);
+    -ms-transform: translateX(20%);
+    transform: translateX(20%);
+    opacity: 0;
+    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+}
+
+.md-show.md-effect-2 .md-content {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+}
+
+/* Effect 3: Slide from the bottom */
+.md-effect-3 .md-content {
+    -webkit-transform: translateY(20%);
+    -moz-transform: translateY(20%);
+    -ms-transform: translateY(20%);
+    transform: translateY(20%);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-3 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Effect 4: Newspaper */
+.md-effect-4 .md-content {
+    -webkit-transform: scale(0) rotate(720deg);
+    -moz-transform: scale(0) rotate(720deg);
+    -ms-transform: scale(0) rotate(720deg);
+    transform: scale(0) rotate(720deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-4 ~ .md-overlay,
+.md-effect-4 .md-content {
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-4 .md-content {
+    -webkit-transform: scale(1) rotate(0deg);
+    -moz-transform: scale(1) rotate(0deg);
+    -ms-transform: scale(1) rotate(0deg);
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+/* Effect 5: fall */
+.md-effect-5.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-5 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(600px) rotateX(20deg);
+    -moz-transform: translateZ(600px) rotateX(20deg);
+    -ms-transform: translateZ(600px) rotateX(20deg);
+    transform: translateZ(600px) rotateX(20deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-5 .md-content {
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+    -webkit-transform: translateZ(0px) rotateX(0deg);
+    -moz-transform: translateZ(0px) rotateX(0deg);
+    -ms-transform: translateZ(0px) rotateX(0deg);
+    transform: translateZ(0px) rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 6: side fall */
+.md-effect-6.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-6 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
+    -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
+    -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
+    transform: translate(30%) translateZ(600px) rotate(10deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-6 .md-content {
+    -webkit-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+    -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
+    -moz-transform: translate(0%) translateZ(0) rotate(0deg);
+    -ms-transform: translate(0%) translateZ(0) rotate(0deg);
+    transform: translate(0%) translateZ(0) rotate(0deg);
+    opacity: 1;
+}
+
+/* Effect 7:  slide and stick to top */
+.md-effect-7 {
+    top: 0;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.md-effect-7 .md-content {
+    -webkit-transform: translateY(-200%);
+    -moz-transform: translateY(-200%);
+    -ms-transform: translateY(-200%);
+    transform: translateY(-200%);
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    transition: all .3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-7 .md-content {
+    -webkit-transform: translateY(0%);
+    -moz-transform: translateY(0%);
+    -ms-transform: translateY(0%);
+    transform: translateY(0%);
+    border-radius: 0 0 3px 3px;
+    opacity: 1;
+}
+
+/* Effect 8: 3D flip horizontal */
+.md-effect-8.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-8 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateY(-70deg);
+    -moz-transform: rotateY(-70deg);
+    -ms-transform: rotateY(-70deg);
+    transform: rotateY(-70deg);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-8 .md-content {
+    -webkit-transform: rotateY(0deg);
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    opacity: 1;
+}
+
+/* Effect 9: 3D flip vertical */
+.md-effect-9.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-9 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateX(-70deg);
+    -moz-transform: rotateX(-70deg);
+    -ms-transform: rotateX(-70deg);
+    transform: rotateX(-70deg);
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.md-show.md-effect-9 .md-content {
+    -webkit-transform: rotateX(0deg);
+    -moz-transform: rotateX(0deg);
+    -ms-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 10: 3D sign */
+.md-effect-10.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-10 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: rotateX(-60deg);
+    -moz-transform: rotateX(-60deg);
+    -ms-transform: rotateX(-60deg);
+    transform: rotateX(-60deg);
+    -webkit-transform-origin: 50% 0;
+    -moz-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-10 .md-content {
+    -webkit-transform: rotateX(0deg);
+    -moz-transform: rotateX(0deg);
+    -ms-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 11: Super scaled */
+.md-effect-11 .md-content {
+    -webkit-transform: scale(2);
+    -moz-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-11 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 12:  Just me */
+.md-effect-12 .md-content {
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-12 ~ .md-overlay {
+    background: #e74c3c;
+}
+
+.md-effect-12 .md-content h3,
+.md-effect-12 .md-content {
+    background: transparent;
+}
+
+.md-show.md-effect-12 .md-content {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Effect 13: 3D slit */
+.md-effect-13.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-13 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(-3000px) rotateY(90deg);
+    -moz-transform: translateZ(-3000px) rotateY(90deg);
+    -ms-transform: translateZ(-3000px) rotateY(90deg);
+    transform: translateZ(-3000px) rotateY(90deg);
+    opacity: 0;
+}
+
+.md-show.md-effect-13 .md-content {
+    -webkit-animation: slit .7s forwards ease-out;
+    -moz-animation: slit .7s forwards ease-out;
+    animation: slit .7s forwards ease-out;
+}
+
+@-webkit-keyframes slit {
+    50% {
+        -webkit-transform: translateZ(-250px) rotateY(89deg);
+        opacity: .5;
+        -webkit-animation-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes slit {
+    50% {
+        -moz-transform: translateZ(-250px) rotateY(89deg);
+        opacity: .5;
+        -moz-animation-timing-function: ease-out;
+    }
+    100% {
+        -moz-transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+@keyframes slit {
+    50% {
+        transform: translateZ(-250px) rotateY(89deg);
+        opacity: 1;
+        animation-timing-function: ease-in;
+    }
+    100% {
+        transform: translateZ(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+/* Effect 14:  3D Rotate from bottom */
+.md-effect-14.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-14 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateY(100%) rotateX(90deg);
+    -moz-transform: translateY(100%) rotateX(90deg);
+    -ms-transform: translateY(100%) rotateX(90deg);
+    transform: translateY(100%) rotateX(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+.md-show.md-effect-14 .md-content {
+    -webkit-transform: translateY(0%) rotateX(0deg);
+    -moz-transform: translateY(0%) rotateX(0deg);
+    -ms-transform: translateY(0%) rotateX(0deg);
+    transform: translateY(0%) rotateX(0deg);
+    opacity: 1;
+}
+
+/* Effect 15:  3D Rotate in from left */
+.md-effect-15.md-modal {
+    -webkit-perspective: 1300px;
+    -moz-perspective: 1300px;
+    perspective: 1300px;
+}
+
+.md-effect-15 .md-content {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-15 .md-content {
+    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    opacity: 1;
+}
+
+/* Effect 16:  Blur */
+.md-show.md-effect-16 ~ .md-overlay {
+    background: rgba(180, 46, 32, 0.5);
+}
+
+.md-show.md-effect-16 ~ .container {
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+}
+
+.md-effect-16 .md-content {
+    -webkit-transform: translateY(-5%);
+    -moz-transform: translateY(-5%);
+    -ms-transform: translateY(-5%);
+    transform: translateY(-5%);
+    opacity: 0;
+}
+
+.md-show.md-effect-16 ~ .container,
+.md-effect-16 .md-content {
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.md-show.md-effect-16 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Effect 17:  Slide in from bottom with perspective on container */
+.md-show.md-effect-17 ~ .container {
+    height: 100%;
+    overflow: hidden;
+    -webkit-transition: -webkit-transform 0.3s;
+    -moz-transition: -moz-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.md-show.md-effect-17 ~ .container,
+.md-show.md-effect-17 ~ .md-overlay {
+    -webkit-transform: rotateX(-2deg);
+    -moz-transform: rotateX(-2deg);
+    -ms-transform: rotateX(-2deg);
+    transform: rotateX(-2deg);
+    -webkit-transform-origin: 50% 0%;
+    -moz-transform-origin: 50% 0%;
+    transform-origin: 50% 0%;
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.md-effect-17 .md-content {
+    opacity: 0;
+    -webkit-transform: translateY(200%);
+    -moz-transform: translateY(200%);
+    -ms-transform: translateY(200%);
+    transform: translateY(200%);
+}
+
+.md-show.md-effect-17 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+    -webkit-transition: all 0.3s 0.2s;
+    -moz-transition: all 0.3s 0.2s;
+    transition: all 0.3s 0.2s;
+}
+
+/* Effect 18:  Slide from right with perspective on container */
+.md-show.md-effect-18 ~ .container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-show.md-effect-18 ~ .md-overlay {
+    background: rgba(143, 27, 15, 0.8);
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-18 ~ .container,
+.md-show.md-effect-18 ~ .md-overlay {
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: 0% 50%;
+    -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
+    -moz-transform-style: preserve-3d;
+    -moz-transform-origin: 0% 50%;
+    -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
+    transform-style: preserve-3d;
+    transform-origin: 0% 50%;
+    animation: rotateRightSideFirst 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes rotateRightSideFirst {
+    50% {
+        -webkit-transform: translateZ(-50px) rotateY(5deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: translateZ(-200px);
+    }
+}
+
+@-moz-keyframes rotateRightSideFirst {
+    50% {
+        -moz-transform: translateZ(-50px) rotateY(5deg);
+        -moz-animation-timing-function: ease-out;
+    }
+    100% {
+        -moz-transform: translateZ(-200px);
+    }
+}
+
+@keyframes rotateRightSideFirst {
+    50% {
+        transform: translateZ(-50px) rotateY(5deg);
+        animation-timing-function: ease-out;
+    }
+    100% {
+        transform: translateZ(-200px);
+    }
+}
+
+.md-effect-18 .md-content {
+    -webkit-transform: translateX(200%);
+    -moz-transform: translateX(200%);
+    -ms-transform: translateX(200%);
+    transform: translateX(200%);
+    opacity: 0;
+}
+
+.md-show.md-effect-18 .md-content {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+    -webkit-transition: all 0.5s 0.1s;
+    -moz-transition: all 0.5s 0.1s;
+    transition: all 0.5s 0.1s;
+}
+
+/* Effect 19:  Slip in from the top with perspective on container */
+.md-show.md-effect-19 ~ .container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.md-show.md-effect-19 ~ .md-overlay {
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.md-show.md-effect-19 ~ .container,
+.md-show.md-effect-19 ~ .md-overlay {
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: 50% 100%;
+    -webkit-animation: OpenTop 0.5s forwards ease-in;
+    -moz-transform-style: preserve-3d;
+    -moz-transform-origin: 50% 100%;
+    -moz-animation: OpenTop 0.5s forwards ease-in;
+    transform-style: preserve-3d;
+    transform-origin: 50% 100%;
+    animation: OpenTop 0.5s forwards ease-in;
+}
+
+@-webkit-keyframes OpenTop {
+    50% {
+        -webkit-transform: rotateX(10deg);
+        -webkit-animation-timing-function: ease-out;
+    }
+}
+
+@-moz-keyframes OpenTop {
+    50% {
+        -moz-transform: rotateX(10deg);
+        -moz-animation-timing-function: ease-out;
+    }
+}
+
+@keyframes OpenTop {
+    50% {
+        transform: rotateX(10deg);
+        animation-timing-function: ease-out;
+    }
+}
+
+.md-effect-19 .md-content {
+    -webkit-transform: translateY(-200%);
+    -moz-transform: translateY(-200%);
+    -ms-transform: translateY(-200%);
+    transform: translateY(-200%);
+    opacity: 0;
+}
+
+.md-show.md-effect-19 .md-content {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+    -webkit-transition: all 0.5s 0.1s;
+    -moz-transition: all 0.5s 0.1s;
+    transition: all 0.5s 0.1s;
+}
+
+@media screen and (max-width: 32em) {
+    body {
+        font-size: 75%;
+    }
+}

static/css/style.css

@@ -35,3 +35,21 @@ img.add-contacts {
 #search:focus {
     width: 500px;
 }
+
+.md-footer {
+    height: 70px;
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    text-align: right;
+}
+
+.mandatory {
+    font-size: 10px;
+}
+
+nav ul a.nav-search:hover {
+    background-color: initial;
+}
+
+.delete, .modify {
+    cursor: pointer;
+}

static/js/javascript.js

@@ -6,7 +6,7 @@ let displayContacts = (contacts) => {
 
     for (let contact of contacts) {
         tbody.append(`
-            <tr>
+            <tr data-id="${contact["id"]}">
                 <td>${(contact["first_name"] ? contact["first_name"] : (contact["firstName"] ? contact["firstName"] : ""))}</td>
                 <td>${(contact["last_name"] ? contact["last_name"] : (contact["lastName"] ? contact["lastName"] : ""))}</td>
                 <td>${(contact["surname"] ? contact["surname"] : "")}</td>
@@ -14,6 +14,8 @@ let displayContacts = (contacts) => {
                 <td>${(contact["address"] ? contact["address"] : "")}</td>
                 <td>${(contact["phone_number"] ? contact["phone_number"] : (contact["phoneNumber"] ? contact["phoneNumber"] : ""))}</td>
                 <td>${(contact["birthday"] ? new Date(contact["birthday"]).toLocaleDateString() : "")}</td>
+                <td><i class="material-icons left modify">create</i></td>
+                <td><i class="material-icons left delete">delete</i></td>
             </tr>
         `);
     }
@@ -26,7 +28,7 @@ $(document).ready(() => {
     modal.modal();
 
     let search = (query) => {
-        if (query.length >= 3) {
+        if (query.length >= 2) {
             working = true;
             $.ajax({
                 url: "/api/contact/search",
@@ -60,15 +62,85 @@ $(document).ready(() => {
 
         if (!working) {
             search(query);
-        } else {
             lastQuery = query;
+        } else {
+            let i = setInterval(() => {
+                let newQuery = $("#search").val();
+
+                if (newQuery !== query) {
+                    clearInterval(i);
+                } else {
+                    if (!working) {
+                        search(query);
+                        lastQuery = query;
+                        clearInterval(i);
+                    }
+                }
+            }, 50);
         }
     });
 
     $(document).on("click", ".add-contacts", () => {
-        modal.open();
+        $("#modal").addClass("md-show");
     });
 
-    $("[data-tooltip]").tooltip();
+    $(document).on("click", "#md-cancel", () => {
+        $("#modal").removeClass("md-show");
+    });
+
+    $(document).on("click", "#md-validate", () => {
+        let firstName = $("#first_name").val();
+        let lastName = $("#last_name").val();
+        let surname = $("#surname").val();
+        let email = $("#email").val();
+        let address = $("#address").val();
+        let phoneNumber = $("#phone_number").val();
+        let birthday = $("#birthday").val();
+
+        if (firstName !== "" && lastName !== "") {
+            let data = {
+                firstName,
+                lastName,
+                surname: (surname !== "" ? surname : null),
+                email: (email !== "" ? email : null),
+                address: (address !== "" ? address : null),
+                phoneNumber: (phoneNumber !== "" ? phoneNumber : null),
+                birthday: (birthday !== "" ? birthday : null),
+            };
+
+            $.ajax({
+                url: "/api/contact/insert",
+                method: "POST",
+                data,
+                success: function (result) {
+                    result = JSON.parse(result);
+                    data["id"] = parseInt(result.data["id"], 10);
+                    contacts.push(data);
+
+                    $("table tbody").empty();
+                    displayContacts(contacts);
+                    $("#modal").removeClass("md-show");
+                }, error: function () {
+                }
+            });
+        }
+    });
+
+    $(document).on("click", ".delete", function () {
+        let $contact = $(this).closest("tr");
+        let id = parseInt($contact.attr("data-id"), 10);
+
+        $.ajax({
+            url: "/api/contact/delete",
+            method: "POST",
+            data: {
+                id
+            },
+            success: function () {
+                contacts = contacts.filter((c) => c.id !== id);
+                $contact.remove();
+            }
+        })
+    });
 
 });