Modifications graphique + prise en compte de l'état actif/expiré

This commit is contained in:
xdrm-brackets 2016-04-10 18:50:07 +02:00
parent dca56c6247
commit 50ad82eb90
5 changed files with 32 additions and 12 deletions

View File

@ -1,2 +1,2 @@
section[data-panel-list]{display:block;position:relative;border-radius:3px;border:1px solid #ccc;background-color:#fff;font-size:.8em}section[data-panel-list]>div[data-header]{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:.5em .7em;border-radius:3px 3px 0 0;border-bottom:1px solid #ccc;background-color:#f5f5f5;box-shadow:inset 0 0 5px #eee}section[data-panel-list]>div[data-header]>span,section[data-panel-list]>div[data-header]>button{color:#333;font-weight:bold;line-height:2em}section[data-panel-list]>div[data-header]>button{padding:.1em .7em;border-radius:3px;border:1px solid #555;background:#f5f5f5;transition:all .2s ease-in-out}section[data-panel-list]>div[data-header]>button:hover{background:#333;color:#fff}section[data-panel-list]>div[data-description]{display:block;position:relative;border-bottom:1px solid #ccc;padding:.7em .7em;color:#666}section[data-panel-list]>ul[data-list]{display:flex;position:relative;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;margin:0;padding:0;list-style:none}section[data-panel-list]>ul[data-list]>li[data-element]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:.2em 1em}section[data-panel-list]>ul[data-list]>li[data-element]:not(:last-child){border-bottom:1px solid #ccc}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1){display:flex;width:10em;height:6em;flex-direction:column;justify-content:flex-end;align-items:center;background:url("/f/svg/token/st/container/666666") center 1em no-repeat;background-size:auto 50%}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1)>span{display:block;padding:0 .4em;border-radius:3px;border:1px solid #ddd;font-size:.8em;color:#666;text-transform:uppercase;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2){display:flex;position:relative;flex:10em;padding:1em;flex-direction:column;justify-content:flex-start;align-items:flex-start;font-size:.9em;color:#666;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2)>span[data-prefix]:before{content:attr(data-prefix) ": ";font-weight:normal}section[data-panel-list]>ul[data-list]>li[data-element]>button{padding:.1em .7em;height:2em;border-radius:3px;border:1px solid #de2b08;background:#fff;color:#de2b08;font-weight:bold;transition:all .2s ease-in-out}section[data-panel-list]>ul[data-list]>li[data-element]>button:hover{background:#de2b08;color:#fff}section[data-panel-list]>div[data-add]{display:none;position:relative;padding:1em;border-top:1px solid #ccc;background-color:#f5f5f5;font-weight:bold}section[data-panel-list]>div[data-add].active{display:block}section[data-panel-list]>div[data-add]>input[type='text']{margin:1em 0;padding:.3em .5em;border-radius:3px;border:1px solid #999;background-color:#fff;color:#000;font-weight:normal}
section[data-panel-list]{display:block;position:relative;border-radius:3px;border:1px solid #ccc;background-color:#fff;font-size:.8em}section[data-panel-list]>div[data-header]{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:.5em .7em;border-radius:3px 3px 0 0;border-bottom:1px solid #ccc;background-color:#f5f5f5;box-shadow:inset 0 0 5px #eee}section[data-panel-list]>div[data-header]>span,section[data-panel-list]>div[data-header]>button{color:#333;font-weight:bold;line-height:2em}section[data-panel-list]>div[data-header]>button{padding:.1em .7em;border-radius:3px;border:1px solid #555;background:#f5f5f5;transition:all .2s ease-in-out}section[data-panel-list]>div[data-header]>button:hover{background:#333;color:#fff}section[data-panel-list]>div[data-description]{display:block;position:relative;border-bottom:1px solid #ccc;padding:.7em .7em;color:#666}section[data-panel-list]>ul[data-list]{display:flex;position:relative;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;margin:0;padding:0;list-style:none}section[data-panel-list]>ul[data-list]>li[data-element]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:.2em 1em}section[data-panel-list]>ul[data-list]>li[data-element]:not(:last-child){border-bottom:1px solid #ccc}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1){display:flex;width:10em;height:6em;flex-direction:column;justify-content:flex-end;align-items:center;background:url("/f/svg/token/st/container/666666") center 1em no-repeat;background-size:auto 50%}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1).active{background-image:url("/f/svg/token/st/container/4cbf86")}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1)>span{display:block;padding:0 .4em;border-radius:3px;border:1px solid #ddd;font-size:.8em;color:#666;text-transform:uppercase;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2){display:flex;position:relative;flex:10em;padding:1em;flex-direction:column;justify-content:flex-start;align-items:flex-start;font-size:.9em;color:#666;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2)>span[data-prefix]:before{content:attr(data-prefix) ": ";font-weight:normal}section[data-panel-list]>ul[data-list]>li[data-element]>button{padding:.1em .7em;height:2em;border-radius:3px;border:1px solid #de2b08;background:#fff;color:#de2b08;font-weight:bold;transition:all .2s ease-in-out}section[data-panel-list]>ul[data-list]>li[data-element]>button:hover{background:#de2b08;color:#fff}section[data-panel-list]>div[data-add]{display:none;position:relative;padding:1em;border-top:1px solid #ccc;background-color:#f5f5f5;font-weight:bold}section[data-panel-list]>div[data-add].active{display:block}section[data-panel-list]>div[data-add]>input[type='text']{margin:1em 0;padding:.3em .5em;border-radius:3px;border:1px solid #999;background-color:#fff;color:#000;font-weight:normal}
/*# sourceMappingURL=global.css.map */

View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": ["global.scss"],
"names": [],
"file": "global.css"

View File

@ -121,6 +121,12 @@ section[data-panel-list]{
background: url('/f/svg/token/st/container/666666') center 1em no-repeat;
background-size: auto 50%;
// Si le token est actif
&.active{
background-image: url('/f/svg/token/st/container/4cbf86');
}
// Texte pour le type d'element
& > span{
display: block;

View File

@ -32,14 +32,22 @@
public static function getAll(){
/* [1] On prepare et execute la requete
=========================================================*/
$request = Database::getPDO()->query("SELECT id_token as id, name, token, creation, expires
$request = Database::getPDO()->query("SELECT id_token as id, name, token, expires
FROM api_token
WHERE CURDATE() BETWEEN creation AND expires
ORDER BY creation ASC");
ORDER BY expires DESC");
/* [2] On recupere et retourne les donnees
/* [2] On recupere les donnees et ajout le status d'expire ou non
=========================================================*/
return Database::delNumeric( $request->fetchAll() );
$data = Database::delNumeric( $request->fetchAll() );
// Si le token est expire
foreach($data as $i=>$token)
$data[$i]['expired'] = time() > strtotime($token['expires']);
/* [3] On retourne le resultat
=========================================================*/
return $data;
}
@ -63,7 +71,7 @@
=========================================================*/
$check = Database::getPDO()->prepare("SELECT id_token
FROM api_token
WHERE CURDATE() BETWEEN creation AND expires
WHERE CURDATE() < expires
AND token = :token");
$check->execute(array( ':token' => $token ));

View File

@ -28,7 +28,7 @@ $tokens = $req_tokens->answer();
<button id='add-token'>Ajouter un accès</button>
</div>
<!-- Description -->
<!-- Description des tokens actifs -->
<div data-description>Liste des accès distants actifs. Ils seront automatiquement désactivés a la date d'expiration.</div>
<!-- Conteneur de la liste des elements -->
@ -38,13 +38,19 @@ $tokens = $req_tokens->answer();
<?php
foreach($tokens as $token){
echo "<li data-element data-id='".$token['id']."'>";
echo "<div><span data-prefix='Type'>token</span></div>";
// Si token actif
if( !$token['expired'] )
echo "<div class='active'><span>actif</span></div>";
else
echo "<div><span>Expiré</span></div>";
echo "<div>";
echo "<span>".$token['name']."</span>";
echo "<span data-prefix='Creation'>".Database::frDate($token['creation'])."</span>";
echo "<span data-prefix='Expiration'>".Database::frDate($token['expires'])."</span>";
echo "<span data-prefix='Token'>".$token['token']."</span>";
echo "</div>";
echo "<button class='remove-token'>Supprimer</button>";
echo "</li>";
}
@ -57,7 +63,7 @@ $tokens = $req_tokens->answer();
<!-- Creation d'un nouvel element (cache) -->
<div data-add>
<label for='add-name'>Nom de l'accès</label><br><input type='text' placeholder='token' id='add-name'><br>
<label for='add-duration'>Duree de vie (jours)</label><br><input type='text' placeholder='110' id='add-duration'><br>
<label for='add-duration'>Duree de vie (jours)</label><br><input type='text' placeholder='10' id='add-duration'><br>
<input type='button' value='Ajouter un accès'>
</div>
</section>