fin

README.md

@@ -0,0 +1,21 @@
+# Site de tiquet de panne
+
+Le mdp référant est: **3.1415926535**
+Le mdp prof est: **1NSI**
+
+C'est un site permettant de créer et gérer des tiquets de panne. Il est composé de **deux parties**:
+- Une partie *formulaire*, accessible à **tous**.
+- Une partie *gestion*, accessible seulement des référants.
+
+## Partie formulaire
+
+Il s'agit d'un simple formulaire demandant des informations précises à propos de la panne et du matériel défécteux
+
+## Partie gestion
+
+Cette partie est composée de 5 onglets:
+- accueil
+- recherche
+- liste
+- admin
+- export

css/style.css

@@ -0,0 +1,337 @@
+@font-face {
+  font-family: "monofonto";
+  src: url("../font/raleway.ttf") format("truetype");
+}
+body {
+  z-index: 1;
+  font-family: monofonto;
+  background-color: #e5e5e5;
+  margin: 143px 20px;
+  text-align: center;
+}
+body > a {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  margin: auto;
+}
+body .logo {
+  display: block;
+}
+body h1 {
+  margin: 40px;
+  font-weight: bold;
+  color: #454545;
+}
+body p {
+  font-weight: bold;
+  color: #ac2a8d;
+  font-size: 20px;
+  height: 20px;
+}
+
+.nav {
+  width: 80%;
+  margin-left: 10%;
+  margin-bottom: 3%;
+  background-color: #84878C;
+  border-radius: 20px;
+}
+.nav ul {
+  margin: auto;
+  padding: 0;
+  width: 60%;
+}
+.nav ul::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.nav__link {
+  width: 20%;
+  min-width: 100px;
+  float: left;
+  position: relative;
+  text-align: center;
+  list-style-type: none;
+}
+.nav__link:hover {
+  background-color: #59184E;
+  transition: 0.65s;
+  border-radius: 10px;
+}
+.nav__link a {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: white;
+  font-weight: bold;
+  display: inline-block;
+  text-decoration: none;
+}
+.nav__link a:hover {
+  color: white;
+}
+
+form {
+  width: 20%;
+  min-width: 300px;
+  background-color: white;
+  display: block;
+  position: relative;
+  margin: auto;
+  border-radius: 30px;
+  padding: 20px;
+}
+
+.container-field {
+  position: relative;
+}
+.container-field small {
+  display: none;
+  color: red;
+}
+.container-field__img {
+  display: none;
+  position: relative;
+  float: right;
+  width: 20px;
+  top: 12px;
+}
+.container-field__field {
+  background-color: inherit;
+  position: relative;
+  display: block;
+  text-decoration-line: none;
+  appearance: none;
+  text-align: center;
+  color: #454444;
+  resize: none;
+  outline: none;
+  margin: 10px auto;
+  border: 4px solid #4e4d4d;
+  padding: 10px 10px;
+  border-radius: 30px;
+  width: 60%;
+  max-width: 300px;
+  transition: 0.25s;
+}
+.container-field__field:focus, .container-field__field:hover {
+  width: 70%;
+  border-color: #ac2a8d;
+  background-color: white;
+}
+.container-field__field--submit:hover {
+  width: 65%;
+  border-color: #2ecc71;
+  background-color: #82E6AC;
+}
+
+.hint {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.hint__int {
+  position: relative;
+  left: 25%;
+}
+.hint__help {
+  display: none;
+  z-index: 2;
+  position: relative;
+  width: 170px;
+  left: 71%;
+  border-radius: 30px;
+  box-shadow: 0 0 10px black;
+  padding: 15px;
+  margin: 0;
+  background-color: #e5e5e5;
+  font-size: 14px;
+}
+.hint__help:hover {
+  display: block;
+}
+.hint__help p {
+  position: relative;
+  font-size: 14px;
+}
+.hint__help img {
+  border-radius: 15px;
+  width: 100%;
+}
+.hint__help code {
+  background-color: #aaa;
+  border-radius: 5px;
+  font-family: courier, monospace;
+  padding: 3px 5px;
+  font-size: 14px;
+}
+
+.table {
+  width: 80%;
+  border-radius: 5px;
+  margin-left: 10%;
+  margin-top: 2%;
+  background-color: #84878C;
+  color: white;
+  border: 1px solid #84878C;
+}
+.table th {
+  width: 1%;
+}
+.table td {
+  background-color: #e5e5e5;
+  border: 1px solid #84878C;
+  width: 1%;
+  min-width: 20px;
+  border-radius: 5px;
+  text-align: center;
+  word-break: break-all;
+  color: #84878C;
+}
+.table td img {
+  width: 40%;
+  max-width: 40px;
+}
+.table td .input {
+  border: 2px solid #ac2a8d;
+  border-radius: 5px;
+  text-align: inherit;
+  outline: none;
+  color: #84878C;
+  transition: 0.05s;
+}
+.table td .input:hover {
+  font-weight: bold;
+}
+.table td .input:focus {
+  font-weight: bold;
+  border: 4px solid #ac2a8d;
+}
+.table__title td {
+  color: #ac2a8d;
+  font-weight: bold;
+  word-break: normal;
+}
+.table__switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.table__switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.table__switch input:checked + .table__switch__slider {
+  background-color: #2ecc71;
+}
+.table__switch input:focus + .table__switch__slider {
+  box-shadow: 0 0 1px #2ecc71;
+}
+.table__switch input:checked + .table__switch__slider:before {
+  transform: translateX(26px);
+}
+.table__switch__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: crimson;
+  border-radius: 34px;
+  transition: 0.4s;
+}
+.table__switch__slider:before {
+  position: absolute;
+  border-radius: 50%;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+.container-popup {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 500ms;
+  visibility: hidden;
+  opacity: 0;
+}
+.container-popup:target {
+  visibility: visible;
+  opacity: 1;
+}
+.container-popup__popup {
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 5px;
+  width: 30%;
+  height: 150px;
+  position: absolute;
+  transition: all 5s ease-in-out;
+}
+.container-popup__popup h2 {
+  margin-top: 0;
+  color: #333;
+}
+.container-popup__popup p {
+  max-height: 30%;
+  overflow: auto;
+}
+.container-popup__popup__close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  transition: all 200ms;
+  font-size: 30px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #333;
+}
+.container-popup__popup__close:hover {
+  color: #06D85F;
+}
+
+.button {
+  border: 3px solid #ac2a8d;
+  background-color: #e5e5e5;
+  font-weight: bold;
+  text-decoration: none;
+  transition: 0.5s;
+}
+.button:hover {
+  color: #e5e5e5;
+  background-color: #ac2a8d;
+}
+.button--small {
+  width: 3rem;
+  border-width: medium;
+  border-radius: 5px;
+  margin: 5px;
+  color: #84878C;
+}
+.button--large {
+  color: #ac2a8d;
+  display: inline-block;
+  margin-bottom: 3%;
+  padding: 10px 40px;
+  border-radius: 20px;
+}
+
+/*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/main.scss"],"names":[],"mappings":"AAMA;EACI;EACA;;AAGJ;EACI;EACA;EACA,kBAbS;EAcT;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OA9BE;EA+BF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBA9CQ;EA+CR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBAhEG;EAiEH;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAUhB;EACI;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,cAlIF;EAmIE;;AAEJ;EACI;EACA;EACA;;;AASZ;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EAII;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAxKK;EAyKL;;AAbA;EACI;;AAaJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAWZ;EACI;EACA;EACA;EACA;EACA,kBAxMQ;EAyMR;EACA;;AACA;EACI;;AAEJ;EACI,kBA9MK;EAgNL;EACA;EACA;EACA;EAEA;EACA;EACA,OAxNI;;AAyNJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OAlOA;EAmOA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OA3OE;EA4OF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAOhB;EACI;EACA,kBArVS;EAsVT;EACA;EACA;;AACA;EACI,OA1VK;EA2VL,kBAzVE;;AA2VN;EACI;EACA;EACA;EACA;EACA,OAnWI;;AAqWR;EACI,OAnWE;EAoWF;EACA;EACA;EACA","file":"style.css"}

login/cible.php

@@ -1,10 +1,10 @@
 <?php
 if (isset($_POST['login']) && isset($_POST['pwd'])) {
-    $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+    $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
     $reponse = $bdd->query("SELECT * FROM logins");
 
-    while ($line = $reponse->fetch()) {
+    while ($line = $reponse->fetchArray()) {
         if ($line[0] == $_POST['login'] && $line[1] == $_POST['pwd']) {
             session_start();
             $_SESSION['login'] = $_POST['login'];
@@ -12,7 +12,6 @@ if (isset($_POST['login']) && isset($_POST['pwd'])) {
             header('location: ../prof/index.php');
         }
     }
-    $reponse->closeCursor();
 }
 
 echo '<meta http-equiv="refresh" content="0;URL=index.php">';

login/index.php

@@ -2,29 +2,24 @@
 <html>
     <head>
         <title>Login</title>
-        <link rel="stylesheet" href="../stylepage.css">
+        <a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>
+        <link rel="stylesheet" href="../css/style.css">
     </head>
     <body>
         <form id='form' action="cible.php" method="post">
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Login:</p>
-                <div class="champ">
+                <select class="container-field__field" name="login">
-                    <select class="entry" name="login">
+                    <option value="prof">prof</option>
-                        <option value="prof">prof</option>
+                    <option value="referant">Référant</option>
-                        <option value="referant">Référant</option>
+                </select>
-                    </select>
-                </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Pwd:</p>
-                <div class="champ">
+                <input class="container-field__field" type="password" name="pwd">
-                    <input class="entry" type="password" name="pwd">
-                </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
-                <div class="submit">
+                <input class="container-field__field container-field__field--submit" type="submit" value="conexion">
-                    <input class="entry" type="submit" value="conexion">
-                </div>
             </div>
         </form>
     </body>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "ticket_panne",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "sass": "sass --watch ./sass/main.scss:./css/style.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://paulconstans.ddns.info/gitea/barraux.a/ticket_panne.git"
+  },
+  "author": "",
+  "license": "ISC"
+}

prof/cible.php

@@ -1,22 +0,0 @@
-<?php
-
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
-
-$req = $bdd->prepare('INSERT INTO pannes(dates, details, lieu, salle, pos, materiel, marque, model, nserie, demandeur, traitement) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur, :traitement)');
-
-$req->execute(array(
-	'dates' => $_POST['dates'],
-	'details' => $_POST['details'],
-	'lieu' => $_POST['lieu'],
-	'salle' => $_POST['salle'],
-	'pos' => $_POST['pos'],
-	'materiel' => $_POST['materiel'],
-	'marque' => $_POST['marque'],
-	'model' => $_POST['model'],
-	'nserie' => $_POST['nserie'],
-	'demandeur' => $_POST['demandeur'],
-	'traitement' => 0
-	));
-
-echo 'Votre ticket à bien été pris en compte';
-?>

prof/cible/index.php

@@ -0,0 +1,22 @@
+<?php
+
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
+
+$stmt = $bdd->prepare('INSERT INTO pannes(dates, details, lieu, salle, pos, materiel, marque, model, nserie, demandeur, traitement) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur, :traitement)');
+
+$stmt->bindValue(':dates', $_POST['dates']);
+$stmt->bindValue(':details', $_POST['details']);
+$stmt->bindValue(':lieu', $_POST['lieu']);
+$stmt->bindValue(':salle', $_POST['salle']);
+$stmt->bindValue(':pos', $_POST['pos']);
+$stmt->bindValue(':materiel', $_POST['materiel']);
+$stmt->bindValue(':marque', $_POST['marque']);
+$stmt->bindValue(':model', $_POST['model']);
+$stmt->bindValue(':nserie', $_POST['nserie']);
+$stmt->bindValue(':demandeur', $_POST['demandeur']);
+$stmt->bindValue(':traitement', 0);
+
+$stmt->execute();
+
+echo 'Votre ticket à bien été pris en compte';
+?>

prof/include/champ.php

@@ -1,13 +1,7 @@
 <?php
-echo '<p> ',$titre,' : ';
+echo '<p> ',$titre,' : </p>
-if ($help) {
+    <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-    echo '<a class="int" href="#" onmouseover=displayHelp(',$sql_name,') onmouseout=hideHelp(',$sql_name,') ><img src="../img/int.png" alt="point_int" width=20px ></a>';
+    <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
-}
+    <input class="container-field__field" type=',$type,' name=',$sql_name,'><br>
-echo '</p>
+    <small>',$error,'</small>';
-    <div class="champ">
-        <input class="entry" type=',$type,' name=',$sql_name,'><br>
-        <img class="check" src="../img/check.png" alt="check">
-        <img class="excla" src="../img/excla.png" alt="exclamation">
-    </div>
-    <small>Error: ',$error,'</small>';
 ?>

prof/index.php

@@ -1,5 +1,5 @@
 <?php
-include '../session.php';
+include '../sessions/session.php';
 ?>
 
 <!DOCTYPE html>
@@ -7,98 +7,100 @@ include '../session.php';
     <head>
         <meta charset="utf-8">
         <title>Tickets de panne</title>
-        <link href="../stylepage.css" rel="stylesheet">
+        <link href="../css/style.css" rel="stylesheet">
-        <script type="text/javascript" src="script.js" defer></script>
+        <script type="text/javascript" src="js/script.js" defer></script>
-        <img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px">
+        <a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>
 
     </head>
     <body id="page">
         <?php
         if ($_SESSION['login'] == 'referant') {
-            echo '<a class="champ" href="../referant/index.php">site référant</a>';
+            echo '<div class="container-field"><a class="button button--large" href="../referant/index.php">site référant</a></div>';
         }
         ?>
         <h1 id="titre">
             Formulaire de panne informatique
         </h1>
-        <form id='form' method="POST" action="cible.php">
+        <form id='form' method="POST" action="cible/index.php">
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Date';
                     $sql_name = 'dates';
                     $type = 'date';
                     $error = 'Veuillez saisir une date';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Détails :</p>
-                <div class="champ">
+                <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-                    <textarea class="entry" rows="10" cols="30" name='details'></textarea><br>
+                <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
-                    <img class="check" src="../img/check.png" alt="check">
+                <textarea class="container-field__field" rows="10" cols="30" name='details'></textarea><br>
-                    <img class="excla" src="../img/excla.png" alt="exclamation">
-                </div>
                 <small>Error: Veuillez remplir ce champ</small>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Lieu';
                     $sql_name = 'lieu';
                     $type = 'text';
                     $error = "Vous n'avez saisie de lieu";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="lieu">
+                <div class="hint" onmouseleave='hideHelp(lieu)'>
-                    <p>Entrez le nom du bâtiment dans lequel se trouve le matériel</p><br>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(lieu)><img src="../img/int.png" alt="point_int" width=20px ></a>
-                    <code>Ex: bâtiment A</code>
+                  <div class="hint__help" id="lieu">
+                      <p>Entrez le nom du bâtiment dans lequel se trouve le matériel</p><br>
+                      <code>Ex: bâtiment A</code>
+                  </div>
                 </div>
+
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Salle';
                     $sql_name = 'salle';
                     $type = 'text';
                     $error = "Vous n'avez pas saisie de salle";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="salle">
+                <div class="hint" onmouseleave='hideHelp(salle)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(salle)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="salle">
                     <p>Entrez le nom de la salle dans lequel se trouve le matériel</p><br>
                     <code>Ex: A 11 codage</code>
+                  </div>
                 </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
-                    $titre = 'Position dans la salle';
+                    $titre = 'Position';
                     $sql_name = 'pos';
                     $type = 'text';
                     $error = 'Veuillez remplir ce champ';
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="pos">
+                <div class="hint" onmouseleave='hideHelp(pos)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(pos)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="pos">
                     <p>Veillez fournir des présision sur la position du matériel</p><br>
                     <code>Ex: PC-42 au fond à droite</code>
+                  </div>
                 </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Matériel :</p>
-                <div class="champ">
+                <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-                    <select class="entry" name='materiel'>
+                <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
-                        <option value="UC">Unité Centrale</option>
+                <select class="container-field__field" name='materiel'>
-                        <option value="IMP">Imprimante</option>
+                    <option value="UC">Unité Centrale</option>
-                        <option value="ECR">Ecran</option>
+                    <option value="IMP">Imprimante</option>
-                        <option value="VID">Vidéo Projecteur</option>
+                    <option value="ECR">Ecran</option>
-                        <option value="TBI">Tableau Blanc Interactif</option>
+                    <option value="VID">Vidéo Projecteur</option>
-                    </select>
+                    <option value="TBI">Tableau Blanc Interactif</option>
-                    <img class="check" src="../img/check.png" alt="check">
+                </select>
-                    <img class="excla" src="../img/excla.png" alt="exclamation">
+                <small>test</small>
-                </div>
-                <small></small>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Marque';
                     $sql_name = 'marque';
@@ -107,50 +109,58 @@ include '../session.php';
                     $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="marque">
+                <div class="hint" onmouseleave='hideHelp(marque)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(marque)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="marque">
                     <p>Veillez renseigner la marque du matériel</p><br>
                     <code>Ex: Asus</code>
+                  </div>
                 </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Model';
                     $sql_name = 'model';
                     $type = 'text';
                     $error = "Veuillez saisir le model";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="model">
+                <div class="hint" onmouseleave='hideHelp(model)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(model)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="model">
                     <p>Veillez renseigner le modèle du matériel</p><br>
                     <code>Ex: Lattitude E6410</code>
+                  </div>
                 </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'N° de série';
                     $sql_name = 'nserie';
                     $type = 'text';
                     $error = "Vous n'avez saisie le n° de série";
-                    $help = false;
                     include("include/champ.php");
                 ?>
+                <div class="hint" onmouseleave='hideHelp(nserie)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(nserie)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="nserie">
+                    <p>Voici un exemple. Pour plus d'aide: <a href="#">ici</a> </p> <br>
+                    <code>Ex: 3A42B14</code>
+                  </div>
+                </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Nom';
                     $sql_name = 'demandeur';
                     $type = 'text';
                     $error = 'Veulliez entrer votre nom';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <br>
-                <div class="submit">
+                <input class="container-field__field container-field__field--submit" type="submit" value="Valider">
-                    <input class="entry" type="submit" value="Valider">
-                </div>
             </div>
 
         </form>

prof/script.js → prof/js/script.js

@@ -1,9 +1,6 @@
-const page = document.getElementById('page');
+const check = document.getElementsByClassName('container-field__img--check');
-
+const excla = document.getElementsByClassName('container-field__img--excla');
-const check = document.getElementsByClassName('check');
+const entry = document.getElementsByTagName('form')[0].getElementsByClassName('container-field__field');
-const excla = document.getElementsByClassName('excla');
-const entry = document.getElementsByClassName('entry');
-const help = document.getElementsByClassName('help');
 
 
 document.getElementById("form").addEventListener('submit', function(e) {
@@ -20,7 +17,7 @@ document.getElementById("form").addEventListener('submit', function(e) {
                 alert('une erreur est survenue...');
             }
         };
-        xhr.open('POST', 'cible.php', true);
+        xhr.open('POST', 'cible/index.php', true);
         xhr.send(data);
     }
 });

referant/admin.php

@@ -1,12 +1,11 @@
 <?php
-    include '../session_restraintes.php';
+    include '../sessions/session_restraintes.php';
-    $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+    $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
     $reponse = $bdd->query("SELECT * FROM logins");
     $arr = [];
-    while ($line = $reponse->fetch()) {
+    while ($line = $reponse->fetchArray()) {
         $arr[$line[0]] = $line[1];
     }
-    $reponse->closeCursor();
 ?>
 
 <html>
@@ -16,29 +15,26 @@
     </head>
     <body>
         <?php include 'include/nav.php'; ?>
-        <table>
+        <table class="table">
             <thead>
                 <tr>
                     <th colspan="3">Mot de passe</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
-                    <td>Login</td>
+                    <td>Identifiant</td>
-                    <td>Password</td>
+                    <td>Mot de passe</td>
                 </tr>
-                <tr>
+                <?php
-                    <?php 
+                foreach ($arr as $key => $value) {
-                    foreach ($arr as $key => $value) {
+                    echo '<tr>
-                        echo '<tr>
+                        <td class=',$key,' style="font-weight: bold;">', $key,'</td>
-                            <td class=',$key,' style="font-weight: bold;">', $key,'</td>
+                        <td class=',$key,'>', $value,'</td>
-                            <td class=',$key,'>', $value,'</td>
+                        <td class=',$key,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$key,'\')"></td>
-                            <td class=',$key,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$key,'\')"></td>
+                    </tr>';
-                        </tr>'; 
+                }
-                    }
+                ?>
-                    ?>
-                </tr>
-                    
             </tbody>
         </table>
     </body>

referant/cible/admin.php

@@ -1,8 +1,15 @@
 <?php
 $decode = json_decode($_POST['value'], TRUE);
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$update = $bdd->query('UPDATE `logins` SET `pwd` = "' .$decode['pwd'] .'" WHERE `login` = "' .$decode['login'] .'"');
 
-$traitement = $bdd->query("SELECT * FROM `logins` WHERE `login`= '" .$decode['login'] ."'");
+$stmt = $bdd->prepare('UPDATE `logins` SET `pwd` = :pwd WHERE `login` = :login');
-print_r(json_encode($traitement->fetch()));
+$stmt->bindValue(':pwd', $decode['pwd']);
+$stmt->bindValue(':login', $decode['login']);
+
+$stmt->execute();
+
+$select = $bdd->prepare("SELECT * FROM `logins` WHERE `login` = :login");
+$select->bindValue(':login', $decode['login']);
+$traitement = $select->execute();
+print_r(json_encode($traitement->fetchArray()));
 ?>

referant/cible/delete.php

@@ -0,0 +1,7 @@
+<?php
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
+
+$request = $bdd->prepare('DELETE FROM pannes WHERE ID=:id');
+$request->bindValue(':id', $_POST['id']);
+$request->execute();
+ ?>

referant/cible/edit.php

@@ -1,21 +1,25 @@
 <?php
 $decode = json_decode($_POST['value'], TRUE);
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$request = 'UPDATE pannes SET 
+$stmt = $bdd->prepare('UPDATE pannes SET dates=:dates, details=:details, lieu=:lieu, salle=:salle, pos=:pos, materiel=:materiel, marque=:marque, model=:model, nserie=:nserie, demandeur=:demandeur, traitement=:traitement WHERE ID=:id');
-dates = "' .$decode["dates"] .'",
-details = "' .$decode["details"] .'",
-lieu = "' .$decode["lieu"] .'",
-salle = "' .$decode["salle"] .'",
-pos = "' .$decode["pos"] .'",
-materiel = "' .$decode["materiel"] .'",
-marque = "' .$decode["marque"] .'",
-model = "' .$decode["model"] .'",
-nserie = "' .$decode["nserie"] .'",
-demandeur = "' .$decode["demandeur"] .'",
-traitement = "' .$decode["traitement"] .'"
-WHERE ID= "' .$decode['id'] .'"';
-$update = $bdd->query($request);
 
-$traitement = $bdd->query("SELECT * FROM pannes WHERE ID=" .$decode['id']);
+$stmt->bindValue(':id', $decode['id']);
-print_r(json_encode($traitement->fetch()));
+$stmt->bindValue(':dates', $decode['dates']);
+$stmt->bindValue(':details', $decode['details']);
+$stmt->bindValue(':lieu', $decode['lieu']);
+$stmt->bindValue(':salle', $decode['salle']);
+$stmt->bindValue(':pos', $decode['pos']);
+$stmt->bindValue(':materiel', $decode['materiel']);
+$stmt->bindValue(':marque', $decode['marque']);
+$stmt->bindValue(':model', $decode['model']);
+$stmt->bindValue(':nserie', $decode['nserie']);
+$stmt->bindValue(':demandeur', $decode['demandeur']);
+$stmt->bindValue(':traitement', $decode['traitement']);
+
+$stmt->execute();
+
+$traitement = $bdd->prepare("SELECT * FROM pannes WHERE ID=:id");
+$traitement->bindValue(':id', $decode['id']);
+$res = $traitement->execute();
+print_r(json_encode($res->fetchArray()));
 ?>

referant/cible/export.php

@@ -1,15 +1,17 @@
 <?php
-
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$connect = mysqli_connect("localhost", "root", "", "ticket");
+$res = $bdd->query('SELECT * FROM ' .$_POST['bdd']);
-$query = "SELECT * FROM `" .$_POST['bdd'] ."`";
-$title = array_keys(mysqli_fetch_assoc(mysqli_query($connect, $query)));
 
 header('Content-Type: text/csv; charset=utf-8');
 header('Content-Disposition: attachment; filename=' .$_POST['bdd'] .'.csv');
 $output = fopen("php://output", "w");
+
+$title = $res->fetchArray(SQLITE3_ASSOC);
+
+fputcsv($output, array_keys($title));
 fputcsv($output, $title);
-$result = mysqli_query($connect, $query);
+
-while($row = mysqli_fetch_assoc($result)) {
+while($row = $res->fetchArray(SQLITE3_ASSOC)) {
     fputcsv($output, $row);
 }
 fclose($output);

referant/cible/search.php

@@ -1,14 +1,17 @@
 <?php
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
 try {
-    $reponse = $bdd->query("SELECT * FROM pannes WHERE ID=" .$_POST['id']);
+    // $reponse = $bdd->query("SELECT * FROM pannes WHERE `" .$_POST['champ'] ."`='" .$_POST['value'] ."'");
-    $line = $reponse -> fetch();
+    $reponse = $bdd->prepare("SELECT * FROM pannes WHERE ".$_POST['champ'] ."=:value");
+    $reponse->bindValue(':value', $_POST['value']);
+    $fetch = $reponse->execute();
+    $result = [];
+    while ($line = $fetch->fetchArray()) {
+        array_push($result, $line);
+    };
 
-
+    print_r(json_encode($result));
-    $result = json_encode($line);
-
-    print_r($result);
 } catch (Exception) {
     echo false;
 }

referant/cible/slider.php

@@ -1,9 +1,9 @@
 <?php
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
 $update = $bdd->query("UPDATE pannes SET traitement = " .$_POST['is_checked'] ." WHERE ID = " .$_POST['id']);
 
 $traitement = $bdd->query("SELECT traitement FROM pannes WHERE ID=" .$_POST['id']);
-$res = $traitement->fetch()['traitement'];
+$res = $traitement->fetchArray()['traitement'];
 echo $res;
 ?>

referant/export.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -11,28 +11,22 @@ include '../session_restraintes.php';
     <body>
         <?php include 'include/nav.php'?>
         <form id='form' action="cible/export.php" method="post">
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Type:</p>
-                <div class="champ">
+                <select class="container-field__field" name="type">
-                    <select class="entry" name="type">
+                    <option value="csv" onclick="document.getElementById('base-choice').style.display = 'block'; document.getElementById('form').setAttribute('action','cible/export.php');">CSV</option>
-                        <option value="csv">CSV</option>
+                    <option value="sqlite" onclick="document.getElementById('base-choice').style.display = 'none'; document.getElementById('form').setAttribute('action','../database/ticket_panne.db');">SQLite</option>
-                        <!-- <option value="sql">SQL</option> -->
+                </select>
-                    </select>
-                </div>
             </div>
-            <div class="container-champ">
+            <div id="base-choice" class="container-field">
                 <p>Base:</p>
-                <div class="champ">
+                <select class="container-field__field" name="bdd">
-                    <select class="entry" name="bdd">
+                    <option value="pannes">pannes</option>
-                        <option value="pannes">pannes</option>
+                    <option value="logins">logins</option>
-                        <option value="logins">logins</option>
+                </select>
-                    </select>
-                </div>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
-                <div class="submit">
+                <input class="container-field__field container-field__field--submit" type="submit" value="Download">
-                    <input class="entry" type="submit" value="Download">
-                </div>
             </div>
         </form>
     </body>

referant/include/line.php

@@ -1,7 +1,11 @@
 <?php
+if (isset($_POST['class'])) {
+    $class = $_POST['class'];
+}
+
 if (isset($line)) {
     echo '<tr>
-        <td class=', $class , ' style="font-weight: bold;" >',$class,'</td>
+        <td class=', $class , ' style="font-weight: bold; font-size: 24px;" >',$class,'</td>
         <td class=', $class , '>',$line[1],'</td>
         <td class=', $class , '>',$line[2],'</td>
         <td class=', $class , '>',$line[3],'</td>
@@ -14,26 +18,25 @@ if (isset($line)) {
         <td class=', $class , '>',$line[10],'</td>';
 
     if ($line[11] == 1) {
-        echo '<td class=', $class , '><img src="../img/check.png" width="50%"></td>';
+        echo '<td class=', $class , '><img src="../img/check.png"></td>';
     }
     else {
-        echo '<td class=', $class , '><img src="../img/excla.png" width="50%"></td>';
+        echo '<td class=', $class , '><img src="../img/excla.png" ></td>';
     }
 
-
-
     echo '    <td class=', $class , '>
-            <label class="switch">
+            <label class="table__switch">
                 <input class="checkbox" type="checkbox" onchange="Slider(\'',$class,'\')">
-                <span class="slider"></span>
+                <span class="table__switch__slider"></span>
             </label>
         </td>
-        <td class=',$class,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><a href="#popup"><input class="button button--small" type="button" value="del" onclick="ModifPop(\'',$class,'\')"></a></td>
     </tr>';
 }
 else {
     echo '<tr>
-        <td class=', $class , ' style="font-weight: bold;" ></td>
+        <td class=', $class , ' style="font-weight: bold; font-size: 24px;" ></td>
         <td class=', $class , '></td>
         <td class=', $class , '></td>
         <td class=', $class , '></td>
@@ -44,14 +47,15 @@ else {
         <td class=', $class , '></td>
         <td class=', $class , '></td>
         <td class=', $class , '></td>
-        <td class=', $class , '><img src="../img/check.png" width="50%"></td>
+        <td class=', $class , '><img src="../img/check.png"></td>
         <td class=', $class , '>
-            <label class="switch">
+            <label class="table__switch">
                 <input class="checkbox" type="checkbox" onchange="Slider(\'',$class,'\')">
-                <span class="slider"></span>
+                <span class="table__switch__slider"></span>
             </label>
         </td>
-        <td class=',$class,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><a href="popup"><input class="button button--small" type="button" value="del" onclick="ModifPop(\'',$class,'\')"></a></td>
     </tr>';
 }
 ?>

referant/include/menu.html

@@ -1,4 +1,4 @@
 <meta charset="utf-8">
 <title>Admin ticket</title>
-<link href="../stylepage.css" rel="stylesheet">
+<link href="../css/style.css" rel="stylesheet">
-<img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px">
+<a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>

referant/include/nav.php

@@ -1,11 +1,11 @@
 <header>
-    <nav>
+    <nav class="nav">
         <ul>
-            <li class="menu"><a href="index.php">Accueil</a></li>
+            <li class="nav__link"><a href="index.php">Accueil</a></li>
-            <li class="menu"><a href="search.php">Recherche</a></li>
+            <li class="nav__link"><a href="search.php">Recherche</a></li>
-            <li class="menu"><a href="liste.php">Liste</a></li>
+            <li class="nav__link"><a href="liste.php">Liste</a></li>
-            <li class="menu"><a href="admin.php">Admin</a></li>
+            <li class="nav__link"><a href="admin.php">Admin</a></li>
-            <li class="menu"><a href="export.php">Export</a></li>
+            <li class="nav__link"><a href="export.php">Export</a></li>
         </ul>
     </nav>
 </header>

referant/include/popup.html

@@ -0,0 +1,8 @@
+<div id="popup" class="container-popup">
+    <div class="container-popup__popup">
+        <h2>Attention!</h2>
+        <a class="container-popup__popup__close" href="#">X</a>
+        <p>Voulez-vous vraiment supprimer ce ticket?</p>
+        <a href="#"><input class="button button--large" type="button" value="supprimer"></a>
+    </div>
+</div>

referant/index.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -9,26 +9,27 @@ include '../session_restraintes.php';
     </head>
 
     <body>
-        <a class="champ" href="../prof/index.php">client</a>
+        <div class="contaner-field"><a class="button button--large" href="../prof/index.php">formulaire</a></div>
         <?php include 'include/nav.php'; ?>
+        <?php include 'include/popup.html'; ?>
         <script type="text/javascript" src="js/edit.js" defer></script>
-        <table id="table">
+        <table class="table">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket récents non traités</th>
+                    <th colspan="15">Ticket récents non traités</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class="table-title">
+                <tr class="table__title">
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>
@@ -36,18 +37,29 @@ include '../session_restraintes.php';
                 </tr>
 
             <?php
-            $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+            $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
             $reponse = $bdd->query("SELECT * FROM pannes ORDER BY ID DESC");
-
+            $non_traite = 0;
             for ($j=0; $j < 3; $j++) {
-                $line = $reponse->fetch();
+                $line = $reponse->fetchArray();
-                if ($line['traitement'] == 0) {
+                if (isset($line['traitement'])) {
-                    $class = $line[0];
+                    if ($line['traitement'] == 0) {
-                    include 'include/line.php';
+                        $non_traite ++;
+                        $class = $line[0];
+                        include 'include/line.php';
+                    }
+                    else {
+                        $j--;
+                    }
+                }
+                else {
+                    break;
                 }
             }
-            $reponse->closeCursor();
+            if ($non_traite == 0) {
+                echo "<h2>Aucun ticket non traité</h2>";
+            }
             ?>
             </tbody>
         </table>

referant/js/admin.js

@@ -2,19 +2,17 @@ function Edit(clas) {
     let obj = document.getElementsByClassName(clas);
     let data = new FormData();
     if (obj[2].querySelector('input').value == 'edit') {
-        obj[1].innerHTML = '<input type="text" style="width: 80%;" value="' + obj[1].textContent + '">';
+        obj[1].innerHTML = '<input type="text" style="width: 100px;" value="' + obj[1].textContent + '">';
         obj[2].querySelector('input').value = 'ok';
     }
     else {
         let value = {};
         value.login = obj[0].textContent;
         value.pwd = obj[1].querySelector('input').value;
-        console.log(value);
         let xhr = new XMLHttpRequest();
         data.append('value', JSON.stringify(value));
         xhr.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
-                console.log(this.response);
                 obj[1].innerHTML = this.response[1];
                 obj[2].querySelector('input').value = 'edit';
             }

referant/js/edit.js

@@ -20,7 +20,7 @@ function Slider(id) {
     };
     xhr.open('POST', 'cible/slider.php', true);
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    xhr.send("is_checked=" + encodeURI(is_checked) + "&id=" + encodeURI(td[1].textContent));
+    xhr.send("is_checked=" + encodeURI(is_checked) + "&id=" + encodeURI(td[0].textContent));
 }
 
 function Edit(clas) {
@@ -28,7 +28,7 @@ function Edit(clas) {
     let data = new FormData();
     if (obj[13].querySelector('input').value == 'edit') {
         for (let i=1; i< 11; i++) {
-                obj[i].innerHTML = '<input type="text" style="width: 80%;" value="' + obj[i].textContent + '">';
+                obj[i].innerHTML = '<input class="input" type="text" style="width: 80%;" value="' + obj[i].textContent + '">';
             }
             obj[13].querySelector('input').value = 'ok';
     }
@@ -36,10 +36,8 @@ function Edit(clas) {
         let value = new Value(obj);
         let xhr = new XMLHttpRequest();
         data.append('value', JSON.stringify(value));
-        console.log(data);
         xhr.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
-                console.log(this.response);
                 for (let i=1; i<11; i++) {
                     obj[i].innerHTML = this.response[i];
                 }
@@ -72,3 +70,22 @@ function Value(list) {
     }
 
 }
+
+function ModifPop(clas) {
+    const popup = document.getElementsByClassName('container-popup__popup')[0];
+    popup.querySelector('p').textContent = 'Voulez-vous vraiment supprimer le ticket ' + clas + ' ?';
+    popup.querySelector('a > input').setAttribute('onclick', 'DelTicket('+clas+')');
+}
+
+function DelTicket(clas) {
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            location.reload();
+        }
+    };
+    xhr.open('POST', 'cible/delete.php', true);
+    xhr.responseType = 'text';
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.send("id=" + encodeURI(clas));
+}

referant/js/search.js

@@ -1,25 +1,34 @@
-const ticket = document.getElementsByClassName('ticket');
-
 document.getElementById('form').addEventListener('submit', function(e) {
     e.preventDefault();
 
-    let data = new FormData(this);
+    let tableBody = document.getElementsByTagName('tbody')[0]; // on raffraichie le tableau en enlevant les precedentes lignes
+    if (tableBody.children.length > 1) {
+        for (let i = 1; i < tableBody.children.length; i++) {
+            tableBody.removeChild(tableBody.children[i]);
+        }
+    }
+
+    let data = new FormData(this); // on récupère le formulaire
 
     let xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             if (this.response != false) {
-                console.log(this.response);
+                this.response.forEach((item) => {
-                for (let i=0; i < 11; i++) {
+                    pull_line(item[0]).then((value) => {
-                    ticket[i].textContent = this.response[i];
+                        let ticket = document.getElementsByClassName(item[0]);
-                }
+                        for (let i=0; i < 11; i++) {
-                if (this.response[11] == 1) {
+                            ticket[i].textContent = item[i];
-                    ticket[11].querySelector('img').src = "../img/check.png";
+                        }
-                }
+                        if (item[11] == 1) {
-                else {
+                            ticket[11].querySelector('img').src = "../img/check.png";
-                    ticket[11].querySelector('img').src = "../img/excla.png";
+                        }
-                }
+                        else {
-                document.getElementById('table-search').style.display = 'block';
+                            ticket[11].querySelector('img').src = "../img/excla.png";
+                        }
+                    });
+                    document.getElementsByTagName('table')[0].style.display = 'block';
+                });
             }
             else {
                 alert("Ce ticket n'existe pas");
@@ -31,5 +40,21 @@ document.getElementById('form').addEventListener('submit', function(e) {
     xhr.open('POST', 'cible/search.php', true);
     xhr.responseType = 'json';
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    xhr.send("id=" + encodeURI(data.get('id')));
+    xhr.send("champ=" + encodeURI(data.get('champ')) + "&" + "value=" + encodeURI(data.get('value')));
 });
+
+function pull_line(clas) {
+    return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest(), method = 'POST', file = 'include/line.php';
+        xhr.open(method, file, true);
+        xhr.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                resolve(document.getElementsByTagName('tbody')[0].innerHTML += this.response);
+            }
+        }
+        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+        xhr.send("class=" + encodeURI(clas));
+    })
+
+
+}

referant/liste.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -10,38 +10,49 @@ include '../session_restraintes.php';
     </head>
     <body id="corps">
         <?php include 'include/nav.php';?>
-        <table>
+        <?php include 'include/popup.html'; ?>
+
+        </div>
+        <table class="table">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket</th>
+                    <th colspan="15">Ticket</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>
                     <td>valider</td>
                 </tr>
                 <?php
-                $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+                $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
                 $reponse = $bdd->query("SELECT * FROM pannes ORDER BY ID");
-
+                $non_traite = 0;
-                while ($line = $reponse->fetch()) {
+                while ($line = $reponse->fetchArray()) {
-                    $class = $line[0];
+                    if (isset($line['traitement'])) {
-                    include 'include/line.php';
+                        $non_traite ++;
+                        $class = $line[0];
+                        include 'include/line.php';
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if ($non_traite == 0) {
+                    echo "<h2>Aucun ticket dans la base</h2>";
                 }
-                $reponse->closeCursor();
                 ?>
             </tbody>
         </table>

referant/search.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -12,40 +12,56 @@ include '../session_restraintes.php';
 
     <body id='corps'>
         <?php include 'include/nav.php'; ?>
+        <?php include 'include/popup.html'; ?>
         <form id="form" action="js/search.php" method="POST">
-            <div class="champ">
+            <div class="container-field">
-                <input class="entry" type="input" name="id">
+                <p>Recherche :</p>
+                    <select class="container-field__field" name='champ'>
+                        <option value="ID">ID</option>
+                        <option value="dates">Date</option>
+                        <option value="lieu">Lieu</option>
+                        <option value="salle">Salle</option>
+                        <option value="materiel">Matériel</option>
+                        <option value="marque">Marque</option>
+                        <option value="model">Modèle</option>
+                        <option value="nserie">N°Série</option>
+                        <option value="demandeur">Demandeur</option>
+                    </select>
+                    <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
+                    <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
             </div>
-            <div class="submit">
+            <div class="container-field">
-                <input id="submit" class="entry" type="submit">
+                <p>mot clé :</p>
+                <input class="container-field__field" type="input" name="value">
             </div>
+            <div class="container-field">
+                <input class="container-field__field container-field__field--submit" type="submit" value="Rechercher">
+            </div>
+
+
         </form>
-        <table id='table-search'>
+        <table class="table" style="display: none;">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket</th>
+                    <th colspan="15">Ticket</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>
                     <td>valider</td>
                 </tr>
-                <?php
-                $class = 'ticket';
-                include 'include/line.php';
-                ?>
             </tbody>
         </table>
     </body>

sass/main.scss

@@ -0,0 +1,365 @@
+$dark-grey: #84878C;
+$light-grey: #e5e5e5;
+$dark-bordeau: #59184E;
+$bordeau: #ac2a8d;
+
+
+@font-face {
+    font-family: "monofonto";
+    src: url('../font/raleway.ttf') format('truetype');
+}
+
+body {
+    z-index: 1;
+    font-family: monofonto;
+    background-color: $light-grey;
+    margin: 143px 20px;
+    text-align: center;
+    &>a {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        margin: auto;
+    }
+    .logo {
+        display: block;
+    }
+    h1 {
+        margin: 40px;
+        font-weight: bold;
+        color: #454545;
+    }
+    p {
+        font-weight: bold;
+        color: $bordeau;
+        font-size: 20px;
+        height: 20px;
+    }
+}
+
+// nav
+
+
+.nav {
+    width: 80%;
+    margin-left: 10%;
+    margin-bottom: 3%;
+    background-color: $dark-grey;
+    border-radius: 20px;
+    ul {
+        margin: auto;
+        padding: 0;
+        width: 60%;
+        &::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+    }
+    &__link{
+        width: 20%;
+        min-width: 100px;
+        float: left;
+        position: relative;
+        text-align: center;
+        list-style-type: none;
+        &:hover {
+            background-color: $dark-bordeau;
+            transition: .65s;
+            border-radius: 10px;
+        }
+        a {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            font-weight: bold;
+            display: inline-block;
+            text-decoration: none;
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}
+
+
+// formulaire
+
+
+form {
+    width: 20%;
+    min-width: 300px;
+
+    background-color: white;
+    display: block;
+
+    position: relative;
+    margin: auto;
+    border-radius: 30px;
+    padding: 20px;
+}
+
+.container-field {
+    position: relative;
+    small {
+        display: none;
+        color: red;
+    }
+    &__img {
+        display: none;
+        position: relative;
+        float: right;
+        width: 20px;
+        top: 12px;
+    }
+    &__field {
+        background-color: inherit;
+        position: relative;
+        display: block;
+        text-decoration-line: none;
+        appearance: none;
+        text-align: center;
+        color: #454444;
+        resize: none;
+        outline: none;
+        margin: 10px auto;
+        border: 4px solid #4e4d4d;
+        padding: 10px 10px;
+        border-radius: 30px;
+        width: 60%;
+        max-width: 300px;
+        transition: .25s;
+        &:focus, &:hover {
+            width: 70%;
+            border-color: $bordeau;
+            background-color: white;
+        }
+        &--submit:hover {
+            width: 65%;
+            border-color: #2ecc71;
+            background-color: #82E6AC;
+        }
+    }
+}
+
+
+// help
+
+
+.hint {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    &__int {
+        position: relative;
+        left: 25%;
+    }
+    &__help {
+        &:hover {
+            display: block;
+        }
+        display: none;
+        z-index: 2;
+        position: relative;
+        width: 170px;
+        left: 71%;
+        border-radius: 30px;
+        box-shadow: 0 0 10px black;
+        padding: 15px;
+        margin: 0;
+        background-color: $light-grey;
+        font-size: 14px;
+        p {
+            position: relative;
+            font-size: 14px;
+        }
+        img {
+            border-radius: 15px;
+            width: 100%;
+        }
+        code {
+            background-color: #aaa;
+            border-radius: 5px;
+            font-family: courier, monospace;
+            padding: 3px 5px;
+            font-size: 14px;
+        }
+    }
+}
+
+
+
+
+// table
+
+
+.table {
+    width: 80%;
+    border-radius: 5px;
+    margin-left: 10%;
+    margin-top: 2%;
+    background-color: $dark-grey;
+    color: white;
+    border: 1px solid $dark-grey;
+    th {
+        width: 1%;
+    }
+    td {
+        background-color: $light-grey;
+
+        border: 1px solid $dark-grey;
+        width: 1%;
+        min-width: 20px;
+        border-radius: 5px;
+
+        text-align: center;
+        word-break: break-all;
+        color: $dark-grey;
+        img {
+            width: 40%;
+            max-width: 40px;
+        }
+        .input {
+            border: 2px solid $bordeau;
+            border-radius: 5px;
+            text-align: inherit;
+            outline: none;
+            color: $dark-grey;
+            transition: .05s;
+            &:hover {
+                font-weight: bold;
+            }
+            &:focus {
+                font-weight: bold;
+                border: 4px solid $bordeau;
+            }
+        }
+    }
+    &__title td{
+        color: $bordeau;
+        font-weight: bold;
+        word-break: normal;
+    }
+    &__switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+        input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+            &:checked + .table__switch__slider {
+                background-color: #2ecc71;
+            }
+            &:focus + .table__switch__slider {
+                box-shadow: 0 0 1px #2ecc71;
+            }
+            &:checked + .table__switch__slider:before {
+                transform: translateX(26px);
+            }
+        }
+        &__slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: crimson;
+            border-radius: 34px;
+            transition: .4s;
+            &:before {
+                position: absolute;
+                border-radius: 50%;
+                content: "";
+                height: 26px;
+                width: 26px;
+                left: 4px;
+                bottom: 4px;
+                background-color: white;
+                transition: .4s;
+            }
+        }
+    }
+
+}
+
+.container-popup {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.7);
+    transition: opacity 500ms;
+    visibility: hidden;
+    opacity: 0;
+    &:target {
+        visibility: visible;
+        opacity: 1;
+    }
+    &__popup {
+        margin: auto;
+        padding: 20px;
+        background: #fff;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-radius: 5px;
+        width: 30%;
+        height: 150px;
+        position: absolute;
+        transition: all 5s ease-in-out;
+        h2 {
+            margin-top: 0;
+            color: #333;
+        }
+        p {
+            max-height: 30%;
+            overflow: auto;
+        }
+        &__close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            transition: all 200ms;
+            font-size: 30px;
+            font-weight: bold;
+            text-decoration: none;
+            color: #333;
+            &:hover {
+                color: #06D85F;
+            }
+        }
+    }
+}
+
+
+.button {
+    border: 3px solid $bordeau;
+    background-color: $light-grey;
+    font-weight: bold;
+    text-decoration: none;
+    transition: .5s;
+    &:hover {
+        color: $light-grey;
+        background-color: $bordeau;
+    }
+    &--small {
+        width: 3rem;
+        border-width: medium;
+        border-radius: 5px;
+        margin: 5px;
+        color: $dark-grey;
+    }
+    &--large {
+        color: $bordeau;
+        display: inline-block;
+        margin-bottom: 3%;
+        padding: 10px 40px;
+        border-radius: 20px;
+    }
+}

session.php → sessions/session.php

@@ -1,6 +1,6 @@
 <?php
 session_start();
 if (!isset($_SESSION['login']) || !isset($_SESSION['pwd'])) {
-    header('location: ../index.php');
+    header('location: ../login/index.php');
 }
 ?>

session_restraintes.php → sessions/session_restraintes.php

@@ -1,6 +1,6 @@
 <?php
 session_start();
 if ( !(isset($_SESSION['login']) && isset($_SESSION['pwd'])) && !($_SESSION['login'] == 'referant')) {
-    header('location: ../index.php');
+    header('location: ../login/index.php');
 }
 ?>

stylepage.css

@@ -1,298 +0,0 @@
-body{
-    z-index: 1;
-    background-color: #e5e5e5;
-    margin: 20px;
-    text-align: center;
-}
-
-.logo{
-    display: block;
-}
-
-h1{
-    margin: 40px;
-    font-weight: bold;
-    color: #454545;
-}
-
-p{
-    font-weight: bold;
-    color: #454444;
-    font-size: 20px;
-    height: 20px;
-}
-
-
-/*     Form     */
-
-
-form{
-    width: 400px;
-    position: relative;
-    background-color: #ffffff;
-    display: block;
-    margin: auto;
-    border-radius: 30px;
-    padding: 20px;
-}
-
-.container-champ{
-    position: relative;
-}
-
-.container-champ small{
-    display: none;
-    color: red;
-}
-
-.champ{
-    background-color: inherit;
-    position: relative;
-    display: block;
-
-    text-decoration-line: none;
-    text-align: center;
-    color: #454444;
-
-    margin: 10px auto;
-    border: 4px solid #4e4d4d;
-    padding: 10px 10px;
-    border-radius: 30px;
-
-    width: 200px;
-
-    transition: 0.25s;
-}
-
-.champ:focus, .champ:hover{
-    width: 300px;
-    border-color: #ac2a8d;
-    background-color: #dddddd;
-}
-
-.champ img{
-    display: none;
-    position: relative;
-    float: right;
-    width: 20px;
-    bottom: 20px;
-    right: 20px;
-}
-
-.entry{
-    border: none;
-    resize: none;
-    outline: none;
-    width: 100%;
-    text-align: inherit;
-    background-color: inherit;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-}
-
-.submit{
-    background-color: inherit;
-    position: relative;
-    display: block;
-
-    text-align: center;
-    color: #454444;
-
-    margin: 10px auto;
-    border: 4px solid #4e4d4d;
-    padding: 10px 10px;
-    border-radius: 30px;
-
-    width: 200px;
-
-    transition: 0.25s;
-}
-
-.submit:hover{
-    width: 250px;
-    background-color: #82E6AC;
-    border-color: #2ecc71;
-}
-
-
-/*     Indice     */
-
-
-.help{
-    display: none;
-    z-index: 2;
-    position: absolute;
-    width: 170px;
-    right: 0;
-    top: 30%;
-    border-radius: 30px;
-    padding: 15px;
-    margin: 0;
-    background-color: #dddddd;
-
-}
-
-.help * {
-    font-size: 14px;
-    width: 100%;
-}
-
-.help p{
-    position: relative;
-}
-
-code {
-    background-color: #aaa;
-    border-radius: 5px;
-    font-family: courier, monospace;
-    padding: 3px 5px;
-}
-
-
-/*     Nav     */
-
-
-nav{
-	width: 80%;
-    margin-left: 10%;
-	background-color: #84878C; /*couleur nav entière*/
-    border-radius: 20px;
-}
-
-nav > ul{
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0px;
-	width: 60%;
-}
-
-nav > ul::after{
-	content: "";
-	display: block;
-	clear: both;
-}
-
-nav > ul > li{
-	width: 20%;
-	float: left;
-	position: relative;
-	text-align: center;
-    list-style-type: none;
-}
-
-nav> ul > li > a{
-	font-size: 100%;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	color: #eee;
-    display: inline-block;
-	text-decoration: none;
-}
-
-.menu:hover{
-	background-color: #59184E;
-    transition: 1s;
-    border-radius: 10px;
-}
-
-.menu:hover > a{
-	color: #fff;
-	font-weight: bold;
-}
-
-
-/*     Table     */
-
-
-#table-search{
-    display: none;
-}
-
-.table-title td{
-    color: #ac2a8d;
-    font-weight: bold;
-}
-
-table{
-    width: 80%;
-    border-radius: 5px;
-    margin-left: 10%;
-    margin-top: 2%;
-    background-color: #84878C;
-    color: #fff;
-    border: 1px solid #84878C;
-}
-
-td {
-    background-color: #e5e5e5;
-
-    border: 1px solid #84878C;
-    border-radius: 5px;
-
-    text-align: center;
-    color: #84878C;
-
-    width: 7%;
-}
-
-th{
-    width: 100%;
-}
-
-
-/*     SWITCH     */
-
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: crimson;
-    border-radius: 34px;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-.slider:before {
-    position: absolute;
-    border-radius: 50%;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-input:checked + .slider {
-    background-color:#2ecc71;
-}
-
-input:focus + .slider {
-    box-shadow: 0 0 1px #2ecc71;
-}
-
-input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-}

