Skip to content

Implement drag and drop functions #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 4, 2019
Merged

Implement drag and drop functions #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 153 additions & 115 deletions dutchmanFiles/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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
Expand All @@ -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';"
}
}


Expand All @@ -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(){
Expand Down
46 changes: 34 additions & 12 deletions pages/order.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">


Expand All @@ -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>
Loading