Added ability to edit planning information (stored in db)

admin/ajax_load.php

@@ -11,6 +11,10 @@ if (isset($_GET['function'])) {
         get_map_info();
     elseif ($_GET['function'] == "save_map_info")
         save_map_info();
+    elseif ($_GET['function'] == "get_activities_of_day")
+        get_activities_of_day();
+    elseif ($_GET['function'] == "save_day_activities")
+        save_day_activities();
 } else
     show_error();
 
@@ -54,6 +58,27 @@ function save_map_info() {
     }
 }
 
+function get_activities_of_day() {
+    if (isset($_GET['day'])) {
+        header('Content-Type: application/json');
+        $dao = new Dao('../');
+        echo json_encode($dao->get_activities_of_day($_GET['day']));
+    } else {
+        show_error();
+    }
+}
+
+function save_day_activities() {
+    if (isset($_GET['day']) && isset($_GET['entries'])) {
+        $dao = new Dao('../');
+        $dao->save_day_activities($_GET['day'], $_GET['entries']);
+        echo "Réussite";
+    } else {
+        show_error();
+    }
+}
+
+
 
 function show_error() {
     echo "Échec : ";

admin/index.php

@@ -8,6 +8,8 @@ $relativePath = "../";
     <a href="scores.php">Editer les scores</a>
     <br>
     <a href="map.php">Editer le texte de la carte</a>
+    <br>
+    <a href="planning.php">Editer le planning</a>
 
 <?php
 $pageContent = ob_get_clean(); // Store html content in variable

admin/map.php

@@ -13,7 +13,7 @@ require_once $relativePath.'classes/dao.php';
 
     <br>
 
-    <label for="titleInput">Title</label>
+    <label for="titleInput">Titre</label>
     <input type="text" id="titleInput">
 
     <label for="descriptionInput">Description</label>

admin/planning.php

@@ -0,0 +1,63 @@
+<?php
+ob_start(); // Start reading html
+$relativePath = "../";
+require_once $relativePath.'classes/dao.php';
+?>
+    <h1>ADMIN</h1>
+    <h2>Edition du planning</h2>
+
+
+    <select id="daySelect">
+        <option value="1">Lundi</option>
+        <option value="2">Mardi</option>
+        <option value="3">Mercredi</option>
+        <option value="4">Jeudi</option>
+        <option value="5">Vendredi</option>
+        <option value="6">Samedi</option>
+        <option value="7">Dimanche</option>
+    </select>
+
+    <br>
+    <div class="add-line">
+        <i class="fas fa-plus"></i>
+    </div>
+    <div class="edit-header">
+        <div class="planning-start">Début</div>
+        <div class="planning-length">Durée</div>
+        <div class="planning-name">Nom</div>
+        <div class="planning-trash"><i class='fas fa-trash'></i></div>
+    </div>
+    <table id="activityTable">
+    </table>
+
+    <div class="save">
+        <i class="fas fa-save"></i> Enregistrer
+    </div>
+    <br>
+    <div class="buttons-container">
+        <a href="index.php" class="admin-back-button">
+            Retour sur la page admin
+        </a>
+        <a href="<?= $relativePath ?>map.php" class="website-back-button">
+            Retour sur le site
+        </a>
+    </div>
+
+    <link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
+
+<?php
+$pageContent = ob_get_clean(); // Store html content in variable
+$pageTitle = "Édition carte";
+
+$pageScripts = "<script type=\"text/javascript\" src=\"../assets/js/planningManager.js\"></script>";
+
+include($relativePath . "includes/template.php"); // Display template with variable content
+
+function setup_map_dropdown() {
+    $dao = new Dao('../');
+    foreach ($dao->get_map_selectors() as $row) {
+        echo "<option value='" . $row['selector'] . "'>" . $row['selector'] . "</option>";
+    }
+}
+
+?>

assets/css/adminEdit.css

@@ -101,6 +101,7 @@ input, textarea {
 
 .add-line{
     font-size: 30px;
+    background: #ab1d00;
     color: #fafafa;
     cursor: pointer;
     transition: 0.3s;
@@ -158,3 +159,30 @@ input, textarea {
     background: #2ce20b;
     box-shadow: 0 0 5px #2ce20b;
 }
+
+#activityTable {
+    width: 100%;
+}
+
+#activityTable tr {
+    transition: 0.2s;
+}
+
+#activityTable tr:hover {
+    cursor: pointer;
+    background-color: #62010e;
+}
+
+
+.planning-start {
+    width: 10%;
+}
+.planning-length {
+    width: 10%;
+}
+.planning-name {
+    width: 70%;
+}
+.planning-trash {
+    width: 10%;
+}