ticket.sql

@@ -1,98 +0,0 @@
--- phpMyAdmin SQL Dump
--- version 5.1.1
--- https://www.phpmyadmin.net/
---
--- Host: localhost
--- Generation Time: Oct 30, 2021 at 07:45 PM
--- Server version: 10.4.21-MariaDB
--- PHP Version: 8.0.10
-
-SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-START TRANSACTION;
-SET time_zone = "+00:00";
-
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8mb4 */;
-
---
--- Database: `ticket`
---
-
--- --------------------------------------------------------
-
---
--- Table structure for table `logins`
---
-
-CREATE TABLE `logins` (
-  `login` varchar(255) NOT NULL,
-  `pwd` varchar(255) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
---
--- Dumping data for table `logins`
---
-
-INSERT INTO `logins` (`login`, `pwd`) VALUES
-('prof', 'arthur'),
-('referant', 'azerty');
-
--- --------------------------------------------------------
-
---
--- Table structure for table `pannes`
---
-
-CREATE TABLE `pannes` (
-  `ID` int(11) NOT NULL,
-  `dates` date NOT NULL,
-  `details` text NOT NULL,
-  `lieu` text NOT NULL,
-  `salle` varchar(255) NOT NULL,
-  `pos` text NOT NULL,
-  `materiel` varchar(255) NOT NULL,
-  `marque` varchar(255) NOT NULL,
-  `model` varchar(255) NOT NULL,
-  `nserie` text NOT NULL,
-  `demandeur` text NOT NULL,
-  `traitement` tinyint(1) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
---
--- Dumping data for table `pannes`
---
-
-INSERT INTO `pannes` (`ID`, `dates`, `details`, `lieu`, `salle`, `pos`, `materiel`, `marque`, `model`, `nserie`, `demandeur`, `traitement`) VALUES
-(1, '2021-10-22', 'Bonjour de Bretagne', 'Bâtiment A', '42', 'au fond a gauche', 'pc', 'alienware', 'lattitude E6410', 'sefv-45-gd1', 'barraux', 0),
-(4, '2021-10-23', 'sq@', 'FE', 'ds', 'QDGFDQ', 'UC', 'QGDF', 'FQG', 'QGZet', 'qgqre', 0),
-(5, '2021-10-23', 'sq@', 'FE', 'ds', 'QDGFDQ', 'UC', 'QGDF', 'FQG', 'sgf', 'sef', 0),
-(6, '2021-10-25', 'manque la dernière carte graphique', 'Locquirec', 'Ma chambre', 'Sur le lit', 'UC', 'Dell', 'LATITTUDE E6410', 'chai pas', 'BARRAUX', 0),
-(7, '2021-10-28', 'pas d\'inspi', 'Locquirec', 'chambre 6', 'pas bougé', 'UC', 'Dell', 'flemme', 'je sais pas', 'Le Cocotier des mers', 0);
-
---
--- Indexes for dumped tables
---
-
---
--- Indexes for table `pannes`
---
-ALTER TABLE `pannes`
-  ADD PRIMARY KEY (`ID`);
-
---
--- AUTO_INCREMENT for dumped tables
---
-
---
--- AUTO_INCREMENT for table `pannes`
---
-ALTER TABLE `pannes`
-  MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
-COMMIT;
-
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;