Merge branch...

Merge branch '80-as-a-convenience-enthusiast-i-want-a-drop-down-menu-to-be-able-to-quickly-scan-qr-codes-i-find' into 'main'

Resolve "As a convenience enthusiast, I want a drop down menu to be able to quickly scan QR codes I find along my dragon trail so that I may continue on my adventure without disruption."

Closes #80

See merge request !41

src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java

+package Team5.SmartTowns.dragonstale;
+
+import Team5.SmartTowns.landmarks.Landmarks;
+
+import java.util.List;
+
+public class DragonsTale {
+    Landmarks landmarks = new Landmarks();
+    private int landmarkID = landmarks.getLandmarkID();
+    private String landmarkName = landmarks.getLandmarkName();
+    private String landmarkDescription = landmarks.getLandmarkDescription();
+    public static List<Landmarks> landmarksDragonstrail = List.of(
+            new Landmarks( 1, "A scent of...Dragon", "The Dragon has been spotted near by, find the QR code to continue" , "Start your discovery, at the sweet shop."),
+            new Landmarks( 2, "They've been found!", "Don't let them escape, find the next QR code to continue!", "Location test")
+    );
+    public static List<Landmarks> getLandmarksDragonstrail() {
+        return landmarksDragonstrail;
+    }
+}

src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java

+package Team5.SmartTowns.dragonstale;
+
+import Team5.SmartTowns.landmarks.Landmarks;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.List;
+
+import static Team5.SmartTowns.dragonstale.DragonsTale.landmarksDragonstrail;
+
+
+
+@RestController
+
+public class DragonsTaleController {
+    ModelAndView modelAndView;
+
+    @GetMapping("/dragonstale")
+    public ModelAndView getDragonsTale(){
+        List<Landmarks> landmarksList = landmarksDragonstrail;
+        int landmarksListSize = landmarksDragonstrail.size();
+        modelAndView = new ModelAndView("/dragonstale/index")
+                .addObject("landmarksList", landmarksList)
+                .addObject("getListSize", landmarksListSize);
+        return modelAndView;
+    }
+
+    @GetMapping ("/QRScan") //In here, we could use trailID as a string variable and use it to track what trail the user clicked from.
+    public ModelAndView getQRScanner(){
+        modelAndView = new ModelAndView("fragments/qr-scanner");
+        //Can we extract the pathvariable in a JS function?
+        return modelAndView;
+    }
+
+//    @GetMapping("/dragonstale/{landmarkID}")
+//    public Integer getDTLandmarkID(@RequestParam(value="landmarkID") int landmark){
+//        Integer idCounter = 0;
+//        modelAndView = new ModelAndView("/dragonstale/{landmarkID}")
+//                .addObject() //All your doing is retrieving the information from the database giving it to a string variable.
+//    }
+
+    //Create another controller that directs to the given DragonsTale..Trail.. and updates the users account accordingly.
+
+// This code is to be used
+//    @GetMapping("dragonstale/{qrCode}/{id}")
+//    public String qrCodeCheck(@PathVariable Optional<String> qrCode, @PathVariable Optional<Integer> id){
+//        if (qrCode.isPresent()){
+//
+//            //Check if ID is present, if do this, if not dfo that.
+//
+//        }
+//    }
+
+
+
+}

src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleJDBC.java

+package Team5.SmartTowns.dragonstale;
+
+import Team5.SmartTowns.users.User;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class DragonsTaleJDBC implements DragonsTaleRepository{
+    private JdbcTemplate jdbc;
+
+    private RowMapper<User> userMapper;
+
+//    @Override
+//    public Map<Long, Boolean> getDTCompletion(int landmarkID){
+//        //Be conscious of sql injections here.
+//        String sql = "SELECT userid, trailID, completedOrNot FROM dtprogress WHERE landmarkID = ?";
+//        int dtQuery = jdbc.query(sql, landmarkID);
+//        //Query it twice to extract the given parameters, then use these parameters in a loop to query the completion.
+//        List<Map<String, Integer>> query = jdbc.query(sql, id);
+//
+//        Map<Long, Boolean> dtProgress = new HashMap<>();
+//        for (Map<String, Object> result : dtQuery) {
+//            dtProgress.put((Long)result.get("stickerID"), (boolean)result.get("hasSticker"));
+//        }
+//        return dtProgress;
+//    }
+}

src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleRepository.java

+package Team5.SmartTowns.dragonstale;
+
+public interface DragonsTaleRepository {
+}

src/main/java/Team5/SmartTowns/trails/TrailsController.java

@@ -11,8 +11,6 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 
-import static Team5.SmartTowns.landmarks.Landmarks.landmarksDragonstrail;
-
 //import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
 
 @Controller
@@ -38,24 +36,5 @@ public class TrailsController {
         return mv;
     }
 
-    @GetMapping("/dragonstale")
-    public ModelAndView getDragonsTale(){
-        List<Landmarks> landmarksList = landmarksDragonstrail;
-        ModelAndView modelAndView = new ModelAndView("towns/trails/dragonstale/index");
-        modelAndView.addObject("landmarksList", landmarksList);
-        return modelAndView;
-    }
-
-
-    //
-//    @GetMapping("dragonstale/{qrCode}/{id}")
-//    public String qrCodeCheck(@PathVariable Optional<String> qrCode, @PathVariable Optional<Integer> id){
-//        if (qrCode.isPresent()){
-//
-//            //Check if ID is present, if do this, if not dfo that.
-//
-//        }
-//    }
-
 }
 

src/main/resources/static/css/dragonstaless.css

