From 63163b684e0a6c77a5ae59e64c5b9e64782c56d7 Mon Sep 17 00:00:00 2001
From: hung <dshung1997@gmail.com>
Date: Sat, 2 Mar 2019 22:19:25 +0100
Subject: [PATCH] Implement drag and drop functions

---
 dutchmanFiles/loader.js | 268 +++++++++++++++++++++++-----------------
 pages/order.html        |  46 +++++--
 scripts/dragndrop.js    |  77 ++++++++++++
 scripts/plusminus.js    |  44 +++++++
 styles/order.css        |  83 +++++++++++--
 5 files changed, 383 insertions(+), 135 deletions(-)
 create mode 100644 scripts/dragndrop.js
 create mode 100644 scripts/plusminus.js

diff --git a/dutchmanFiles/loader.js b/dutchmanFiles/loader.js
index 0648400..a746337 100644
--- a/dutchmanFiles/loader.js
+++ b/dutchmanFiles/loader.js
@@ -12,7 +12,11 @@
 
 var DB = ("DBLoaded.js");
 var DB2 = ("Beverages.js");
+var beerDrinks = [];
+var whiskeyDrinks = [];
+var wineDrinks = [];
 
+$( document ).ready(getDrinks);
 
 //Done by Lars
 function allUserNames() {
@@ -27,7 +31,9 @@ function allUserNames() {
 function loadBeverages(){
     //creates listarray with all drinktypes   
     var alldrinktypes = [];
-    for (i = 0; i < DB2.spirits.length; i++) {
+    // var len = DB2.spirits.length;
+    var len = 50;
+    for (i = 0; i < len; i++) {
         alldrinktypes.push(DB2.spirits[i].varugrupp);
     }
     //Removes dupliactes from array
@@ -43,77 +49,37 @@ function loadBeverages(){
 //Creates divs according to how many drinks that you set "sliceddrinkList to".
 
 //that need to be shown
-window.onload = createDrinkDivs;
-function createDrinkDivs(drink){
-    var slicedDrinkList = [];
-    //slice generates an error in the log but still works.
-    slicedDrinkList = drink.slice(0, 50);
-
-    console.log("number of beers ===> " + drink.length);
-
-    //Using join to convert array to string
-    var firstDrinkString = drink[1].join();
-    var remove;
-    var drinkInfo;
-    var drinkDiv = document.createElement('div');
-   
-    //if the string includes Ale
-    if(firstDrinkString.includes("Ale") == true){
-        remove = "whiskeyDiv";
-        eraseFunction(remove);
-        remove = "wineDiv";
-        eraseFunction(remove);
-
-
-        for(i=0; i<slicedDrinkList.length; i++){
-            drinkDiv = document.createElement('div');
-            drinkDiv.className="beerDiv";
-            
-            drinkInfo = slicedDrinkList[i];
-            drinkDiv.id =drinkInfo[2];
-            drinkDiv.draggable =true;
-            drinkDiv.ondragstart="drag(event)";
-            
-            document.getElementById('dc').appendChild(drinkDiv);
-            
-            //Testing onclick with a random page       
-            drinkDiv.onclick="location.href='https://www.w3schools.com';"
-
-            //Set first element of array to display in div. 0 = the name of the drink.
-            drinkDiv.innerHTML = drinkInfo[0];            
-        }                  
-    }
-
-    if(firstDrinkString.includes("Whisky") == true){
-            remove = "beerDiv";
-            eraseFunction(remove);
-            remove = "wineDiv";
-            eraseFunction(remove);
-        for(i=0; i<slicedDrinkList.length; i++) 
-        {
-            var drinkDiv = document.createElement('div');
-            drinkDiv.className="whiskeyDiv";
-            document.getElementById('dc').appendChild(drinkDiv);
-            drinkInfo = slicedDrinkList[i];
-            drinkDiv.innerHTML = drinkInfo[0];
-        }     
-    }        
-
-    if(firstDrinkString.includes("Vin") == true){
-            remove = "beerDiv";
-            eraseFunction(remove);
-            remove = "whiskeyDiv";
-            eraseFunction(remove);
-
-        for(i=0; i<slicedDrinkList.length; i++) 
-        {
-            var drinkDiv = document.createElement('div');
-            drinkDiv.className="wineDiv";
-            document.getElementById('dc').appendChild(drinkDiv);
-            drinkInfo = slicedDrinkList[i];
-            drinkDiv.innerHTML = drinkInfo[0];
-        }     
-    }             
+// window.onload = createDrinkDivs;
+
+//========================================================================================================
+/*  This function takes a specific type of beverage and its list and generates a div containing all those 
+ *  items.
+ */
+function createDrinkDivs(drinks, type){
+    console.log(drinks);
+    
+    var drinksContainer = $("#drinks-container");
+    drinksContainer.empty();
+
+    for(var i=0; i < drinks.length; i++)
+    {
+        var drinkDiv = document.createElement('div');
+        drinkDiv.className= type.toLowerCase() + "Div";
+        
+        drinkDiv.id = type + "-" + drinks[i].nr.toString();
+        drinkDiv.draggable = true;
+        drinkDiv.ondragstart = drinkDragStart;
+        drinkDiv.ondragend = drinkDragEnd;
+        
+        //Set first element of array to display in div. 0 = the name of the drink.
+        drinkDiv.innerHTML = drinks[i].namn + " " + drinks[i].namn2;
+
+
+        drinksContainer.append(drinkDiv);
+        
+        //Testing onclick with a random page       
+        // drinkDiv.onclick="location.href='https://www.w3schools.com';"
+    }                  
 }
 
 
@@ -130,66 +96,138 @@ function allowDrop(ev) {
   ev.preventDefault();
 }
 
-//for the drag and drop (not working with drinkDivs at the moment)
-function drag(ev) {
-  ev.dataTransfer.setData("text", ev.target.id);
+//========================================================================================================
+/*  This function is called when a beverage starts being dragged
+ */
+function drinkDragStart(ev) {
+    var id = ev.target.id;
+    var name = ev.target.innerHTML;
+    // console.log("Drag start " + id);
+    localStorage.setItem("draggedId", id);
+    localStorage.setItem("draggedName", name);
 }
 
-//for the drag and drop (not working with drinkDivs at the moment)
-function drop(ev) {
-  ev.preventDefault();
-  var data = ev.dataTransfer.getData("text");
-  ev.target.appendChild(document.getElementById(data));
+
+//========================================================================================================
+/*  This function is called when a beverage stops being dragged
+ */
+function drinkDragEnd(ev) {
+    // console.log("Drag end");
+    setTimeout(function(){
+        localStorage.removeItem("draggedId");
+        localStorage.removeItem("draggedName");
+    }, 300);
 }
 
-//When the beer button is clicked
-function checkBeerBox(){
-    console.log("checkBeerBox reached!!!!");
-    drink = "Ale";
-    getCorrectDrink(drink);
+//========================================================================================================
+/*  This function is called when the Beer button is clicked
+ */
+function checkBeerBox()
+{
+    getCorrectDrink("Ale");
 }
 
-//When the whiskey button is clicked
-function checkWhiskeyBox(){
-    drink = "Whisky";
-    getCorrectDrink(drink);
+//========================================================================================================
+/*  This function is called when the whiskey button is clicked
+ */
+function checkWhiskeyBox()
+{
+    getCorrectDrink("Whisky");
 }
 
-//When the wine button is clicked
-function checkWineBox(){
-    drink = "Vin";
-    getCorrectDrink(drink);
+//========================================================================================================
+/*  This function is called when the wine button is clicked
+ */
+function checkWineBox()
+{
+    getCorrectDrink("Vin");
 }
 
-//function to get all the drinks
-function getDrinks(){
-    var allDrinks = [];
-    for (i = 0; i < DB2.spirits.length; i++) {
-        allDrinks.push(DB2.spirits[i]);
+//========================================================================================================
+/*  This function takes a type (string) as a parameter and call the createDrinkDivs function to create
+ * corresponding list of drinks.
+ */
+function getCorrectDrink(type){
+
+    if(type == "Ale")
+    {
+        console.log("get correct ale");
+        createDrinkDivs(beerDrinks, "beer");
+        return;
+    }
+    else if(type == "Whisky")
+    {
+        createDrinkDivs(whiskeyDrinks, "whiskey");
+        return;
     }
-    return allDrinks;    
+    else if(type == "Vin")
+    {
+        createDrinkDivs(wineDrinks, "wine");
+        return;
+    }
+    else {
+        console.log("Wrong type of drink :" + type);
+    }   
 }
 
-//Creates a list with specified drink and sends it to the 
-//function that creates divs (createDrinkDivs).
-function getCorrectDrink(drink){
-    console.log("getCorrectDrink reached");
-    var collector = [];
-    collector = getDrinks();
-    var drinkID = 0;
-    var specificDrinks = [];
-    
-    for(i=0; i<collector.length; i++){
-        console.log("in the loop");
-        if(collector[i].varugrupp.includes(drink)){
-            specificDrinks.push([collector[i].namn, collector[i].varugrupp, collector[i].nr]);
-            drinkID += 1;    
+//========================================================================================================
+/*  This function gets 100 each type of beverages from DB2.
+ */
+function getDrinks() {
+    var nBeer = 0;
+    var nWhiskey = 0;
+    var nWine = 0;
+
+    for(var i = 0; (nBeer + nWhiskey + nWine) < 300; i++)
+    {
+        if(nBeer < 100 && DB2.spirits[i].varugrupp.includes("Ale"))
+        {
+            beerDrinks.push(filterDrinkInfo(DB2.spirits[i]));
+            nBeer += 1;
+        }
+        else if(nWhiskey < 100 && DB2.spirits[i].varugrupp.includes("Whisky"))
+        {
+            whiskeyDrinks.push(filterDrinkInfo(DB2.spirits[i]));
+            nWhiskey += 1;
+        }
+        else if(nWine < 100 && DB2.spirits[i].varugrupp.includes("Vin"))
+        {
+            wineDrinks.push(filterDrinkInfo(DB2.spirits[i]));
+            nWine += 1;
         }
     }
-    specificDrinks.sort();
-    createDrinkDivs(specificDrinks);
 }
 
+//========================================================================================================
+/*  This function takes a drink object as a parameter and return a new object that are filtered out some
+ * unnecessary fields.
+ */
+function filterDrinkInfo(drinkObj) {
+    var newDrinkObj = {};
+
+    // get No.
+    newDrinkObj.nr = drinkObj.nr;
+
+    //get Article ID
+    newDrinkObj.artikelid = drinkObj.artikelid;
+
+    //get name 1
+    newDrinkObj.namn = drinkObj.namn;
+
+    //get name 2
+    newDrinkObj.namn2 = drinkObj.namn2;
+
+    //get pricing
+    newDrinkObj.prisinklmoms = drinkObj.prisinklmoms;
+
+    //get alcohol content
+    newDrinkObj.alkoholhalt = drinkObj.alkoholhalt;
+
+    return newDrinkObj;
+}
+
+
+
 
 //User authentication function - for logging in as VIP or staff.
 function validateUser(){
diff --git a/pages/order.html b/pages/order.html
index c64d008..b366c4d 100644
--- a/pages/order.html
+++ b/pages/order.html
@@ -5,9 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../styles/style.css">
     <link rel="stylesheet" href="../styles/order.css">
+    <script src="../dutchmanFiles/jquery-3.3.1.min.js"></script>
     <script src="../dutchmanFiles/loader.js"></script>
     <script src="../dutchmanFiles/Beverages.js"></script>
     <script src="../dutchmanFiles/DBLoaded.js"></script>
+    <script src="../scripts/plusminus.js"></script>
+    <script src="../scripts/dragndrop.js"></script>
     <meta charset="utf-8">
 
 
@@ -19,29 +22,48 @@
         <input type="radio" id="whiskeybox" name="rBtn" class="chb" onclick="checkWineBox();"> Wine
 
         <div class="container">
+            <div class="drinks-container">   
+                <ul id="drinks-container">
 
-            <div id='dc' class="drinks-container" onclick="location.href='https://www.w3schools.com';">   
-                
-
+                </ul>
             </div>
+
             <div class="tab-container">
                 <h1>tab</h1>
-                <ol class="tab-drink-list">
-                    <li>Beer A, 100 kr</li>
-                    <li>Beer B, 50 kr</li>
-                </ol>
-                Total: 150
-                <div class="button-container">
-                    <button class="pay-button">Pay</button>
+                    <!-- <ol class="tab-drink-list">
+                        <li>Beer A, 100 kr</li>
+                        <li>Beer B, 50 kr</li>
+                    </ol>
+                    Total: 150
+                    <div class="button-container">
+                        <button class="pay-button">Pay</button>
+
+                    </div> -->
+
+                <div id="tab-items" ondrop="itemsOnDrop(this)" ondragenter="itemsOnDragEnter(event)" ondragover="itemsOnDragOver(event)" ondragleave="itemsOnDragLeave(event)">
 
+                    <ul id="items">
+                        <!-- <li id="item-1-beer-1" class="tab-item">
+                            <img class="float-left tab-item-img" src="../images/beer.jpg" width="50px" height="50px">
+                            <div class="float-left tab-item-name"><p>Beer asdak kjskjd kawjdkqwjdqkwkw  wwjdwi w</p></div>
+                            <div class="float-left tab-item-control">
+                                <input id="item-1-plus" type="button" value="+" onclick="plusQuantity(this)">
+                                <span id="item-1-quantity">1</span>
+                                <input id="item-1-minus" type="button" value="-" onclick="minusQuantity(this)">
+                            </div>
+                            <p id="item-1-price" class="float-left tab-item-price">1700</p>
+                            <p id="item-1-currency" class="float-left tab-item-currency">SEK</p>
+                        </li> -->
+                    </ul>
                 </div>
             </div>
         </div>
 
-        <div class="beerDiv" 
+        <!-- <div class="beerDiv" 
         id="drag1" src="../images/beer.jpg" 
         draggable="true" 
-        ondragstart="drag(event)" width="336" height="69"></div>
+        ondragstart="drag(event)" width="336" height="69"></div> -->
 
+        <script src="../scripts/dragndrop.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/scripts/dragndrop.js b/scripts/dragndrop.js
new file mode 100644
index 0000000..1015caa
--- /dev/null
+++ b/scripts/dragndrop.js
@@ -0,0 +1,77 @@
+//========================================================================================================
+/*  This function is called when a beverage is dropped on the Tab
+ */
+function itemsOnDrop(event) {
+    var id = localStorage.getItem("draggedId");
+    var name = localStorage.getItem("draggedName");
+
+    addDraggedItemToTab(id, name);
+}
+
+//========================================================================================================
+/*  This function is called when a beverage is dragged over the Tab
+ */
+function itemsOnDragOver(event) {
+    event.preventDefault();  
+    event.stopPropagation();
+        
+    // console.log("drag over");
+}
+
+//========================================================================================================
+/*  This function is called when the dragged beverage enters the Tab
+ */
+function itemsOnDragEnter(event) {
+    event.preventDefault();  
+    event.stopPropagation();
+        
+    // console.log("drag enter");
+}
+
+//========================================================================================================
+/*  This function is called when the dragged beverage leaves the Tab
+ */
+function itemsOnDragLeave(event) {
+    event.preventDefault();  
+    event.stopPropagation();
+        
+    // console.log("drag leave");
+}
+
+//========================================================================================================
+/*  This function adds the dragged beverage to the Tab. It gets the Id and the name of that beverage.
+ */
+function addDraggedItemToTab (id, name) {
+    console.log("id " + id);
+    var noItemsInTab = localStorage.getItem("noItemsInTab");
+
+    if(noItemsInTab == null) 
+        noItemsInTab = 1;
+    else
+    {
+        noItemsInTab = noItemsInTab + 1;
+        localStorage.setItem("noItemsInTab", noItemsInTab);
+    }
+
+    var currentNumber = noItemsInTab - 1;
+    var matchedString = id.match(/(\w+)\-(\d+)/);
+    var type = matchedString[1];
+    var drinkId = matchedString[2];
+
+    console.log("Type " + type);
+    console.log("drinkId " + drinkId);
+
+    $("#items").append(`
+        <li id="item-`+ currentNumber +`-`+type+`-`+drinkId+`" class="tab-item">
+            <img class="float-left tab-item-img" src="../images/`+type+`.jpg" width="50px" height="50px">
+            <div class="float-left tab-item-name"><p>`+name+`</p></div>
+            <div class="float-left tab-item-control">
+                <input id="item-`+drinkId+`-plus" type="button" value="+" onclick="plusQuantity(this)">
+                <span id="item-`+drinkId+`-quantity">1</span>
+                <input id="item-`+drinkId+`-minus" type="button" value="-" onclick="minusQuantity(this)">
+            </div>
+            <p id="item-`+drinkId+`-price" class="float-left tab-item-price">100</p>
+            <p id="item-`+drinkId+`-currency" class="float-left tab-item-currency">SEK</p>
+        </li>
+    `);
+}
\ No newline at end of file
diff --git a/scripts/plusminus.js b/scripts/plusminus.js
new file mode 100644
index 0000000..c660a11
--- /dev/null
+++ b/scripts/plusminus.js
@@ -0,0 +1,44 @@
+//========================================================================================================
+/*  This function is called when the plus button (in Tab) is clicked
+ */
+function plusQuantity(element) {
+    var id = element.id;
+    // console.log(id);
+    var s = id.match(/item\-\d+/);
+    // console.log(s[0]);
+    $("#" + s + "-quantity").text(function(_, oldText) {
+        var oldQuantity = parseInt(oldText);
+        var newQuantity = oldQuantity + 1;
+
+        updatePrice("#" + s + "-price", newQuantity * 100);
+
+        return newQuantity.toString();
+    });
+}
+
+
+//========================================================================================================
+/*  This function is called when the minus button (in Tab) is clicked
+ */
+function minusQuantity(element) {
+    var id = element.id;
+    // console.log(id);
+    var s = id.match(/item\-\d+/);
+    // console.log(s[0]);
+    $("#" + s + "-quantity").text(function(_, oldText) {
+        var oldQuantity = parseInt(oldText);
+        var newQuantity = (oldQuantity-1) < 0 ? 0 : (oldQuantity-1);
+
+        updatePrice("#" + s + "-price", newQuantity * 100);
+
+        return newQuantity.toString();
+    });
+}
+
+//========================================================================================================
+/*  This function updates the price corresponding to the params idQuery (the string for querying) and 
+ * newPrice (the new price to be updated to).
+ */
+function updatePrice(idQuery, newPrice) {
+    $(idQuery).text(newPrice.toString());
+}
\ No newline at end of file
diff --git a/styles/order.css b/styles/order.css
index d4f82a1..fe9bd37 100644
--- a/styles/order.css
+++ b/styles/order.css
@@ -40,14 +40,19 @@
     align-items: center;
 }
 .beerDiv {
-    display: flex;
+    /* display: inline-block; */
+    float: left;
+    /* line-height: 150px; */
+    text-align: center;
     border: solid black;
     height: 150px;
     width: 150px;
+    margin-right: 15px;
+    margin-bottom: 15px;
     justify-content: center;
     align-items: center;
     background-image: url('../images/beer.jpg');
-    background-image:opacity: 0.5;
+    /* opacity: 0.5; */
     background-size: contain;
     font-size: large;
     color: white;
@@ -64,15 +69,18 @@
 }
 
 .whiskeyDiv {
-    display: flex;
+    float: left;
+    /* line-height: 150px; */
+    text-align: center;
     border: solid black;
     height: 150px;
     width: 150px;
+    margin-right: 15px;
+    margin-bottom: 15px;
     justify-content: center;
     align-items: center;
     background-image: url('../images/whiskey.jpeg');
-    padding-bottom: 
-    background-image:opacity: 0.5;
+    /* opacity: 0.5; */
     background-size: contain;
     font-size: large;
     color: white;
@@ -89,14 +97,18 @@
   }
 
 .wineDiv {
-    display: flex;
+    float: left;
+    /* line-height: 150px; */
+    text-align: center;
     border: solid black;
     height: 150px;
     width: 150px;
+    margin-right: 15px;
+    margin-bottom: 15px;
     justify-content: center;
     align-items: center;
     background-image: url('../images/wine.jpg');
-    background-image:opacity: 0.5;
+    /* opacity: 0.5; */
     background-size: contain;
     font-size: large;
     color: white;
@@ -148,11 +160,11 @@
     flex-grow: 2;
     height: 10%;
     width: 100%;
-
 }
 
 .pay-button {
     height: 50px;
+    line-height: 50px;
     background-color: darkred;
 }
 
@@ -169,3 +181,58 @@
     text-align: end;
     color: white;
 }
+
+#tab-items {
+    height: 600px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+#tab-items ul{
+    list-style: none;
+}
+
+.tab-item {
+    float: left;
+    /* background-color: rgba(0, 0, 0, 0.7); */
+    border: 1px solid #000;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+.tab-item-img {
+
+}
+
+.tab-item-name {
+    width: 220px;
+    height: 50px;
+    font-family:sans-serif;
+    margin-right: 40px;
+}
+
+.tab-item-name p {
+    width: 220px;
+    height: 50px;
+    display: table-cell;
+    vertical-align:middle;
+    text-align:center;
+    color: #000;
+    text-decoration: none;
+}
+
+.tab-item-control {
+    line-height:  50px;
+    margin-right: 20px;
+}
+
+.tab-item-price {
+    width: 60px;
+    margin-right: 10px;
+}
\ No newline at end of file