assets/js/planningManager.js

@@ -0,0 +1,164 @@
+let ajaxurl = 'ajax_load.php';
+let uniqueID = 0;
+
+let currentActivities = [];
+
+let entryTemplate =
+    '<tr class="entry">' +
+    '<td class="planning-start"></td>' +
+    '<td class="planning-length"></td>' +
+    '<td class="planning-name"></td>' +
+    '<td class="remove-line">' +
+    '<i class="fas fa-trash"></i>' +
+    '</td>' +
+    '</tr>';
+
+let editEntryTemplate =
+    '    <label for="startTimeInput">Heure de début</label>\n' +
+    '    <input type="number" id="startTimeInput">\n' +
+    '    <label for="lengthTimeInput">Durée</label>\n' +
+    '    <input type="number" id="lengthTimeInput">\n' +
+    '\n' +
+    '    <label for="smallTitleInput">Titre dans le planning</label>\n' +
+    '    <input type="text" id="smallTitleInput">\n' +
+    '    <label for="fullTitleInput">Titre dans la description</label>\n' +
+    '    <input type="text" id="fullTitleInput">\n' +
+    '\n' +
+    '    <label for="descriptionInput">Description</label>\n' +
+    '    <textarea rows="15" id="descriptionInput"></textarea>';
+
+$(document).ready(function () {
+    getDayActivities(getSelectedDay());
+    $('#daySelect').on('change', function () {
+        getDayActivities(getSelectedDay());
+    });
+    $(".save").click(function () {
+        saveDayActivities();
+    });
+    $('.add-line').on('click', function () {
+        let newElem = {};
+        uniqueID += 1;
+        newElem['ID'] = 'new_'+ uniqueID;
+        newElem['day'] = getSelectedDay();
+        newElem['start'] = '';
+        newElem['length'] = '';
+        newElem['small_title'] = '';
+        newElem['full_title'] = '';
+        newElem['description'] = '';
+        currentActivities.push(newElem);
+        showInfo(newElem);
+        addLine(newElem['ID'], '', '', '');
+    });
+});
+
+function getSelectedDay() {
+    return $('#daySelect').val();
+}
+
+function getRealId(id) {
+    return id.replace('entry_', '');
+}
+
+function findActivityOfId(id) {
+    let match = undefined;
+    for (let i = 0; i < currentActivities.length; i++) {
+        if (currentActivities[i]['ID'] === id) {
+            match = currentActivities[i];
+            break;
+        }
+    }
+    return match;
+}
+
+function removeActivityOfId(id) {
+    for (let i = 0; i < currentActivities.length; i++) {
+        if (currentActivities[i]['ID'] === id) {
+            currentActivities.splice(i, 1);
+            break;
+        }
+    }
+}
+
+function updateListEntry(entry) {
+    let $listEntry = $('#entry_' + entry['ID']);
+    if ($listEntry !== undefined) {
+        $listEntry.find('.planning-start').text(entry['start']);
+        $listEntry.find('.planning-length').text(entry['length']);
+        $listEntry.find('.planning-name').text(entry['small_title']);
+    }
+}
+
+function addLine(id, start, length, name) {
+    let $entry = $(entryTemplate);
+    $entry.attr('id', 'entry_' + id);
+    $entry.find('.remove-line').attr('id', 'removeEntry_' + id);
+    $("#activityTable").prepend($entry);
+    $entry.find('.planning-start').text(start);
+    $entry.find('.planning-length').text(length);
+    $entry.find('.planning-name').text(name);
+    $("#removeEntry_" + id).on("click", function () {
+        removeActivityOfId(getRealId($entry.attr('id')));
+        $entry.remove();
+    });
+    $entry.on("click", function () {
+        showInfo(findActivityOfId(getRealId($entry.attr('id'))));
+    });
+}
+
+function showInfo(entry) {
+    if (entry !== undefined) {
+        $.alert({
+            title: 'Edition du planning',
+            theme: 'supervan',
+            content: editEntryTemplate,
+            onOpenBefore: function () {
+                $('#startTimeInput').val(entry['start']);
+                $('#lengthTimeInput').val(entry['length']);
+                $('#smallTitleInput').val(entry['small_title']);
+                $('#fullTitleInput').val(entry['full_title']);
+                $('#descriptionInput').val(entry['description']);
+            },
+            onClose: function () {
+                entry['start'] =$('#startTimeInput').val();
+                entry['length'] = $('#lengthTimeInput').val();
+                entry['small_title'] = $('#smallTitleInput').val();
+                entry['full_title'] = $('#fullTitleInput').val();
+                entry['description'] = $('#descriptionInput').val();
+                updateListEntry(entry);
+            },
+        });
+    } else
+        alert('Une erreur est survenue');
+}
+
+function saveDayActivities() {
+    let object = {
+        "function": 'save_day_activities',
+        "day": getSelectedDay(),
+        "entries": currentActivities,
+    };
+    $.get(
+        ajaxurl,
+        object,
+        function (data) {
+            alert(data);
+        });
+}
+
+function getDayActivities(day) {
+    $('#activityTable').html('');
+    let object = {
+        "function": 'get_activities_of_day',
+        'day': day,
+    };
+    $.get(
+        ajaxurl,
+        object,
+        function (data) {
+            currentActivities = data;
+            for (let i = 0; i < data.length; i++) {
+                addLine(data[i]['ID'], data[i]['start'], data[i]['length'], data[i]['small_title']);
+            }
+        }
+    );
+}

