Merged in feature/MAPG-125-ability-to-delete-maps (pull request #108)

Feature/MAPG-125 ability to delete maps
2020-06-14 00:42:31 +00:00 · 2020-06-14 00:42:31 +00:00 · 5760e31e29
commit 5760e31e29
parent 6d68f247e6 14fd723f26
13 changed files with 222 additions and 55 deletions
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@ -4,7 +4,7 @@
    z-index: 1;
 }

-#cover {
+#guessCover {
    position: absolute;
    top: 40px;
    left: 0;
--- a/public/static/css/map_editor.css
+++ b/public/static/css/map_editor.css
@ -1,17 +1,3 @@
-#metadata {
-    position: absolute;
-    top: 50px;
-    left: 10px;
-    padding: 10px;
-    background-color: #eeeeee;
-    border: solid 1px #555555;
-    border-radius: 3px;
-    box-sizing: border-box;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-}
-
 #map {
    width: 100%;
    height: calc(100% - 40px);
@ -61,9 +47,6 @@
 }

@media screen and (max-width: 999px) and (min-height: 600px) {
-    #metadata {
-        width: calc(100% - 155px);
-    }
    #map.selected {
        height: calc(50% - 20px);
    }
@ -79,12 +62,6 @@
 }

@media screen and (min-width: 1000px), (max-height: 599px) {
-    #metadata {
-        width: calc(50% - 20px);
-    }
-    #metadata.selected {
-        top: 95px;
-    }
    #map.selected {
        width: 50%;
    }
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@ -89,10 +89,18 @@ sub {
    margin-top: 10px;
 }

+.marginLeft {
+    margin-left: 10px;
+}
+
 .marginBottom {
    margin-bottom: 10px;
 }

+.marginRight {
+    margin-right: 10px;
+}
+
 .right {
    text-align: right;
 }
@ -230,6 +238,29 @@ input.big:focus, select.big:focus, textarea.big:focus {
    padding: 4px;
 }

+div.modal {
+    position: fixed;
+    top: 100px;
+    background-color: #ffffff;
+    border-radius: 3px;
+    padding: 20px;
+    box-sizing: border-box;
+    z-index: 3;
+    visibility: hidden;
+}
+
+#cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #000000;
+    opacity: 0.5;
+    z-index: 2;
+    visibility: hidden;
+}
+
 p.formError {
    color: #7f2929;
    font-weight: 500;
@ -313,7 +344,19 @@ div.box {
        padding: 0;
        width: 100%;
    }
+    div.modal {
+        left: 20px;
+        right: 20px;
+    }
    div.box {
        width: initial;
    }
 }
+
+@media screen and (min-width: 600px) {
+    div.modal {
+        width: 540px;
+        left: 50%;
+        margin-left: -270px;
+    }
+}
--- a/public/static/js/game.js
+++ b/public/static/js/game.js
@ -16,7 +16,7 @@

        initialize: function () {
            document.getElementById('loading').style.visibility = 'visible';
-            document.getElementById('cover').style.visibility = 'visible';
+            document.getElementById('guessCover').style.visibility = 'visible';
            document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS);
            document.getElementById('currentScoreSum').innerHTML = '0/0';

@ -27,7 +27,7 @@

            MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () {
                document.getElementById('loading').style.visibility = 'hidden';
-                document.getElementById('cover').style.visibility = 'hidden';
+                document.getElementById('guessCover').style.visibility = 'hidden';

                if (this.response.error) {
                    //TODO: handle this error
@ -98,7 +98,7 @@
                lastRound.line.setVisible(false);
            }

-            document.getElementById('cover').style.visibility = 'hidden';
+            document.getElementById('guessCover').style.visibility = 'hidden';
            document.getElementById('showGuessButton').style.visibility = null;
            document.getElementById('guess').style.visibility = null;
            document.getElementById('guess').classList.remove('result')
@ -152,7 +152,7 @@
                document.getElementById('guess').classList.remove('adapt');
            }
            document.getElementById('loading').style.visibility = 'visible';
-            document.getElementById('cover').style.visibility = 'visible';
+            document.getElementById('guessCover').style.visibility = 'visible';

            var data = new FormData();
            data.append('lat', String(guessPosition.lat));
--- a/public/static/js/map_editor.js
+++ b/public/static/js/map_editor.js
@ -22,7 +22,7 @@

            document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]';

-            document.getElementById('metadata').style.visibility = 'hidden';
+            MapGuesser.hideModal();

            document.getElementById('saveButton').disabled = false;
        },
@ -109,7 +109,6 @@
                return;
            }

-            document.getElementById('metadata').classList.add('selected');
            document.getElementById('map').classList.add('selected');
            document.getElementById('control').classList.add('selected');
            document.getElementById('noPano').style.visibility = 'hidden';
