· 8 years ago · Dec 08, 2017, 02:14 AM
1<!DOCTYPE html>
2<style>
3#item_table {
4 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
5 border-collapse: collapse;
6 width: 100%;
7}
8
9#item_table td, #item_table th {
10 border: 1px solid #ddd;
11 padding: 8px;
12}
13
14#item_table tr:nth-child(even){background-color: #f2f2f2; }
15
16#item_table tr:hover {background-color: #ddd;}
17
18#item_table th {
19 padding-top: 12px;
20 padding-bottom: 12px;
21 text-align: left;
22 background-color: #5c6166;
23 color: white;
24}
25</style>
26<style type="text/css">
27 #search_bar{
28 border: 1px solid #000000;
29 border-right: none;
30 font-size: 16px;
31 width: 200px;
32 padding: 10px;
33 border: none;
34 -webkit-border-top-left radius: 10px;
35 -webkit-border-bottom-left radius: 10px;
36 -moz-border-radius-topLeft: 10px;
37 -moz-border-radius-bottomLeft: 10px;
38 border-top-left-radius: 10px;
39 border-bottom-left-radius: 10px;
40 }
41 #search_submit{
42 border: 1px solid #000000;
43 border-left: none;
44 font-size: 16px;
45 padding: 10px;
46 background: #167FFC;
47 color: white;
48 outline: none;
49 cursor: pointer;
50 -webkit-border-top-right radius: 10px;
51 -webkit-border-bottom-right radius: 10px;
52 -moz-border-radius-topRight: 10px;
53 -moz-border-radius-bottomRight: 10px;
54 border-top-right-radius: 10px;
55 border-bottom-right-radius: 10px;
56 margin-left: -4px;
57 }
58 #search_submit:hover{
59
60 background: #333;
61 transition: all 0.40s;
62 }
63 .round {
64 width: 100%;
65 z-index: 5;
66 }
67 #drop_down_filter {
68 margin-right: 1px;
69 margin-top: 1px;
70 height: 43px;
71 border: 1px solid #000000;
72 background-color: #FFFFFF;
73 color: black;
74 padding: 10px;
75 font-size: 16px;
76 border: none;
77 cursor: pointer;
78 outline: none;
79 -webkit-border-top-left radius: 10px;
80 -webkit-border-bottom-left radius: 10px;
81 -moz-border-radius-topLeft: 10px;
82 -moz-border-radius-bottomLeft: 10px;
83 border-top-left-radius: 10px;
84 border-bottom-left-radius: 10px;
85 }
86
87</style>
88
89<script src="../../static/jquery.min.js"></script>
90<script src="../../static/popper.min.js"></script>
91<script src="../../static/bootstrap.min.js"></script>
92
93<script>
94 function checkAdmin()
95 {
96 var result = readCookie("admin");
97 console.log("RESULT: " + result);
98 if (result != "yes")
99 {
100 console.log("ON OTHER PAGE");
101 window.location.href = '/admin';
102 }
103 }
104
105 function getItems(){
106 var table = document.getElementById('item_table');
107 var itemArray = [];
108 var item = "";
109 for (var r = 1, n = table.rows.length; r < n; r++) { //Start r at 1, don't need table header values
110 // get updated table values
111 var id = table.rows[r].cells[0].innerText;
112 var name = table.rows[r].cells[1].innerText;
113 var weight = table.rows[r].cells[2].innerText;
114 var cost = table.rows[r].cells[3].innerText;
115 var quantity = table.rows[r].cells[4].innerText;
116 var category = table.rows[r].cells[5].innerText;
117 var url = table.rows[r].cells[6].innerText;
118 var desc = table.rows[r].cells[7].innerText;
119
120 // put item properties into an object to put into array
121 //var item = {"name":name, "weight":weight, "cost":cost, "quantity": quantity,
122 // "category":category, "url":url, "description":desc};
123 item += id+"<>"+name+"<>"+weight+"<>"+cost+"<>"+quantity+"<>"+category+"<>"+url+"<>"+desc+" , ";
124 }
125 document.getElementById('item_array').value = item;
126
127 setTimeout(function()
128 {
129
130 }, 1000);
131
132 window.location.href = '/home/admin/';
133
134 }
135
136 function deleting(id)
137 {
138 //<!--var deleteinput = document.getElementById("deleteinput");-->
139 //<!--deleteinput.value = id;-->
140 //<!--console.log("ID: " + deleteinput.value);-->
141 createCookie("Deleting", id, 1);
142 }
143
144 function refreshDelete()
145 {
146 <!--var deleteinput = document.getElementById("deleteinput");-->
147 <!--deleteinput.value = "";-->
148 eraseCookie("Deleting");
149
150 }
151
152 /*
153creates a cookie with a given name, a value, and a number of days that it is active for
154*/
155function createCookie(name,value,days)
156{
157 if (days)
158 {
159 var date = new Date();
160 date.setTime(date.getTime() + (days * 24 * 60 * 60 *1000));
161 var expires = "; expires=" + date.toGMTString();
162 }
163 else
164 {
165 var expires = "";
166 }
167 document.cookie = name + "=" + value + expires + "; path=/";
168}
169
170/*
171recieve information from a cookie
172*/
173function readCookie(name)
174{
175 var nameEQ = name + "=";
176 var ca = document.cookie.split(';');
177 for(var i=0;i < ca.length;i++) {
178 var c = ca[i];
179 while (c.charAt(0)==' ') {
180 c = c.substring(1,c.length);
181 }
182 if (c.indexOf(nameEQ) == 0) {
183 return c.substring(nameEQ.length,c.length);
184 }
185 }
186 return null;
187}
188
189/*
190erase a cookie
191*/
192function eraseCookie(name)
193{
194 createCookie(name,"",-1);
195}
196
197
198</script>
199
200<script type="text/javascript">
201 function toggleDropDown() {
202 document.getElementById("myDropdown").classList.toggle("show");
203}
204 // Close the dropdown if the user clicks outside of it
205 window.onclick = function(e){
206 if (!e.target.matches('.dropbtn')) {
207 var myDropdown = document.getElementById("myDropdown");
208 if (myDropdown.classList.contains('show')) {
209 myDropdown.classList.remove('show');
210 }
211 }
212}
213 function getFilter() {
214 document.getElementById("");
215}
216 /*
217 Creates a new cookies or updates an old one when you click on the add to cart button
218 Also updates the MainCookie to include this cookie we just added
219 */
220 function openWindow(obj, name, cost, weight, quantity, image){
221
222 var result = document.getElementById(name).value //recieves the input value for how many of that item we want to add to the cart
223 document.getElementById(name).value = 0; //resets the value back to 0 for the amount we want from that item
224 console.log("Clicked on the button"); //check to make sure that this function is working
225 if(result > 0) //make sure that you have given a quantity for that item
226 {
227 obj.style.background = 'green'; //change the color of the button to green to confirm that it submitted
228
229 //creating the new cookie for that item
230 var oldCookie = readCookie(name);
231 if (oldCookie != "") //check to see if you have a previous cookie with this name
232 {
233 if(oldCookie == null)
234 {
235 var newCookie = createCookie(name, result + "," + cost + "," + weight + "," + quantity + "," + image, 1); //if you don't have a previous cookie, create a new one with all its values
236 }
237 else
238 {
239 var array = oldCookie.split(","); //if you do have an old one, split it and turn it into an array
240 var amount = array[0]; //receive the amount that you previously have for that item
241 var newCookie = createCookie(name, (Number(result) + Number(amount)) + "," + cost + "," + weight + "," + quantity + "," + image, 1); //add the current amount with the previous value to update the total amount of items you want to purchase
242 }
243
244 }
245 else {
246 var newCookie = createCookie(name, result + "," + cost + "," + weight + "," + quantity + "," + image, 1); //if you don't have a previous cookie, create a new one with all its values
247 }
248
249 //updating the MainCookie
250 var oldMainCookie = readCookie("MainCookie"); //retrieves the MainCookie
251 if (oldMainCookie != "" && oldMainCookie != null) //checks if it is currently empty
252 {
253
254 var list = oldMainCookie; //if it is not empty, store the previous value into list
255 if(list.indexOf(name) == -1) //check to see if the item already exists in the list
256 {
257 list += name + ","; //if it does not exist, add it into the list
258 var newCookie = createCookie("MainCookie",list, 1); //update the MainCookie with the new value
259 }
260
261 }
262 else {
263 var MainCookie = createCookie("MainCookie", name + ",", 1); //if it is empty, creates a new MainCookie with the new item stored into it
264 }
265
266 var tempMainCookie = readCookie("MainCookie"); //read the new updated value in MainCookie
267 var tempCurrentCookie = readCookie(name); //read the new updated value for that item cookie
268 alert("MainCookie: " + tempMainCookie + "\nJust Added Cookie\n" + name + " : " + tempCurrentCookie); //create an alert that displays this information
269 }
270 else {
271 obj.style.background = 'red'; //if the value of the input is 0, set the color of the button to red
272 alert("Please enter a value and click again"); //display that they need to enter a value
273 }
274 }
275 /*
276 Display all the cookies for the items we currently have selected
277 */
278 function ShowAllCookies(){
279
280 var MainCookie = readCookie("MainCookie"); //read the MainCookie
281 if (MainCookie != "" && MainCookie != null) //check if that Cookie is empty
282 {
283 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
284 var message = "";
285 //for each item in the array of the MainCookie, add its value to message
286 for (var i = 0; i < array.length-1; i++)
287 {
288 message += array[i] + ": " + readCookie(array[i]) + "\n";
289 }
290
291 }
292 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all of the cookies
293 }
294 /*
295 Display the URL for the items' pictures
296 */
297 function ShowAllImages(){
298 var MainCookie = readCookie("MainCookie"); //read the MainCookie
299 if (MainCookie != "")
300 {
301 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
302 var message = "";
303
304 //for each item in the array of the MainCookie
305 for (var i = 0; i < array.length-1; i++)
306 {
307 var currentCookie = readCookie(array[i]); //read that cookie
308 var innerArray = currentCookie.split(","); //split it by the commas
309 message += array[i] + ": " + innerArray[4] + "\n"; //grab the URL in position 4 of the array for this cookie
310 }
311
312 }
313 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all the URLs
314 }
315 /*
316 Display the total amount of items you have selected
317 */
318 function ShowAllCurrentTotal(){
319 var MainCookie = readCookie("MainCookie"); //read the MainCookie
320 if (MainCookie != "")
321 {
322 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
323 var message = "";
324
325 //for each item in the array of the MainCookie
326 for (var i = 0; i < array.length-1; i++)
327 {
328 var currentCookie = readCookie(array[i]); //read that cookie
329 var innerArray = currentCookie.split(","); //split it by the commas
330 message += array[i] + ": " + innerArray[0] + "\n"; //grab the current count in position 0 of the array for this cookie
331 }
332
333 }
334 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all the count counts
335 }
336 /*
337 Display the total amount of each item that is curently available in the Database
338 */
339 function ShowAllQuantities(){
340 var MainCookie = readCookie("MainCookie"); //read the MainCookie
341 if (MainCookie != "")
342 {
343 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
344 var message = "";
345
346 //for each item in the array of the MainCookie
347 for (var i = 0; i < array.length-1; i++)
348 {
349 var currentCookie = readCookie(array[i]); //read that cookie
350 var innerArray = currentCookie.split(","); //split it by the commas
351 message += array[i] + ": " + innerArray[3] + "\n"; //grab the total amount in the database in position 3 of the array for this cookie
352 }
353
354 }
355 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all the total amounts from the database
356 }
357 /*
358 Display all the weights per Item
359 */
360 function ShowAllWeights(){
361 var MainCookie = readCookie("MainCookie"); //read the MainCookie
362 if (MainCookie != "")
363 {
364 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
365 var message = "";
366
367 //for each item in the array of the MainCookie
368 for (var i = 0; i < array.length-1; i++)
369 {
370 var currentCookie = readCookie(array[i]); //read that cookie
371 var innerArray = currentCookie.split(","); //split it by the commas
372 message += array[i] + ": " + innerArray[2] + "\n"; //grab the weight per item in position 2 of the array for this cookie
373 }
374
375 }
376 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all the weights
377 }
378 /*
379 Display all the costs for each item
380 */
381 function ShowAllCosts(){
382 var MainCookie = readCookie("MainCookie"); //read the MainCookie
383 if (MainCookie != "")
384 {
385 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
386 var message = "";
387
388 //for each item in the array of the MainCookie
389 for (var i = 0; i < array.length-1; i++)
390 {
391 var currentCookie = readCookie(array[i]); //read that cookie
392 var innerArray = currentCookie.split(","); //split it by the commas
393 message += array[i] + ": " + innerArray[1] + "\n"; //grab the cost per item in position 1 of the array for this cookie
394 }
395
396 }
397 alert("MainCookie: " + readCookie("MainCookie") + "\n" + "Rest of the cookies: \n" + message); //display all the costs
398 }
399 /*
400 delete all of the cookies currently held by MainCookie while also removing them from MainCookie
401 */
402 function DeleteAllCookies(){
403
404 var MainCookie = readCookie("MainCookie"); //read the MainCookie
405 if (MainCookie != "" && MainCookie != null)
406 {
407 var array = MainCookie.split(","); //split that result and turn it into an array with all the items
408
409 //for each item in the array of the MainCookie
410 for (var i = 0; i < array.length-1; i++)
411 {
412 eraseCookie(array[i]); //delete that item
413 }
414 createCookie("MainCookie", "", 1); //reset the MainCookie
415
416 }
417 //alert(readCookie("MainCookie")); //display current MainCookie, which should be empty
418 }
419 /*
420 creates a cookie with a given name, a value, and a number of days that it is active for
421 */
422 function createCookie(name,value,days){
423 if (days)
424 {
425 var date = new Date();
426 date.setTime(date.getTime() + (days * 24 * 60 * 60 *1000));
427 var expires = "; expires=" + date.toGMTString();
428 }
429 else
430 {
431 var expires = "";
432 }
433 document.cookie = name + "=" + value + expires + "; path=/";
434 }
435 /*
436 recieve information from a cookie
437 */
438 function readCookie(name){
439 var nameEQ = name + "=";
440 var ca = document.cookie.split(';');
441 for(var i=0;i < ca.length;i++) {
442 var c = ca[i];
443 while (c.charAt(0)==' ') {
444 c = c.substring(1,c.length);
445 }
446 if (c.indexOf(nameEQ) == 0) {
447 return c.substring(nameEQ.length,c.length);
448 }
449 }
450 return null;
451 }
452 /*
453 erase a cookie
454 */
455 function eraseCookie(name){
456 createCookie(name,"",-1);
457 }
458 function isNumberKey(evt)
459 {
460 var charCode = (evt.which) ? evt.which : evt.keyCode;
461 if (charCode != 46 && charCode > 31
462 && (charCode < 48 || charCode > 57))
463 return false;
464
465 return true;
466 }
467 function logout() {
468 eraseCookie("username");
469 eraseCookie("email");
470 eraseCookie("tracking_id");
471 DeleteAllCookies();
472 eraseCookie("Destination");
473 eraseCookie("Total");
474 eraseCookie("Store");
475 eraseCookie("gsScrollPos-794");
476 eraseCookie("tracking_number");
477 eraseCookie("admin");
478
479 window.location.href = '/home/';
480
481 }
482</script>
483
484<html lang="en">
485
486 <head>
487
488 <meta charset="utf-8">
489 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
490 <meta name="description" content="">
491 <meta name="author" content="">
492
493 <title>Group 1 Grocery Delivery</title>
494
495 <!-- Bootstrap core CSS -->
496 <link href="../../static/bootstrap.min.css" rel="stylesheet">
497
498 <!-- Custom styles for this template -->
499 <link href="../../static/modern-business.css" rel="stylesheet">
500
501
502 </head>
503 <script>
504 function checkAdmin()
505 {
506 var result = readCookie("admin");
507 if (result != "yes")
508 {
509 window.location.href = '/admin';
510 }
511 eraseCookie("username");
512 eraseCookie("email");
513 eraseCookie("tracking_id");
514 DeleteAllCookies();
515 eraseCookie("Destination");
516 eraseCookie("Total");
517 eraseCookie("Store");
518 eraseCookie("gsScrollPos-794");
519 eraseCookie("tracking_number");
520 }
521 checkAdmin();
522 </script>
523 <!-- <body onload = "addElement()"> -->
524
525 <!-- Navigation -->
526 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
527 <div class="container">
528
529
530 {% if tracking_id %}
531
532 <script type="text/javascript">
533 alert("Tracking ID: " + {{tracking_id}})
534 </script>
535 {% endif %}
536
537
538 {% if username %}
539
540 <script type="text/javascript">
541
542 var username_server = '{{username}}';
543 // alert("data from server :" + username_server);
544
545 createCookie("username", username_server, 365);
546 createCookie("email", '{{email}}', 365);
547 alert(readCookie("username"));
548
549 </script>
550
551
552 {% endif %}
553
554 <a class="navbar-brand" href="/admin/home">Admin Page</a>
555
556 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
557 <span class="navbar-toggler-icon"></span>
558 </button>
559 <div class="collapse navbar-collapse" id="navbarResponsive">
560 <ul class="navbar-nav ml-auto">
561
562 <li class="nav-item dropdown">
563
564 <script type="text/javascript">
565 if(readCookie("username") != "" && readCookie("username") != null){
566 var name = readCookie("username");
567 document.write('<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">');
568 // document.write(' <a class="dropdown-item" href="shoppingcart">Shopping Cart</a>');
569 document.write(' <a class="dropdown-item" onclick="logout()">Log out</a></div>');
570 // document.write('</div></li>');
571 }
572 else {
573 document.write('<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a><div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">');
574 document.write(' <a class="dropdown-item" onclick="logout()" href="/home">Log Out</a>');
575 // document.write(' <a class="dropdown-item" href="shoppingcart">Shopping Cart</a></div>');
576 }
577
578 </script>
579 </li>
580 </ul>
581 </div>
582 </div>
583 </nav>
584
585
586
587
588
589 <!-- Page Content -->
590 <div class="container">
591
592 <h1 class="my-4">Welcome to Group 1's Grocery Service Admin Page</h1>
593
594 <body onload="refreshDelete()">
595
596<form action ="/admin/home" type ="post">
597 {% csrf_token %}
598 <div class = "row">
599 <p style="padding-top:10px; padding-right:30px; padding-left:15px;"> Once you have finished changing the data below, click this button:</p>
600 {% csrf_token %}
601 <button class="btn btn-primary" style="background-color: #167FFC; border-color: #167FFC "id = "click" href ="/admin/home" type="post" onclick="getItems()">Update Database</button>
602 </div>
603 <input id = "item_array" type ="hidden" name = "item_array" value = ""/>
604</form>
605
606
607
608<form action ="/admin/home" method ="post">
609 {% csrf_token %}
610 <div class = "row" style="width:100%; padding:10px; padding-left:15px;">
611 <input name="add_name_field" type = "text" placeholder="Name" maxlength="95" style = " text-align: center; width: 15%; padding:10px; padding-right:5px;">
612 <input name="add_weight_field" onkeypress="return isNumberKey(event)" type = "text" maxlength="3" placeholder="Weight"style = " text-align: center; width: 10%">
613 <input name="add_cost_field" onkeypress="return isNumberKey(event)" type = "text" maxlength="3" placeholder="Cost"style = " text-align: center; width: 10%">
614 <input name="add_quantity_field" onkeypress="return isNumberKey(event)" type = "text" maxlength="3" placeholder="Amount"style = " text-align: center; width: 10%">
615 <input name="add_category_field" type = "text" list="categories" placeholder="Category"style = " text-align: center; width: 10%">
616 <input name="add_image_field" type = "text" maxlength="195" placeholder="Picture URL"style = " text-align: center; width: 18%">
617 <input name="add_desc_field" type = "text" maxlength="95" placeholder="Description"style = " text-align: center; width: 18%">
618 <button class = "btn btn-primary" style="background: #09A64D; border-color: #09A64D;" name = "add_item" >Add Item</button>
619 <datalist id="categories">
620 <option value="Fruit">
621 <option value="Vegtable">
622 <option value="Meat">
623 <option value="Dairy">
624 <option value="Seafood">
625 <option value="Grains">
626 </datalist>
627
628 </div>
629</form>
630
631<table id = "item_table" style="width:100%; ">
632 <tr>
633 <th> ID# </th>
634 <th> Name </th>
635 <th> Weight </th>
636 <th> Cost </th>
637 <th> Quantity </th>
638 <th> Category </th>
639 <th> Image </th>
640 <th> Description </th>
641 <th> Delete Item</th>
642 </tr>
643 {% for item in items %}
644 <tr>
645 <td>{{item.id}}</td>
646 <td><div contenteditable value = "{{item.name}}"> {{item.name}}</div></td>
647 <td><div contenteditable> {{item.weight}}</div></td>
648 <td><div contenteditable> {{item.cost}}</div></td>
649 <td><div contenteditable> {{item.quantity}}</div></td>
650 <td><div contenteditable> {{item.tags}}</div></td>
651 <td><div contenteditable style="width:150px;"> {{item.image}} </div></td>
652 <td><div contenteditable> {{item.description}}</div></td>
653 <form value = "DELETE" name = "DELETE" method = "post">
654 {% csrf_token %}
655 <td align="center">
656 <button style="background-color:red; border-color:red " class = "btn btn-primary" onclick="deleting({{item.id}})" name = "Delete {{item.name}}">Delete {{item.name}}</button>
657 </td>
658 <input type="hidden" id="deleteinput" name="deleteinput" value = "" />
659
660 </form>
661
662
663 </tr>
664 {% endfor %}
665
666</table>
667</body >
668
669
670 <!-- /.row -->
671 </div>
672 <!-- /.container -->
673
674 <!-- Footer -->
675 <footer class="py-5 bg-dark">
676 <div class="container">
677 <p class="m-0 text-center text-white">Copyright © Group 1 CS 160 2017</p>
678 </div>
679 <!-- /.container -->
680 </footer>
681
682 </body>
683
684</html>