- [x] Developpement de l'api cote client

- [x] Dev des managers et de l'API et liste des acces
This commit is contained in:
xdrm-brackets 2016-02-14 21:22:07 +01:00
parent 92c915329e
commit 8a07e9865e
6 changed files with 122 additions and 6 deletions

View File

@ -11,6 +11,7 @@ DOM = {
var pageManager = new pageManagerClass(); var pageManager = new pageManagerClass();
pageManager.setPage(null, '/view', DOM.CONTAINER, ['profile', 'dashboard', 'machines', 'users', 'analytics', 'settings'] ); pageManager.setPage(null, '/view', DOM.CONTAINER, ['profile', 'dashboard', 'machines', 'users', 'analytics', 'settings'] );
var api = new APIClass('/api/');
/* [1] Toggle du sub-menu-side <-> navigation /* [1] Toggle du sub-menu-side <-> navigation

84
js/lib/api.js Normal file
View File

@ -0,0 +1,84 @@
/* classe API */
function APIClass(target){ this.target = target; };
APIClass.prototype = {
xhr: [], // tableau d'objets pour les requêtes ajax
/* transaction avec le serveur (http://host/api/)
*
* @param pRequest<Object> l'objet passé en JSON à http://host/api/
* @param pHandler<Function> fonction qui s'éxécutera lors de la réponse (1 argument -> réponse<Object>)
*
* @return answer<Object> l'objet retourné par http://host/api/ via pHandler (1er argument)
*
***************************************************************************************************
*
* @usecase
* 1. var answerObject = sendRequest(
* 2. { var1: "exemple", var2: 198294 },
* 3. function(rep){ alert(rep); }
* 4. );
* @explain
* 1. on appelle la fonction <=> on créé la requête
* 2. on passe l'objet qui sera envoyé
* 3. on passe une fonction qui utilise un argument (sera la réponse de http://host/api/) (sous forme d'objet)
*
*/
send: function(pRequest, pHandler){
// Si le chemin de delegation n'est pas renseigne, on renvoie une erreur
if( !pRequest.hasOwnProperty('path') )
pHandler({ModuleError: 4});
// on efface les requêtes qui sont terminées (toutes celles de this.xhr)
for( var i = 0 ; i < this.xhr.length ; i++ ){
if( this.xhr[i].readyState == 4 ) // si terminée
this.xhr = this.xhr.slice(0,i-1).concat(this.xhr.slice(i,this.xhr.length-1)); // suppression entrée
}
// on créé une nouvelle entrée
this.xhr.push(null);
i = this.xhr.length-1;
// création de l'objet AJAX
if(window.XMLHttpRequest) // IE7+, Firefox, Chrome, Opera, Safari
this.xhr[i] = new XMLHttpRequest();
else // IE5, IE6
this.xhr[i] = new ActiveXObject('Microsoft.XMLHttpRequest');
console.log(pRequest);
var ptrAPI = this;
this.xhr[i].onreadystatechange = function(){
if( ptrAPI.xhr[i].readyState == 4 ){ // si la requête est terminée
/* DEBUG : affiche la réponse BRUTE de http://host/api/ */
// console.log('http://host/api/ => '+ptrAPI.xhr[i].responseText);
// console.log( JSON.parse(ptrAPI.xhr[i].responseText) );
/* si success de requête */
if( [0,200].indexOf(ptrAPI.xhr[i].status) > -1 ){ // si fichier existe et reçu
try{ pHandler( JSON.parse(ptrAPI.xhr[i].responseText) ); } // si on peut parser, on envoie
catch(e){ pHandler({ModuleError:1}); } // sinon on envoie obj.request = 'corrupted'
}
/* sinon retourne obj.request = 'unreachable' */
else
pHandler({ModuleError: 3});
}
}
// on créé un formulaire POST (virtuel)
var form = new FormData();
form.append('path', pRequest.path ); // on créé la variable $_POST['json']=>request
if( pRequest.hasOwnProperty('data') )
form.append('data', JSON.stringify(pRequest.data) );
this.xhr[i].open('POST', this.target, true);
this.xhr[i].send( form );
}
};

View File

@ -2,7 +2,6 @@
# A FAIRE # # A FAIRE #
########### ###########
- [x] [page-manager] Correction de l'inclusion des dépendances de page-manager - [x] [page-manager] Correction de l'inclusion des dépendances de page-manager
- [ ] Dev des managers et de l'API et liste des acces
- [ ] Creation de la base des managers et de l'API - [ ] Creation de la base des managers et de l'API
- [ ] Conception des managers et de l'API - [ ] Conception des managers et de l'API
- [ ] Definir graphiquement le #CONTAINER - [ ] Definir graphiquement le #CONTAINER
@ -23,6 +22,8 @@
######## ########
# FAIT # # FAIT #
######## ########
- [x] Developpement de l'api cote client
- [x] Dev des managers et de l'API et liste des acces
- [x] [repo/cluster] getMembers - [x] [repo/cluster] getMembers
- [x] Conception BDD + ameliorations - [x] Conception BDD + ameliorations
- [x] Liste des tables - [x] Liste des tables

View File

@ -22,9 +22,10 @@
<!-- Dépendences Javascript --> <!-- Dépendences Javascript -->
<script type='text/javascript' src='/js/lib/input-checker.js' ></script> <!-- Gestion dynamique des saisies --> <script type='text/javascript' src='/js/lib/input-checker.js' ></script> <!-- Gestion dynamique des saisies -->
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) --> <script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL --> <script type='text/javascript' src='/f/js/api/js/lib' ></script> <!-- Gestion des transactions avec le serveur -->
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
</head> </head>
<body> <body>

