From cf4ad2b1cc29f2c4c252598126d716a8969651c9 Mon Sep 17 00:00:00 2001
From: Mathieu Sanchez <mathieu.sanchez@outlook.fr>
Date: Thu, 13 Dec 2018 10:18:24 +0900
Subject: [PATCH] Example for API

---
 src/API/APIUser.php          |  23 ++++++++
 src/Model/BDD.php            |  16 +++---
 src/View/Site/Index.php      |  14 ++---
 src/View/Site/tpl/footer.php |   2 +-
 static/css/style.css         |  14 +++++
 static/js/javascript.js      | 101 +++++++++++++++++++++++++++++++++--
 6 files changed, 151 insertions(+), 19 deletions(-)
 create mode 100644 src/API/APIUser.php

diff --git a/src/API/APIUser.php b/src/API/APIUser.php
new file mode 100644
index 0000000..84ff4c6
--- /dev/null
+++ b/src/API/APIUser.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WebProjectFitness\API;
+
+class APIUser extends API {
+
+    private $declaredFunctions = [
+        'insert' => [
+            'method' => 'POST',
+            'params' => [
+                'name' => [
+                    'required' => true,
+                    'type' => 'string'
+                ]
+            ]
+        ],
+    ];
+
+    public function __construct() {
+        parent::__construct( $this->declaredFunctions );
+    }
+
+}
\ No newline at end of file
diff --git a/src/Model/BDD.php b/src/Model/BDD.php
index 7a8d013..b2ef0e0 100644
--- a/src/Model/BDD.php
+++ b/src/Model/BDD.php
@@ -6,15 +6,15 @@ use Exception;
 use PDO;
 
 class BDD {
-    const SQL_SERVER = 'web3.pulseheberg.net';   // BDD Server
-    const SQL_LOGIN = 'why7n0_fitness';                 // BDD Login
-    const SQL_PASSWORD = 'KpB728zu';                    // BDD Password
-    const SQL_DB = 'why7n0_fitness';                    // BDD Name
+//    const SQL_SERVER = 'web3.pulseheberg.net';   // BDD Server
+//    const SQL_LOGIN = 'why7n0_fitness';                 // BDD Login
+//    const SQL_PASSWORD = 'KpB728zu';                    // BDD Password
+//    const SQL_DB = 'why7n0_fitness';                    // BDD Name
 
-//    const SQL_SERVER = 'localhost'; // BDD Server
-//    const SQL_LOGIN = 'root';       // BDD Login
-//    const SQL_PASSWORD = '';        // BDD Password
-//    const SQL_DB = 'fitness';       // BDD Name
+    const SQL_SERVER = 'localhost'; // BDD Server
+    const SQL_LOGIN = 'root';       // BDD Login
+    const SQL_PASSWORD = '';        // BDD Password
+    const SQL_DB = 'fitness';       // BDD Name
 
     private static $bdd;
 
diff --git a/src/View/Site/Index.php b/src/View/Site/Index.php
index 2ec57a3..c3a2d5b 100644
--- a/src/View/Site/Index.php
+++ b/src/View/Site/Index.php
@@ -1,10 +1,10 @@
 <div class="row" style="margin-bottom: 0">
-    <div class="col s2 green lighten-1 white-text" style="height: 750px;">
+    <div class="col l3 m4 s6 green lighten-1 white-text" style="height: 750px;">
         <div class="row">
-            <div class="col l3 m4 s6 center-align">
+            <div class="col s12 center-align">
                 <h5>Selected part of the body</h5>
             </div>
-            <div class="col l9 m8 s6">
+            <div class="col s12" id="point-container">
                 <img src="/img/muscles.jpg" style="width: 100%;">
             </div>
             <div class="col s12" id="list-exercices-select-part">
@@ -15,13 +15,13 @@
             </div>
         </div>
     </div>
-    <div class="col s10">
+    <div class="col l9 m8 s6">
         <div class="container">
             <h2>Title</h2>
             <div class="center-align">
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/1gLmEOSwQMs" frameborder="0"
-                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                        allowfullscreen></iframe>
+                <!--                <iframe width="560" height="315" src="https://www.youtube.com/embed/1gLmEOSwQMs" frameborder="0"-->
+                <!--                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"-->
+                <!--                        allowfullscreen></iframe>-->
                 <div class="exercise-info-container blue-grey lighten-4 left-align">
                     Test
                 </div>
diff --git a/src/View/Site/tpl/footer.php b/src/View/Site/tpl/footer.php
index 3084ce9..95da1ef 100644
--- a/src/View/Site/tpl/footer.php
+++ b/src/View/Site/tpl/footer.php
@@ -10,7 +10,7 @@
 </footer>
 
 <script src="/js/jquery-3.3.1.min.js"></script>
-<script async src="/js/materialize.min.js"></script>
+<script src="/js/materialize.min.js"></script>
 <script async src="/js/javascript.js?v=<?= WebProjectFitness\Config::SITE_JS_VERSION ?>"></script>
 
 </body>
diff --git a/static/css/style.css b/static/css/style.css
index 8c98fcb..3df0ae1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -12,4 +12,18 @@
     margin: 20px auto 0;
     border-radius: 5px;
     padding: 10px 15px;
+}
+
+#point-container {
+    position: relative;
+}
+
+/* Selector point */
+#point-container .point {
+    position: absolute;
+    background: red;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/static/js/javascript.js b/static/js/javascript.js
index 186667c..eeb698d 100644
--- a/static/js/javascript.js
+++ b/static/js/javascript.js
@@ -1,5 +1,100 @@
-$(document).ready(() => {
+let pointConfig = [
+    {
+        title: "Test",
+        top: 45,
+        left: 80,
+    },
+    {
+        title: "Test3",
+        top: 125,
+        left: 53,
+    },
+    {
+        title: "Test4",
+        top: 85,
+        left: 170,
+    },
+    {
+        title: "Test5",
+        top: 115,
+        left: 121,
+    },
+];
 
-    $(".dropdown-trigger").dropdown();
+let Point = ( function () {
 
-});
\ No newline at end of file
+    let Point = function ( conf ) {
+        this.config = conf;
+        this.addSpecificCSS();
+        this.adHtml();
+    };
+
+    let proto = Point.prototype;
+
+    proto.addSpecificCSS = function () {
+        console.log( "Point addSpecificCSS" );
+        let css = `<style id="point-css">`;
+
+        for ( let conf of this.config ) {
+            console.log( conf );
+            css += `
+                .${ conf.title }-css {
+                    animation: ${ conf.title }-animation 1s linear 0s infinite normal none running;
+                    top: ${ conf.top }px;
+                    left: ${ conf.left }px;
+                }
+                .${ conf.title }-css.stop {
+                    animation: none;
+                }
+                @keyframes ${ conf.title }-animation {
+                    0% {
+                        width: 10px;
+                        height: 10px;
+                        top: ${ conf.top }px;
+                        left: ${ conf.left }px;
+                    }
+                    50% {
+                        width: 20px;
+                        height: 20px;
+                        top: ${ conf.top - 5 }px;
+                        left: ${ conf.left - 5 }px;
+                    }
+                    100% {
+                        width: 10px;
+                        height: 10px;
+                        top: ${ conf.top }px;
+                        left: ${ conf.left }px;
+                    }
+                }`;
+        }
+        css += `</style>`;
+
+        if ( $( "#point-css" ).length === 0 ) {
+            $( "head" ).append( css.replace( /  |\n/g, "" ) );
+        }
+    };
+
+    proto.adHtml = function () {
+        let container = $( "#point-container" );
+        let html = ``;
+
+        for ( let conf of this.config ) {
+            html += `<div class="blue darken-3 point ${ conf.title }-css ${ conf.noAnim ? "stop" : "" }"></div>`;
+        }
+        container.append( html.replace( /  |\n/g, "" ) );
+    };
+
+    proto.start = function () {
+
+    };
+
+    return Point;
+}() );
+
+$( document ).ready( () => {
+
+    $( ".dropdown-trigger" ).dropdown();
+
+    // let point = new Point( pointConfig );
+
+} );
\ No newline at end of file