le premier d'une longue série

3 years ago · ad7dbe167a
10 changed files with 325 additions and 0 deletions
--- a/général.odt
+++ b/général.odt
--- a/champ.php
+++ b/champ.php
@ -0,0 +1,39 @@
+<?php
+if ($balise == 'input'){
+    echo '<div class="container-champ">
+        <p> ',$titre,' : <a id="int" href="#" onmouseup=displayHelp(',$sql_name,') ><img src="img/int.png" alt="point_int" width=20px></a></p>
+        <div class="champ">
+            <input class="entry" type=',$type,' name=',$sql_name,' required><br>
+            <img class="check" src="img/check.png" alt="check">
+            <img class="excla" src="img/excla.png" alt="exclamation">
+        </div>
+        <small>Error: ',$error,'</small>
+    </div>';
+}
+elseif ($balise == 'select') {
+    echo '<p>',$titre,' :</p>
+    <div class="champ">
+        <select class="entry" name=',$sql_name,' required>
+            <option value="UC">UC</option>
+            <option value="IMP">IMP</option>
+            <option value="ECR">ECR</option>
+            <option value="VID">VID</option>
+            <option value="TBI">TBI</option>
+        </select>
+        <img class="check" src="img/check.png" alt="check">
+        <img class="excla" src="img/excla.png" alt="exclamation">
+    </div>
+    <small>Error: ',$error,'</small>';
+}
+elseif ($balise == 'textarea') {
+    echo '<div class="container-champ">
+        <p>',$titre,' :</p>
+        <div class="champ">
+            <textarea class="entry" rows="10" cols="30" name=',$titre,' required></textarea><br>
+            <img class="check" src="img/check.png" alt="check">
+            <img class="excla" src="img/excla.png" alt="exclamation">
+        </div>
+        <small>Error: ',$error,'</small>
+    </div>';
+}
+?>
--- a/cible.php
+++ b/cible.php
@ -0,0 +1,20 @@
+<?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) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur)');
+
+$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']
+	));
+
+echo 'Votre ticket à bien été pris en compte';
+?>
--- a/img/check.png
+++ b/img/check.png
--- a/img/excla.png
+++ b/img/excla.png
--- a/img/int.png
+++ b/img/int.png
--- a/img/logo_PC.png
+++ b/img/logo_PC.png
--- a/index.php
+++ b/index.php
@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html onclick=hideHelp() lang="fr">
+    <head>
+        <meta charset="utf-8">
+        <title>Tickets de panne</title>
+        <link href="stylepage.css" rel="stylesheet">
+        <script type="text/javascript" src="script.js" defer></script>
+        <img class="logo" src="img/logo_PC.png" alt="logo_PC" width="200px">
+    </head>
+    <body id="page">
+        <h1 id="titre">
+            Formulaire de panne informatique
+        </h1>
+        <form method="POST" action="cible.php">
+            <div class="container-champ">
+                <?php
+                    $titre = 'Date';
+                    $sql_name = 'dates';
+                    $type = 'date';
+                    $balise = 'input';
+                    $error = 'Veuillez saisir une date';
+                    include("champ.php");
+                ?>
+                <div class='help' id='dates'>
+                    <p>hello</p>
+                </div>
+            </div>
+            <?php
+                $titre = 'Details';
+                $sql_name = 'details';
+                $balise = 'textarea';
+                $error = '';
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Lieu';
+                $sql_name = 'lieu';
+                $type = 'text';
+                $balise = 'input';
+                $error = "Vous n'avez saisie de lieu";
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Salle';
+                $sql_name = 'salle';
+                $type = 'text';
+                $balise = 'input';
+                $error = "Vous n'avez pas saisie de salle";
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Position dans la salle';
+                $sql_name = 'pos';
+                $type = 'text';
+                $balise = 'input';
+                $error = 'Veuillez remplir ce champ';
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Matériel';
+                $sql_name = 'materiel';
+                $balise = 'select';
+                $error = '';
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Marque';
+                $sql_name = 'marque';
+                $type = 'text';
+                $balise = 'input';
+                $error = "Vous n'avez pas saisie la marque";
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Model';
+                $sql_name = 'model';
+                $type = 'text';
+                $balise = 'input';
+                $error = "Veuillez saisir le model";
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'N° de série';
+                $sql_name = 'nserie';
+                $type = 'text';
+                $balise = 'input';
+                $error = "Vous n'avez saisie le n° de série";
+                include("champ.php");
+            ?>
+            <?php
+                $titre = 'Demandeur';
+                $sql_name = 'demandeur';
+                $type = 'text';
+                $balise = 'input';
+                $error = 'demandeur';
+                include("champ.php");
+            ?>
+            <div class="container-champ">
+                <br>
+                <div class="champ">
+                    <input id="submit" class="entry" type="button" onclick="checkInputs()" value="Valider">
+                </div>
+            </div>
+
+        </form>
+    </body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,63 @@
+const image = document.getElementById('int');
+const button = document.getElementById('submit');
+const page = document.getElementById('page');
+
+const check = document.getElementsByClassName('check');
+const excla = document.getElementsByClassName('excla');
+const entry = document.getElementsByClassName('entry');
+const help = document.getElementsByClassName('help');
+
+page.addEventListener('click', function() {
+    console.log('hello');
+    for (let i=0; i<help; i++) {
+        console.log(help[i]);
+        if (help[i].style.display == 'block') {
+            help[i].style.display = 'none';
+        }
+    }
+});
+
+function hideHelp() {
+    console.log('hello');
+    for (let i=0; i<help.length; i++) {
+        console.log(help[i]);
+        if (help[i].style.display == 'block') {
+            help[i].style.display = 'none';
+        }
+    }
+}
+
+function displayHelp(id) {
+    if (id.style.display == 'none') {
+        id.style.display = 'block';
+    }
+    else {
+        id.style.display = 'none';
+    }
+}
+
+function checkInputs() {
+    for (let i=0; i < entry.length ; i++) {
+        console.log(i);
+        if (entry[i].type != 'button') {
+            if (entry[i].value == '') {
+                setError(i);
+            }
+            else {
+                setSuccess(i);
+            }
+        }
+    }
+}
+
+function setError(indice) {
+    check[indice].style.display = 'none';
+    excla[indice].style.display = 'block';
+    document.getElementsByTagName('small')[indice].style.display = 'block';
+}
+
+function setSuccess(indice) {
+    check[indice].style.display = 'block';
+    excla[indice].style.display = 'none';
+    document.getElementsByTagName('small')[indice].style.display = 'none';
+}
--- a/stylepage.css
+++ b/stylepage.css
@ -0,0 +1,96 @@
+body{
+    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{
+    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;
+    display: flex;
+    position: relative;
+    flex-direction: row-reverse;
+    text-align: center;
+    color: #454444;
+    display: block;
+    margin: 10px auto;
+    border: 4px solid #4e4d4d;
+    padding: 10px 10px;
+    width: 200px;
+    border-radius: 30px;
+    transition: 0.25s;
+}
+
+.entry{
+    border: none;
+    resize: none;
+    outline: none;
+    width: 100%;
+    text-align: inherit;
+    background-color: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.champ:focus, .champ:hover{
+    width: 300px;
+    border-color: #2ecc71;
+    background-color: #dddddd;
+}
+
+.champ img{
+    display: none;
+    position: relative;
+    float: right;
+    width: 20px;
+    bottom: 20px;
+    right: 20px;
+}
+
+.submit:hover, .submit:focus{
+    width: 250px;
+    background-color: rgba(46, 204, 113, 0.3);
+    border-color: #2ecc71;
+}
+
+.help{
+    display: none;
+    margin: 0;
+    background-color: #22e6b5;
+}