Example for API

This commit is contained in:
Mathieu Sanchez 2018-12-13 10:18:24 +09:00
parent b5c41cf6e7
commit cf4ad2b1cc
6 changed files with 151 additions and 19 deletions

23
src/API/APIUser.php Normal file
View File

@ -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 );
}
}

View File

@ -6,15 +6,15 @@ use Exception;
use PDO; use PDO;
class BDD { class BDD {
const SQL_SERVER = 'web3.pulseheberg.net'; // BDD Server // const SQL_SERVER = 'web3.pulseheberg.net'; // BDD Server
const SQL_LOGIN = 'why7n0_fitness'; // BDD Login // const SQL_LOGIN = 'why7n0_fitness'; // BDD Login
const SQL_PASSWORD = 'KpB728zu'; // BDD Password // const SQL_PASSWORD = 'KpB728zu'; // BDD Password
const SQL_DB = 'why7n0_fitness'; // BDD Name // const SQL_DB = 'why7n0_fitness'; // BDD Name
// 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 = 'fitness'; // BDD Name const SQL_DB = 'fitness'; // BDD Name
private static $bdd; private static $bdd;

View File

@ -1,10 +1,10 @@
<div class="row" style="margin-bottom: 0"> <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="row">
<div class="col l3 m4 s6 center-align"> <div class="col s12 center-align">
<h5>Selected part of the body</h5> <h5>Selected part of the body</h5>
</div> </div>
<div class="col l9 m8 s6"> <div class="col s12" id="point-container">
<img src="/img/muscles.jpg" style="width: 100%;"> <img src="/img/muscles.jpg" style="width: 100%;">
</div> </div>
<div class="col s12" id="list-exercices-select-part"> <div class="col s12" id="list-exercices-select-part">
@ -15,13 +15,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col s10"> <div class="col l9 m8 s6">
<div class="container"> <div class="container">
<h2>Title</h2> <h2>Title</h2>
<div class="center-align"> <div class="center-align">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1gLmEOSwQMs" frameborder="0" <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/1gLmEOSwQMs" frameborder="0"-->
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" <!-- allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"-->
allowfullscreen></iframe> <!-- allowfullscreen></iframe>-->
<div class="exercise-info-container blue-grey lighten-4 left-align"> <div class="exercise-info-container blue-grey lighten-4 left-align">
Test Test
</div> </div>

View File

@ -10,7 +10,7 @@
</footer> </footer>
<script src="/js/jquery-3.3.1.min.js"></script> <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> <script async src="/js/javascript.js?v=<?= WebProjectFitness\Config::SITE_JS_VERSION ?>"></script>
</body> </body>

View File

@ -12,4 +12,18 @@
margin: 20px auto 0; margin: 20px auto 0;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; 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;
} }

View File

@ -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 () {
}); 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 );
} );