@ -215,7 +214,6 @@
        },

        closePlace: function (del) {
-            document.getElementById('metadata').classList.remove('selected')
            document.getElementById('map').classList.remove('selected');
            document.getElementById('control').classList.remove('selected');
            document.getElementById('noPano').style.visibility = 'hidden';
@ -413,14 +411,7 @@
    document.getElementById('mapName').onclick = function (e) {
        e.preventDefault();

-        var metadata = document.getElementById('metadata');
-
-        if (metadata.style.visibility === 'visible') {
-            metadata.style.visibility = 'hidden';
-        } else {
-            metadata.style.visibility = 'visible';
-            document.getElementById('metadataForm').elements.name.select();
-        }
+        MapGuesser.showModal('metadata');
    };

    document.getElementById('metadataForm').onsubmit = function (e) {
@ -430,7 +421,7 @@
    };

    document.getElementById('closeMetadataButton').onclick = function () {
-        document.getElementById('metadata').style.visibility = 'hidden';
+        MapGuesser.hideModal();
    };

    document.getElementById('saveButton').onclick = function () {
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@ -18,6 +18,75 @@ var MapGuesser = {
        } else {
            xhr.send();
        }
+    },
+
+    showModal: function (id) {
+        document.getElementById(id).style.visibility = 'visible';
+        document.getElementById('cover').style.visibility = 'visible';
+    },
+
+    showModalWithContent: function (title, body, extraButtons) {
+        if (typeof extraButtons === 'undefined') {
+            extraButtons = [];
+        }
+
+        MapGuesser.showModal('modal');
+
+        document.getElementById('modalTitle').textContent = title;
+
+        if (typeof body === 'object') {
+            document.getElementById('modalText').appendChild(body);
+        } else {
+            document.getElementById('modalText').textContent = body;
+        }
+
+        var buttons = document.getElementById('modalButtons');
+        buttons.textContent = '';
+
+        for (extraButton of extraButtons) {
+            var button = document.createElement(extraButton.type);
+
+            if (extraButton.type === 'a') {
+                button.classList.add('button');
+            }
+
+            for (className of extraButton.classNames) {
+                button.classList.add(className);
+            }
+
+            button.classList.add('marginTop');
+            button.classList.add('marginRight');
+            button.textContent = extraButton.text;
+
+            if (extraButton.type === 'a') {
+                button.href = extraButton.href;
+            } else if (extraButton.type === 'button') {
+                button.onclick = extraButton.onclick;
+            }
+
+            buttons.appendChild(button);
+        }
+
+        var closeButton = document.createElement('button');
+
+        closeButton.classList.add('gray');
+        closeButton.classList.add('marginTop');
+        closeButton.textContent = 'Cancel';
+        closeButton.onclick = function () {
+            MapGuesser.hideModal();
+        };
+
+        buttons.appendChild(closeButton);
+    },
+
+    hideModal: function () {
+        var modals = document.getElementsByClassName('modal');
+
+        for (modal of modals) {
+            modal.style.visibility = 'hidden';
+        }
+
+        document.getElementById('cover').style.visibility = 'hidden';
    }
 };

@ -31,4 +100,8 @@ var MapGuesser = {
            }
        }
    }
+
+    document.getElementById('cover').onclick = function () {
+        MapGuesser.hideModal();
+    };
 })();
--- a/src/Controller/MapAdminController.php
+++ b/src/Controller/MapAdminController.php
@ -74,6 +74,8 @@ class MapAdminController implements ISecured
    {
        $mapId = (int) $this->request->query('mapId');

+        \Container::$dbConnection->startTransaction();
+
        if (!$mapId) {
            $mapId = $this->addNewMap();
        }
@ -131,10 +133,44 @@ class MapAdminController implements ISecured

        $this->saveMapData($mapId, $map);

+        \Container::$dbConnection->commit();
+
        $data = ['mapId' => $mapId, 'added' => $addedIds];
        return new JsonContent($data);
    }