View File

@ -24,9 +24,10 @@ if( section.create.element != null ){
code: document.querySelector(section.create.text + '#create_code'), code: document.querySelector(section.create.text + '#create_code'),
username: document.querySelector(section.create.text + '#create_username'), username: document.querySelector(section.create.text + '#create_username'),
firstname: document.querySelector(section.create.text + '#create_firstname'), firstname: document.querySelector(section.create.text + '#create_firstname'),
lasname: document.querySelector(section.create.text + '#create_lasname'), lastname: document.querySelector(section.create.text + '#create_lastname'),
mail: document.querySelector(section.create.text + '#create_mail'), mail: document.querySelector(section.create.text + '#create_mail'),
password: document.querySelector(section.create.text + '#create_password'), password: document.querySelector(section.create.text + '#create_password'),
status: document.querySelector(section.create.text + '#create_status'),
submit: document.querySelector(section.create.text + '#create_submit') submit: document.querySelector(section.create.text + '#create_submit')
} }
@ -44,4 +45,31 @@ if( section.create.element != null ){
}, false); }, false);
/* (n) Gestion de l'envoi du formulaire */
section.create.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
var request = {
path: 'userDefault/create', // On veut creer un utilisateur
data: [
section.create.input.code.value,
section.create.input.username.value,
section.create.input.firstname.value,
section.create.input.lastname.value,
section.create.input.mail.value,
section.create.input.password.value,
section.create.input.status.value
]
};
api.send(request, function(answer){
console.log(answer);
});
}, false);
} }

View File

@ -137,7 +137,8 @@
echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>"; echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>";
echo "<input id='create_lastname' type='text' placeholder='Lastname'><br>"; echo "<input id='create_lastname' type='text' placeholder='Lastname'><br>";
echo "<input id='create_mail' type='text' placeholder='Mail'><br>"; echo "<input id='create_mail' type='text' placeholder='Mail'><br>";
echo "<input id='create_password' type='text' placeholder='Mail'><br>"; echo "<input id='create_password' type='password' placeholder='Password'><br>";
echo "<input id='create_status' type='text' placeholder='Status'><br>";
echo "<button id='create_submit'>Créer</button>"; echo "<button id='create_submit'>Créer</button>";
echo "</form>"; echo "</form>";