Start of the front end

2026-01-18 16:37:25 +01:00 · 2023-06-08 16:02:33 +02:00
parent 4816035eaa
commit 5fa2f360ff
8 changed files with 377 additions and 0 deletions
--- a/FrontEnd/README.md
+++ b/FrontEnd/README.md
--- a/FrontEnd/V5.png
+++ b/FrontEnd/V5.png
--- a/FrontEnd/index.html
+++ b/FrontEnd/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+   <meta charset="utf-8">
+   <title> Groupe 8 Projet C </title>
+   <link rel="stylesheet" href="style.css">
+   <script src="script.js" defer></script>
+   <link rel="icon" href="V5.png" type="image/x-icon">
+   <link rel="preconnect" href="https://fonts.googleapis.com">
+   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+   <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+ </head>
+ <body>
+    <h1>Filmothèque</h1>
+    <div id="research">
+        <form action="result.html" id="researchForm">
+            <div class="formResearchAndCheck">
+                <input type="text" id="director" class="searchField" name="director" placeholder="Rechercher par le nom d'un réalisateur">
+                <input type="checkbox" id="directorCheck" name="directorCheck" checked>
+            </div>
+            <div class="formResearchAndCheck">
+                <input type="text" id="duree" class="searchField" name="duree" placeholder="Rechercher par la durée" disabled>
+                <input type="checkbox" id="dureeCheck" name="dureeCheck">
+            </div>
+            <div class="formResearchAndCheck">
+                <input type="text" id="categorie" class="searchField" name="categorie" placeholder="Rechercher par la catégorie" disabled>
+                <input type="checkbox" id="categorieCheck" name="categorieCheck">
+            </div>
+            <div class="formResearchAndCheck">
+                <input type="text" id="film" class="searchField" name="film" placeholder="Rechercher par le nom d'un film" disabled>
+                <input type="checkbox" id="filmCheck" name="filmCheck">
+            </div>
+            <button type="submit" id="researchButton" class="searchButton">Rechercher</button>
+        </form>
+        <button id="realMostMovie" onclick="realMostMovie()" class="searchButton">Quel réal a fait le plus de film ?</button><br>
+        <button id="researchAll" onclick="researchAll()" class="searchButton">Tout rechercher</button><br>
+        <button id="stop" onclick="stopServer()">Couper le serveur</button>
+    </div>
+    <div id="bottom">
+        <p>Created by Louis MARVILLET, Herman MARZELIERE, Félix MARQUET<br>
+            <br>The source code is available <a href="https://github.com/BreizhHardware/projetCGroupe8">here</a></p>
+    </div>
+ </body>
+</html>
--- a/FrontEnd/read_write.js
+++ b/FrontEnd/read_write.js
@@ -0,0 +1,52 @@
+// ------- WRITE FILE -------
+function writeFile(id_form,func) {
+
+    var element = document.createElement('a');
+
+    let text1 = document.getElementById(id_form);
+    let count = text1.elements.length;
+    let textToSave = func;
+    for(let i = 0;i<count-1;i++){
+        textToSave += ";" + text1[i].value;
+    }
+
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textToSave));
+    element.setAttribute('download', 'request.txt');
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+
+   // text1.submit();
+}
+// -------------------------
+
+
+// ------- READ FILE -------
+function readFileByName(fileName){
+
+    let xhr = new XMLHttpRequest();
+    do {
+        xhr.open("GET", fileName, false);
+        xhr.send(null);
+
+    }while(xhr.status === 404);
+
+    // assumes status 200
+    return xhr.responseText;
+}
+
+function readFile(){
+    readFileByName("ready.txt");
+    return readFileByName("results.txt");
+}
+// -------------------------
+
+
+function callWrite() {
+    writeFile("form-findByDirector",  )
+}
+
+form_button = document.getElementById("go")
+form_button.onclick = callWrite
--- a/FrontEnd/result.html
+++ b/FrontEnd/result.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Résultat de la recherche</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+    <link rel="icon" href="V5.png" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+</head>
+<body>
+  <h1>Filmothèque</h1>
+  <div id="result">
+      <div id="resultTitleContainer">
+          <h2 id="resultTitle">Film par [Réalisateur] :<br> Temps de recherche : [temps]</h2>
+      </div>
+      <div id="resultContentContainer1">
+          <div class="resultContent">
+            <div class="card">
+                Titre : [titre]<br>
+                Durée : [durée]<br>
+                Catégorie : [catégorie]
+            </div>
+          </div>
+      </div>
+      <div id="resultContentContainer2">
+          <div class="resultContent">
+          </div>
+      </div>
+      <div id="resultContentContainer3">
+          <div class="resultContent">
+          </div>
+      </div>
+      <div id="resultContentContainer4">
+          <div class="resultContent">
+          </div>
+      </div>
+  </div>
+  <button class="searchButton" id="returnToHome" onclick="returnToHome()">Retourner à l'accueil</button><br>
+  <button id="stop stopResult" onclick="stopServer()">Couper le serveur</button>
+  <div id="bottom">
+    <p>Created by Louis MARVILLET, Herman MARZELIERE, Félix MARQUET<br>
+      <br>The source code is available <a href="https://github.com/BreizhHardware/projetCGroupe8">here</a></p>
+  </div>
+</body>
+</html>
--- a/FrontEnd/script.js
+++ b/FrontEnd/script.js
@@ -0,0 +1,101 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+    //Add event listener to the checkboxes
+    document.getElementById("directorCheck").addEventListener("change", function() {
+        if(this.checked){
+            document.getElementById("director").disabled = false;
+            document.getElementById("director").style.opacity = "1";
+            document.getElementById("duree").disabled = true;
+            document.getElementById("duree").value = "";
+            document.getElementById("duree").style.opacity = "0.5";
+            document.getElementById("categorie").disabled = true;
+            document.getElementById("categorie").value = "";
+            document.getElementById("categorie").style.opacity = "0.5";
+            document.getElementById("film").disabled = true;
+            document.getElementById("film").value = "";
+            document.getElementById("film").style.opacity = "0.5";
+            document.getElementById("dureeCheck").checked = false;
+            document.getElementById("categorieCheck").checked = false;
+            document.getElementById("filmCheck").checked = false;
+        }
+    });
+
+    document.getElementById("dureeCheck").addEventListener("change", function() {
+        if(this.checked){
+            document.getElementById("duree").disabled = false;
+            document.getElementById("duree").style.opacity = "1";
+            document.getElementById("director").disabled = true;
+            document.getElementById("director").value = "";
+            document.getElementById("director").style.opacity = "0.5";
+            document.getElementById("categorie").disabled = true;
+            document.getElementById("categorie").value = "";
+            document.getElementById("categorie").style.opacity = "0.5";
+            document.getElementById("film").disabled = true;
+            document.getElementById("film").value = ""
+            document.getElementById("film").style.opacity = "0.5";
+            document.getElementById("directorCheck").checked = false;
+            document.getElementById("categorieCheck").checked = false;
+            document.getElementById("filmCheck").checked = false;
+        }
+    });
+
+    document.getElementById("categorieCheck").addEventListener("change", function() {
+        if(this.checked){
+            document.getElementById("categorie").disabled = false;
+            document.getElementById("categorie").style.opacity = "1";
+            document.getElementById("director").disabled = true;
+            document.getElementById("director").value = "";
+            document.getElementById("director").style.opacity = "0.5";
+            document.getElementById("duree").disabled = true
+            document.getElementById("duree").value = "";
+            document.getElementById("duree").style.opacity = "0.5";
+            document.getElementById("film").disabled = true;
+            document.getElementById("film").value = "";
+            document.getElementById("film").style.opacity = "0.5";
+            document.getElementById("directorCheck").checked = false;
+            document.getElementById("dureeCheck").checked = false;
+            document.getElementById("filmCheck").checked = false;
+        }
+    });
+
+    document.getElementById("filmCheck").addEventListener("change", function() {
+        if(this.checked){
+            document.getElementById("film").disabled = false;
+            document.getElementById("film").style.opacity = "1";
+            document.getElementById("director").disabled = true;
+            document.getElementById("director").value = "";
+            document.getElementById("director").style.opacity = "0.5";
+            document.getElementById("duree").disabled = true;
+            document.getElementById("duree").value = "";
+            document.getElementById("duree").style.opacity = "0.5";
+            document.getElementById("categorie").disabled = true;
+            document.getElementById("categorie").value = "";
+            document.getElementById("categorie").style.opacity = "0.5";
+            document.getElementById("directorCheck").checked = false;
+            document.getElementById("dureeCheck").checked = false;
+            document.getElementById("categorieCheck").checked = false;
+        }
+    });
+});
+
+window.addEventListener("load", function(event) {
+    document.getElementById("director").disabled = false;
+    document.getElementById("duree").disabled = true;
+    document.getElementById("duree").value = "";
+    document.getElementById("duree").style.opacity = "0.5";
+    document.getElementById("categorie").disabled = true;
+    document.getElementById("categorie").value = "";
+    document.getElementById("categorie").style.opacity = "0.5";
+    document.getElementById("film").disabled = true;
+    document.getElementById("film").value = "";
+    document.getElementById("film").style.opacity = "0.5";
+    document.getElementById("directorCheck").checked = true;
+    document.getElementById("dureeCheck").checked = false;
+    document.getElementById("categorieCheck").checked = false;
+    document.getElementById("filmCheck").checked = false;
+});
+
+// Recuperation des données du formulaire
+function getFormData() {
+    if(document.getElementById("directorCheck").checked){
+
+}
--- a/FrontEnd/style.css
+++ b/FrontEnd/style.css
@@ -0,0 +1,132 @@
+body{
+   font-family: 'Open Sans', sans-serif;
+   background-color: #313338;
+   color: white;
+   overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+#bottom{
+   color: white;
+   background-color: #1E1F22;
+   text-align: center;
+   padding-left: 0.5em;
+   padding-right: 0.5em;
+}
+
+a{
+   text-decoration: underline;
+   color: white;
+}
+
+h1{
+   text-align: center;
+    font-size: 3em;
+}
+
+#research{
+   text-align: center;
+}
+
+.searchField{
+   width: 40%;
+   height: 4em;
+   background-color: #1E1F22;
+   color: white;
+   border: none;
+   margin-bottom: 5em;
+   text-align: center;
+}
+
+.searchButton{
+   width: 25%;
+   height: 4em;
+   margin-bottom: 2em;
+   background-color: #3B428A;
+   color: white;
+   border: none;
+    cursor: pointer;
+}
+
+#stop{
+    width: 10%;
+    height: 4em;
+    margin-bottom: 2em;
+    background-color: #FF0000;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+#result{
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-rows: repeat(4, minmax(0,1fr));
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: 5%;
+    margin-top: 10%;
+}
+
+#resultTitleContainer{
+    grid-area: 1 / 1 / 5 / 2;
+}
+
+#resultContentContainer1{
+    grid-area: 1 / 2 / 2 / 3;
+}
+
+#resultContentContainer2{
+    grid-area: 2 / 2 / 3 / 3;
+}
+
+#resultContentContainer3{
+    grid-area: 3 / 2 / 4 / 3;
+}
+
+#resultContentContainer4{
+    grid-area: 4 / 2 / 5 / 3;
+}
+
+.resultContent{
+    display: flex;
+}
+
+#resultTitle{
+    text-align: center;
+    margin-top: 5%;
+    font-size: 20px;
+}
+
+.card{
+    background-color: #2B2D31;
+    color: white;
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    padding: 2%;
+    transition: background-color 0.3s ease-in-out;
+    border-radius: 10px;
+}
+
+.card:hover{
+    background-color: #3b428a;
+}
+
+#returnToHome{
+    margin-left: 37.5%;
+}
+
+#stop\ stopResult{
+    margin-left: 45%;
+    width: 10%;
+    height: 4em;
+    margin-bottom: 2em;
+    background-color: #FF0000;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
--- a/README.md
+++ b/README.md