Merge pull request #5 from paoli7612/bootstrap

Bootstrap

Author: paoli7612

src/nuovaLezione/form.php

@@ -2,28 +2,31 @@
   <form method="post">
     <div class="form-group">
       <div class="form-label-group">
-        <input name="email" type="text" class="form-control" placeholder="Titolo" required="required" autofocus="autofocus">
-        <label for="inputEmail">Titolo</label>
+        <input id="inputTitolo" name="titolo" type="text" class="form-control" placeholder="Titolo" required="required" autofocus="autofocus">
+        <label for="inputTitolo">Titolo</label>
       </div>
     </div>
     <div class="form-group">
       <div class="form-label-group">
-        <input name="password" type="password" class="form-control" placeholder="Descrizione">
-        <label for="inputPassword">Descrizione</label>
+        <input id="inputDescrizione" name="note" type="text" class="form-control" placeholder="Descrizione">
+        <label for="inputDescrizione">Descrizione</label>
       </div>
     </div>
     <div class="form-group">
       <div class="form-label-group">
-        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModalLong">
+        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Materie">
           Seleziona materie
         </button>
+        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Etichette">
+          Aggiungi etichette
+        </button>
       </div>
     </div>
-    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+    <div class="modal fade" id="Materie" tabindex="-1" role="dialog" aria-labelledby="MaterieTitle" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="exampleModalLongTitle">Seleziona materie:</h5>
+            <h5 class="modal-title" id="MaterieTitle">Seleziona materie:</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -43,9 +46,36 @@
         </div>
       </div>
     </div>
-
-
+    <div class="modal fade" id="Etichette" tabindex="-1" role="dialog" aria-labelledby="EtichetteTitle" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="EtichetteTitle">Seleziona etichette:</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>Le etichette servono a semplificare la ricerca della lezione utilizzando queste parole chiave. Usa spazio per dividere un etichetta dal altra</p>
+            <div class="form-group">
+              <div class="form-label-group">
+                <input id="inputEtichetta" type="text" class="form-control" placeholder="Etichette" onkeyup="keyupEtichetta(this)">
+                <label for="inputEtichetta">Etichette</label>
+              </div>
+            </div>
+            <div id="etichette">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-primary" data-dismiss="modal">Conferma</button>
+          </div>
+        </div>
+      </div>
+    </div>
     <button type="submit" class="btn btn-primary btn-block">Crea nuova lezione</button>
   </form>
 </div>
+<script type="text/javascript" src="script.js">
+
+</script>
 <!-- Button trigger modal -->

src/nuovaLezione/post.php

@@ -0,0 +1,6 @@
+<?php
+
+  if ($_SERVER['REQUEST_METHOD'] == 'POST'){
+    print_r($_POST);    
+  }
+?>

src/nuovaLezione/script.js

@@ -0,0 +1,14 @@
+var autoincrement = 0;
+var keyupEtichetta  = function(a){
+  var string = a.value;
+  if (string.substr(string.length - 1, string.length) == " "){
+    var etichetta = string.substr(0, string.length - 1);
+    autoincrement++;
+    $('#etichette').append("<div class=\"form-group\"><input type=\"hidden\" name=\"etichetta_"+autoincrement+"\" value=\""+etichetta+"\"><div class=\"form-label-group\"><button onclick=\"eliminaEtichetta(this)\" type=\"button\" class=\"btn btn-block btn-dark\">"+etichetta+"<i class=\"fas fa-times float-right\"></i></button></div></div>");
+    a.value="";
+  }
+}
+
+var eliminaEtichetta = function(a){
+  a.parentElement.parentElement.remove();
+}