-.centre{
+body{
     display: flex;
     flex-direction: column;
     text-align: center;
@@ -8,6 +8,36 @@
     background-color: #927BB7;
 }
 
+.dropdown button{
+    background-color: coral;
+    color: white;
+    padding: 25px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+
+.dropdown .content{
+    display: none;
+    position: absolute;
+    background-color: #D3B69C;
+    min-width:100px;
+    box-shadow: white;
+    z-index: 1;
+}
+
+.dropdown:hover .content{
+    display: block;
+}
+
+
+.images{
+    max-width:100%;
+    height:auto;
+}
+
+
 .landmarkName{
     font-weight: bold;
     text-align: left;

src/main/resources/static/qr-scanner.html

-<!--setup html page for QR codes - R Nute-->
-<!--Modified from (https://www.geeksforgeeks.org/create-a-qr-code-scanner-or-reader-in-html-css-javascript/)-->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/templatingstyle.css">
-    <link rel="stylesheet" href="css/qrstyle.css">
-    <script src="https://unpkg.com/html5-qrcode"></script>
-    <script type="module" src="scripts/qr-script.js"></script>
-    <title>QR Code</title>
-</head>
-
-<body>
-    <header th:insert="towns/Templating.html :: header"></header>
-
-    <div class="container">
-        <h1>Scan location QR code</h1>
-        <div class="section">
-            <div id="qr-code-reader">
-            </div>
-        </div>
-    </div>
-
-    <div th:insert="towns/Templating.html :: footer"></div>
-</body>
-</html>

src/main/resources/static/scripts/DTscript.js

+var getQR = function (){
+    // document.getElementById("qrCodeScanner").style.cursor = "pointer";
+    window.location.href = "/QRScan";
+}
+
+function toggleDropDown(){
+    var dropdownList = document.getElementById("dropdownList")
+    dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block"
+}
\ No newline at end of file

src/main/resources/templates/dragonstale/index.html

+<!DOCTYPE html>
+<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A Dragon's Tale</title>
+    <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
+    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+    <script type="text/javascript" th:src="@{/scripts/DTscript.js}"></script>
+</head>
+    <body>
+        <header th:insert="fragments/Templating.html :: header"></header>
+            <!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly.   <span th:text="${townName}">  -->
+            <div>
+                <h1> Welcome, to a dragon's tale! </h1>
+                <img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" class="images">
+                <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
+            </div>
+
+            <div>
+                <p>
+                    Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
+                    Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
+                </p>
+            </div>
+
+
+            <div class="dropdown">
+                <button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
+                <ul id="dropdownList">
+                    <li class="content" th:each="item : ${landmarksList}">
+                        <a class="option" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
+                        <button class="option" id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
+                    </li>
+                </ul>
+            </div>
+
+
+            <!-- Need to mark each element to an ID then loop through them.  -->
+    <!--        <div id="listOfLandmarks">-->
+    <!--            <p th:each="item : ${landmarksList}">-->
+    <!--                <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
+    <!--            </p>-->
+    <!--        </div>-->
+
+            <div>
+                <h3>  Begin or Continue your hunt!</h3>
+                <button type="button" id="begin">Click here!</button>
+            </div>
+        <div th:insert="fragments/Templating.html :: footer"></div>
+    </body>
+</html>
\ No newline at end of file

src/main/resources/templates/fragments/qr-scanner.html

+<!--setup html page for QR codes - R Nute-->
+<!--Modified from (https://www.geeksforgeeks.org/create-a-qr-code-scanner-or-reader-in-html-css-javascript/)-->
+
+<!DOCTYPE html>
+<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/css/templatingstyle.css">
+        <link rel="stylesheet" href="/css/qrstyle.css">
+        <script src="https://unpkg.com/html5-qrcode"></script>
+        <script type="module" src="/scripts/qr-script.js"></script>
+        <title>QR Code</title>
+    </head>
+
+    <body>
+        <div th:fragment="qrCode" class="container">
+            <h1>Scan location QR code</h1>
+            <div class="section">
+                <div id="qr-code-reader">
+                </div>
+            </div>
+        </div>
+
+    </body>
+</html>

src/main/resources/templates/towns/trails/dragonstale/index.html

-<!DOCTYPE html>
-<html lang="en">
-<html xmlns:th="http://www.thymeleaf.org">
-    <meta charset="UTF-8">
-    <title>A Dragon's Tale</title>
-    <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
-    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
-    <script src="./node_modules/html5-qrcode/html5-qrcode.min.js"></script>
-</head>
-    <body>
-        <header th:insert="fragments/Templating.html :: header"></header>
-
-        <!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly.   <span th:text="${townName}">  -->
-        <div class="centre">
-            <h1> Welcome, to a dragon's tale! </h1>
-            <img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" id="homeimg">
-            <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
-        </div>
-
-        <div class="centre">
-            <p>
-                Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
-                Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
-            </p>
-        </div>
-
-
-        <!-- tabs -->
-        <div class="centre">
-            <h2>There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </h2>
-            <ul th:each="item : ${landmarksList}" id="tabBox">
-                <li>
-                    <a id="tabIdCounter" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
-                </li>
-            </ul>
-        </div>
-
-
-        <!-- Need to mark each element to an ID then loop through them.  -->
-        <div class="centre" id="listOfLandmarks">
-            <p th:each="item : ${landmarksList}">
-                <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>
-            </p>
-        </div>
-
-        <!-- If use is starting their journey, this will display begin. If not, they'll continue their journey.  <span th:text="${beginOrContinue}"> -->
-        <div class="centre">
-            <h3>  Begin or Continue your hunt!</h3>
-            <button type="button" id="begin">Click here!</button>
-        </div>
-
-        <div th:insert="fragments/Templating.html :: footer"></div>
-
-        <script>
-
-        document.getElementById("begin").addEventListener("click", function (){
-            window.location.href = ("/dragonstale/landmarkone");
-        })
-
-        </script>
-    </body>
-</html>
\ No newline at end of file