classes/dao.php

@@ -11,7 +11,7 @@ class Dao
     {
         if ($this->debug) {
             $username = 'root';
-            $password ='';
+            $password = '';
             $dsn = 'mysql:dbname=phpmyadmin;host=127.0.0.1';
         } else {
             $username = 'accueil_insa';
@@ -57,21 +57,24 @@ class Dao
         }
     }
 
-    public function get_map_info($selector) {
+    public function get_map_info($selector)
+    {
         $sql = 'SELECT title, description FROM map_insa WHERE selector = ?';
         $cursor = $this->conn->prepare($sql);
         $cursor->execute([$selector]);
         return $cursor->fetchAll(PDO::FETCH_ASSOC);
     }
 
-    public function get_map_selectors() {
+    public function get_map_selectors()
+    {
         $sql = 'SELECT selector FROM map_insa';
         $cursor = $this->conn->prepare($sql);
         $cursor->execute();
         return $cursor->fetchAll(PDO::FETCH_ASSOC);
     }
 
-    public function save_map_info($selector, $info_json) {
+    public function save_map_info($selector, $info_json)
+    {
         $sql = 'DELETE FROM map_insa WHERE selector = ?';
         $cursor = $this->conn->prepare($sql);
         $cursor->execute([$selector]);
@@ -80,6 +83,26 @@ class Dao
         $cursor->execute([$info_json['title'], $info_json['description'], $selector]);
     }
 
+    public function get_activities_of_day($day)
+    {
+        $sql = 'SELECT * FROM planning_insa WHERE day = ?';
+        $cursor = $this->conn->prepare($sql);
+        $cursor->execute([$day]);
+        return $cursor->fetchAll(PDO::FETCH_ASSOC);
+    }
+
+    public function save_day_activities($day, $info_json)
+    {
+        $sql = 'DELETE FROM planning_insa WHERE day = ?';
+        $cursor = $this->conn->prepare($sql);
+        $cursor->execute([$day]);
+
+        foreach ($info_json as $value) {
+            $sql = 'INSERT INTO planning_insa (day, small_title, full_title, description, start, length) VALUES (?, ?, ?, ?, ?, ?)';
+            $cursor = $this->conn->prepare($sql);
+            $cursor->execute([$value['day'], $value['small_title'], $value['full_title'], $value['description'], $value['start'], $value['length']]);
+        }
+    }
 }