+    public function deleteMap() {
+        $mapId = (int) $this->request->query('mapId');
+
+        \Container::$dbConnection->startTransaction();
+
+        $this->deletePlaces($mapId);
+
+        $modify = new Modify(\Container::$dbConnection, 'maps');
+        $modify->setId($mapId);
+        $modify->delete();
+
+        \Container::$dbConnection->commit();
+
+        $data = ['success' => true];
+        return new JsonContent($data);
+    }
+
+    private function deletePlaces(int $mapId): void
+    {
+        $select = new Select(\Container::$dbConnection, 'places');
+        $select->columns(['id']);
+        $select->where('map_id', '=', $mapId);
+
+        $result = $select->execute();
+
+        while ($place = $result->fetch(IResultSet::FETCH_ASSOC)) {
+            $modify = new Modify(\Container::$dbConnection, 'places');
+            $modify->setId($place['id']);
+            $modify->delete();
+        }
+    }
+
    private function calculateMapBounds(int $mapId): Bounds
    {
        $select = new Select(\Container::$dbConnection, 'places');
--- a/src/Database/Query/Modify.php
+++ b/src/Database/Query/Modify.php
@ -116,11 +116,14 @@ class Modify

    private function update(): void
    {
-        $diff = $this->generateDiff();
+        /*$diff = $this->generateDiff();

        if (count($diff) === 0) {
            return;
-        }
+        }*/
+
+        $diff = $this->attributes;
+        unset($diff[$this->idName]);

        $set = $this->generateColumnsWithBinding(array_keys($diff));

--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@ -22,7 +22,7 @@ $jsFiles = [
            </a>
        </h1>
        <p>
-            <span class="bold"><a href="javascript:;" id="mapName"><?= $mapName ?></a></span><!--
+            <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
         --><span><!--
                <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@ -50,13 +50,14 @@ $jsFiles = [
        </p>
    </div>
 </div>
-<div id="metadata">
-    <form id="metadataForm">
+<div id="metadata" class="modal">
+    <h2>Edit map data</h2>
+    <form id="metadataForm" class="marginTop">
        <input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map">
        <textarea  class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea>
-        <div style="text-align: right;">
-            <button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>
-            <button class="marginTop" type="submit">Apply</button>
+        <div class="right">
+            <button class="marginTop marginRight" type="submit">Apply</button><!--
+         --><button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>
        </div>
    </form>
 </div>
--- a/views/game.php
+++ b/views/game.php
@ -23,7 +23,7 @@ $jsFiles = [
        </p>
    </div>
 </div>
-<div id="cover"></div>
+<div id="guessCover"></div>
 <div id="panorama"></div>
 <div id="showGuessButtonContainer">
    <button id="showGuessButton" class="fullWidth">Show guess map</button>
--- a/views/maps.php
+++ b/views/maps.php
@ -8,7 +8,7 @@ $cssFiles = [
 <div class="main">
    <h2>Playable maps</h2>
    <div id="mapContainer">
-        <?php foreach ($maps as $map) : ?>
+        <?php foreach ($maps as $map): ?>
            <div class="mapItem">
                <div class="title">
                    <p class="title"><?= $map['name'] ?></p>
@ -36,18 +36,18 @@ $cssFiles = [
                </div>
                <?php if ($isAdmin): ?>
                    <div class="buttonContainer">
-                        <a class="button fullWidth noRightRadius" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
-                        <a class="button yellow fullWidth noLeftRadius noRightRadius" href="admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a>
-                        <button class="button red fullWidth noLeftRadius" title="Delete map '<?= $map['name'] ?>'">Delete</button>
+                        <a class="button fullWidth noRightRadius" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                        <a class="button yellow fullWidth noLeftRadius noRightRadius" href="/admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a>
+                        <button class="button red fullWidth noLeftRadius deleteButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Delete map '<?= $map['name'] ?>'">Delete</button>
                    </div>
                <?php else: ?>
-                    <a class="button fullWidth" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                    <a class="button fullWidth" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
        <?php if ($isAdmin): ?>
            <div class="mapItem new">
-                <a class="button green fullWidth" href="admin/mapEditor" title="Add new map">
+                <a class="button green fullWidth" href="/admin/mapEditor" title="Add new map">
                    Add new map
                </a>
            </div>
@ -61,4 +61,40 @@ $cssFiles = [
        <?php endif; ?>
    </div>
 </div>
+<?php if ($isAdmin): ?>
+<script>
+    (function() {
+        Maps = {
+            deleteMap: function(mapId, mapName) {
+                MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + mapName + '\'?', [{
+                    type: 'button',
+                    classNames: ['red'],
+                    text: 'Delete',
+                    onclick: function () {
+                        document.getElementById('loading').style.visibility = 'visible';
+
+                        MapGuesser.httpRequest('POST', '/admin/deleteMap/' + mapId, function () {
+                            if (this.response.error) {
+                                document.getElementById('loading').style.visibility = 'hidden';
+
+                                //TODO: handle this error
+                                return;
+                            }
+
+                            window.location.reload();
+                        });
+                    }
+                }]);
+            }
+        };
+
+        var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton');
+        for (var button of buttons) {
+            button.onclick = function() {
+                Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
+            };
+        }
+    })();
+</script>
+<?php endif; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>
--- a/views/templates/main_header.php
+++ b/views/templates/main_header.php
@ -24,4 +24,10 @@
 <body>
    <div id="loading">
        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>">
+    </div>
+    <div id="cover"></div>
+    <div id="modal" class="modal">
+        <h2 id="modalTitle"></h2>
+        <p id="modalText" class="marginTop"></p>
+        <div id="modalButtons" class="right"></div>
    </div>
--- a/web.php
+++ b/web.php
@ -27,6 +27,7 @@ Container::$routeCollection->group('admin', function (MapGuesser\Routing\RouteCo
    $routeCollection->get('admin.mapEditor', 'mapEditor/{mapId?}', [MapGuesser\Controller\MapAdminController::class, 'getMapEditor']);
    $routeCollection->get('admin.place', 'place.json/{placeId}', [MapGuesser\Controller\MapAdminController::class, 'getPlace']);
    $routeCollection->post('admin.saveMap', 'saveMap/{mapId}/json', [MapGuesser\Controller\MapAdminController::class, 'saveMap']);
+    $routeCollection->post('admin.deleteMap', 'deleteMap/{mapId}', [MapGuesser\Controller\MapAdminController::class, 'deleteMap']);
 });

 Container::$sessionHandler = new MapGuesser\Session\DatabaseSessionHandler();