API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 15th, 2019
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.16 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div id="ordering">
  3. <img class="examplePanel" src="@/assets/colorsplash.jpg">
  4. <section class="leftSection">
  5. <div id="menuButtons">
  6. <button id = "bigButtons" v-on:click="changeCategory(1); showBurger(true); showOrder(true)"><img src="@/assets/hamburger.png" width=200px></button>
  7.  
  8. <div class="hamburgerIngredients" v-if="hamburgerButtons">
  9. <button :class="['menu-button', {'focused-category' : currentCategory === 1}]" v-on:click="changeCategory(1)"> {{ uiLabels.protein }} </button>
  10. <button :class="['menu-button', {'focused-category' : currentCategory === 2}]" v-on:click="changeCategory(2)"> {{ uiLabels.toppings }} </button>
  11. <button :class="['menu-button', {'focused-category' : currentCategory === 3}]" v-on:click="changeCategory(3)"> {{ uiLabels.sauce }} </button>
  12. <button :class="['menu-button', {'focused-category' : currentCategory === 4}]" v-on:click="changeCategory(4)"> {{ uiLabels.bread }} </button>
  13. </div>
  14. <button id = "bigButtons" v-on:click="changeCategory(5); showBurger(false); showOrder(true)"><img src="@/assets/fries.png" width=200px></button>
  15. <button id = "bigButtons" v-on:click="changeCategory(6); showBurger(false); showOrder(true)"><img src="@/assets/drink.png" width=200px></button>
  16. <div class="popupClass">
  17. <button id="checkoutButton" v-on:click=" showOrder(false); showPlaceOrder(true);showBurger(false)"> {{ uiLabels.checkout }} </button>
  18. </div>
  19. </div>
  20. </section>
  21.  
  22. <section class="header">
  23. <h1> Crusty Burgers </h1>
  24. </section>
  25.  
  26. <section class="middleSection" >
  27. <div id="welcomePage" v-if="buttonIsPressed == false">
  28. {{ uiLabels.welcome}} <br>
  29. <img src="@/assets/welcome.jpg" width=400px >
  30. </div>
  31. <div v-else>
  32. <div v-if="displayOrder">
  33. <h1 v-if="this.currentCategory==1">{{ uiLabels.protein}}</h1>
  34. <h1 v-if="this.currentCategory==2">{{ uiLabels.toppings}}</h1>
  35. <h1 v-if="this.currentCategory==3">{{ uiLabels.sauce}}</h1>
  36. <h1 v-if="this.currentCategory==4">{{ uiLabels.bread}}</h1>
  37. <h1 v-if="this.currentCategory==5">{{ uiLabels.extras}}</h1>
  38. <h1 v-if="this.currentCategory==6">{{ uiLabels.drinks}}</h1>
  39. <div v-if="this.currentCategory<=3" class="ingdiv">
  40. <Ingredient
  41. ref="ingredient"
  42. v-for= "item in ingredients"
  43. v-show="item.category==currentCategory"
  44. v-on:increment="createBurger(item)"
  45. v-on:deincrement="removeIngredientNumber(item)"
  46. :item="item"
  47. :lang="lang"
  48. :currentCategory=currentCategory
  49. :key="item.ingredient_id">
  50. </Ingredient>
  51. </div>
  52. <div v-else="this.currentCategory>=4" class="ingdiv2">
  53. <Ingredient
  54. ref="ingredient"
  55. v-for= "item in ingredients"
  56. v-show="item.category==currentCategory"
  57. v-on:increment="createBurger(item)"
  58. v-on:deincrement="removeIngredientNumber(item)"
  59. :item="item"
  60. :lang="lang"
  61. :currentCategory=currentCategory
  62. :key="item.ingredient_id">
  63. </Ingredient>
  64. </div> <br> <br>
  65. </div>
  66. <div v-if="hamburgerButtons">
  67. <div v-if="currentCategory >= 2">
  68. <button v-on:click="previousPage()" style="float: left;"><img src="@/assets/backArrow.png" width = 40> {{ uiLabels.previous }}</button>
  69. </div>
  70. <div v-if="currentCategory <= 3">
  71. <button v-on:click="nextPage()" style="float: left;"><img src="@/assets/frontArrow.png" width = 40> {{ uiLabels.next }}</button>
  72. </div>
  73. </div>
  74. <div id="addOrderButton" v-if="displayOrder">
  75. <button v-on:click="addButtonK(); showPlaceOrder(true)" style="float: right;"><img src="@/assets/cart.png" width = 40> {{ uiLabels.addOrder }}</button>
  76. </div>
  77. <div id="currentOrder" v-if="displayOrder == false">
  78. <h1>{{ uiLabels.yourOrder }}</h1>
  79. <div v-for="ab, index in outputOrderText">
  80. {{ ab}} &nbsp;
  81. <button v-on:click="removeItem(index)" id= "index" > X </button>
  82. <br>
  83. </div>
  84. <div id="totalPrice">
  85. {{uiLabels.totalPriceLang}} {{totalOrderPrice}} :-
  86. </div>
  87. <div v-if="placeOrderBoolean">
  88. <button id="placeOrderButton" v-on:click="placeOrder(); popupFunction()" style="float: right;"> {{uiLabels.placeOrder}} </button>
  89. <span class="popuptext" id="myPopup"> </span>
  90. </div>
  91. </div>
  92. </div>
  93. </section>
  94.  
  95.  
  96. <section class="rightSection">
  97. <button id="langButton" v-if="this.langBoolData" v-on:click="switchLang(); langBool(false)"><img src="@/assets/Sverige.png" width=100%></button>
  98. <button id="langButton" v-if="this.langBoolData==false" v-on:click="switchLang(); langBool(true)"><img src="@/assets/Storbritannien.png" width=100%></button>
  99. <div id="infoAllergy">
  100. <span id="milk"> L </span> = {{ uiLabels.contains }} {{ uiLabels.lactose }} <br>
  101. <span id="gluten">G</span> = {{ uiLabels.contains }} {{ uiLabels.gluten }} <br>
  102. <span id="vegan">V</span> = {{ uiLabels.vegan }}
  103. </div>
  104. <div class="rightInfo">
  105. <div id="secondRightBox">
  106. <div v-if="hamburgerButtons">
  107. <h1>{{ uiLabels.order }}</h1>
  108. <h4>{{uiLabels.protein}} </h4>
  109. <span v-for="ingri in this.burgerIngredients">
  110. <li v-if="ingri.category==1">{{ ingri["ingredient_"+lang] }}, </li>
  111. </span>
  112. <h4>{{ uiLabels.toppings }}</h4>
  113. <span v-for="ingri in this.burgerIngredients">
  114. <li v-if="ingri.category==2">{{ ingri["ingredient_"+lang] }}</li>
  115. </span>
  116. <h4>{{ uiLabels.sauce }}</h4>
  117. <span v-for="ingri in this.burgerIngredients">
  118. <li v-if="ingri.category==3">{{ ingri["ingredient_"+lang] }}, </li>
  119. </span>
  120. <h4>{{ uiLabels.bread }}</h4>
  121. <li v-if="isbreadin()!==true"> {{uiLabels.breaddemand}} </li>
  122. <span v-if="isbreadin()" v-for="ingri in this.burgerIngredients">
  123. <li v-if="ingri.category==4">{{ ingri["ingredient_"+lang] }} </li>
  124. </span>
  125. <h4>{{uiLabels.burgerprice}} {{ price }} kr </h4>
  126. </div>
  127. <h1>{{ uiLabels.ordersInQueue }}</h1>
  128. <div>
  129. <OrderItem
  130. v-for="(order, key) in orders"
  131. v-if="order.status !== 'done'"
  132. :order-id="key"
  133. :order="order"
  134. :ui-labels="uiLabels"
  135. :lang="lang"
  136. :key="key">
  137. </OrderItem>
  138. </div>
  139. </div>
  140. </div>
  141.  
  142. </section>
  143. </div>
  144. </template>
  145. <script>
  146.  
  147. //import the components that are used in the template, the name that you
  148. //use for importing will be used in the template above and also below in
  149. //components
  150. import Ingredient from '@/components/Ingredient.vue'
  151. import OrderItem from '@/components/OrderItem.vue'
  152.  
  153. //import methods and data that are shared between ordering and kitchen views
  154. import sharedVueStuff from '@/components/sharedVueStuff.js'
  155.  
  156. /* instead of defining a Vue instance, export default allows the only
  157. necessary Vue instance (found in main.js) to import your data and methods */
  158. export default {
  159. name: 'Ordering',
  160. components: {
  161. Ingredient,
  162. OrderItem
  163. },
  164. mixins: [sharedVueStuff], // include stuff that is used in both
  165. // the ordering system and the kitchen
  166. data: function() { //Not that data is a function!
  167. return {
  168. itemprice: 0,
  169. langBoolData:true,
  170. chosenIngredients: [],
  171. burgerIngredients: [],
  172. drinksAndExtras: [],
  173. outputOrderText: [],
  174. tempFoodObjekt:"",
  175. price: 0,
  176. totalOrderPrice: 0,
  177. orderNumber: "",
  178. currentCategory: 1,
  179. buttonIsPressed: false,
  180. hamburgerButtons: false,
  181. displayOrder: false,
  182. isburger: false,
  183. placeOrderBoolean: false,
  184. aBurger: {
  185. bread: null,
  186. meat: [],
  187. additionals:[],
  188. sauce: [],
  189. price: 0
  190. },
  191. aDrinkOrExtra: {
  192. size: "Small",
  193. name: {},
  194. price: 0
  195. }
  196. }
  197. },
  198. created: function () {
  199. this.$store.state.socket.on('orderNumber', function (data) {
  200. this.orderNumber = data;
  201. }.bind(this));
  202. },
  203. methods: {
  204. createBurger: function (item) {
  205. if (this.currentCategory<=4){
  206. this.burgerIngredients.push(item);
  207. this.price += +item.selling_price;
  208. }
  209. else if (this.currentCategory>=5) {
  210. this.drinksAndExtras.push(item);
  211. }
  212.  
  213. },
  214. addToOrder: function () {
  215. this.addToBurger();
  216. this.addToDrinkOrExtra();
  217. this.createOutputOrderText();
  218. //this.chosenIngredients = this.chosenIngredients.concat(this.burgerIngredients).concat(this.drinksAndExtras);
  219. this.burgerIngredients = [];
  220. this.drinksAndExtras = [];
  221. this.price=0;
  222. },
  223.  
  224. addButtonK: function(){
  225. if(this.isbreadin()){
  226. console.log("test1");
  227. this.addToOrder()
  228. this.showBurger(false)
  229. this.showOrder(false)
  230. }
  231.  
  232. else if (this.isNotBurger()) {
  233. console.log("test 2")
  234. this.addToOrder();
  235. this.showBurger(false);
  236. this.showOrder(false);
  237. }
  238. else {
  239. }
  240. },
  241.  
  242. addToBurger: function(){
  243. var i;
  244. for (i=0; i < this.burgerIngredients.length; i++){
  245. if (this.burgerIngredients[i].category == 1) {
  246. this.aBurger.meat.push(this.burgerIngredients[i]);
  247. }
  248. else if (this.burgerIngredients[i].category == 2) {
  249. this.aBurger.additionals.push(this.burgerIngredients[i]);
  250. }
  251. else if (this.burgerIngredients[i].category == 3) {
  252. this.aBurger.sauce.push(this.burgerIngredients[i]);
  253. }
  254. else if (this.burgerIngredients[i].category == 4)
  255. { this.isBurger=true;
  256. this.aBurger.bread = this.burgerIngredients[i];
  257. }
  258. }
  259. if(this.isBurger){
  260. this.getpriceofburger(this.aBurger)
  261. this.chosenIngredients.push({bread:this.aBurger.bread, meat:this.aBurger.meat,
  262. additionals:this.aBurger.additionals, sauce:this.aBurger.sauce, price:this.itemprice});
  263. this.itemprice=0;
  264. this.aBurger.bread=null;
  265. this.aBurger.meat=[];
  266. this.aBurger.additionals=[];
  267. this.aBurger.sauce=[]
  268. this.isBurger=false;
  269. }
  270. //this.chosenIngredients.push(this.aBurger);
  271. },
  272. addToDrinkOrExtra: function(){
  273. var j;
  274. for (j=0; j< this.drinksAndExtras.length; j++){
  275. if (this.drinksAndExtras[j].category >= 5){
  276. this.getpriceofburger(this.drinksAndExtras[j])
  277. console.log(this.itemprice)
  278. this.aDrinkOrExtra.name = this.drinksAndExtras[j]
  279. this.chosenIngredients.push({name:this.aDrinkOrExtra.name, size:this.aDrinkOrExtra.size, price:this.itemprice});
  280. this.itemprice=0;
  281. this.aDrinkOrExtra.name={};
  282. this.aDrinkOrExtra.size="Small";
  283. }
  284. }
  285. },
  286. placeOrder: function () {
  287. var i,
  288. //Wrap the order in an object
  289. order = {
  290. ingredients: this.outputOrderText,
  291. price: this.price
  292. };
  293. // make use of socket.io's magic to send the stuff to the kitchen via the server (app.js)
  294. this.$store.state.socket.emit('order', {order: order});
  295. //set all counters to 0. Notice the use of $refs
  296. for (i = 0; i < this.$refs.ingredient.length; i += 1) {
  297. this.$refs.ingredient[i].resetCounter();
  298. }
  299. this.price = 0;
  300. this.totalOrderPrice = 0;
  301. this.chosenIngredients = [];
  302. },
  303.  
  304. createOutputOrderText: function(){
  305. var i
  306. var j
  307. this.outputOrderText=[];
  308. this.totalOrderPrice=0;
  309. for (i=0; i <this.chosenIngredients.length; i++){
  310. if(this.chosenIngredients[i].bread != null){
  311. this.tempFoodObjekt= (i+1) +": " + this.chosenIngredients[i].bread["ingredient_" + this.lang]
  312. for (j=0; j < this.chosenIngredients[i].meat.length; j++){
  313. this.tempFoodObjekt=this.tempFoodObjekt + ", " + this.chosenIngredients[i].meat[j]["ingredient_" + this.lang]
  314. }
  315. for (j=0; j < this.chosenIngredients[i].additionals.length; j++){
  316. this.tempFoodObjekt=this.tempFoodObjekt + ", " + this.chosenIngredients[i].additionals[j]["ingredient_" + this.lang]
  317. }
  318. for (j=0; j < this.chosenIngredients[i].sauce.length; j++){
  319. this.tempFoodObjekt=this.tempFoodObjekt + ", " + this.chosenIngredients[i].sauce[j]["ingredient_" + this.lang]
  320. }
  321. this.tempFoodObjekt=this.tempFoodObjekt+", " + this.chosenIngredients[i].price + ":-";
  322. this.outputOrderText.push(this.tempFoodObjekt);
  323. this.tempFoodObjekt = "";
  324. this.totalOrderPrice+=this.chosenIngredients[i].price
  325. }
  326. else {
  327. this.tempFoodObjekt= (i+1) + ": " + this.chosenIngredients[i].name["ingredient_" + this.lang] + ", " + this.chosenIngredients[i].size + ", " + this.chosenIngredients[i].price + ":-";
  328. this.outputOrderText.push(this.tempFoodObjekt);
  329. this.tempFoodObjekt = "";
  330. console.log(this.chosenIngredients[i].price)
  331. this.totalOrderPrice+=this.chosenIngredients[i].price
  332. }
  333. }
  334. },
  335. changeCategory: function(int) {
  336. this.currentCategory = int;
  337. },
  338.  
  339. showBurger: function(boolean) {
  340. this.hamburgerButtons = boolean;
  341. this.buttonIsPressed=true;
  342. },
  343. showOrder: function(boolean) {
  344. this.displayOrder = boolean;
  345. },
  346. langBool: function(boolean){
  347. this.langBoolData=boolean;
  348. },
  349. showPlaceOrder: function(boolean){
  350. this.placeOrderBoolean = boolean;
  351. },
  352.  
  353. getpriceofburger: function(item){
  354. var j
  355. if(item.bread!=null){
  356. this.itemprice=parseInt(item.bread.selling_price);
  357. for (j=0; j < item.meat.length; j++){
  358. this.itemprice+=parseInt(item.meat[j].selling_price);
  359. }
  360. for (j=0; j < item.additionals.length; j++){
  361. this.itemprice+=parseInt(item.additionals[j].selling_price);
  362.  
  363. }
  364. for (j=0; j < item.sauce.length; j++){
  365. this.itemprice+=parseInt(item.sauce[j].selling_price);
  366.  
  367. }
  368. }
  369. else {
  370. this.itemprice=parseInt(item.selling_price);
  371. }
  372. },
  373.  
  374. removeItem: function(index){
  375. this.chosenIngredients.splice(index,1);
  376. console.log(this.chosenIngredients[index])
  377. this.createOutputOrderText();
  378. },
  379.  
  380. getbreadindex: function(ingri){
  381. if(ingri.category==4){
  382. return ingri
  383. }
  384. },
  385.  
  386. isbreadin:function(){
  387. var i
  388. for(i=0; i <this.burgerIngredients.length; i++){
  389.  
  390. if (this.burgerIngredients[i].category==4){
  391. return true
  392. }
  393. }
  394. return false
  395. },
  396.  
  397. isNotBurger:function(){
  398. var i
  399. for(i=0; i <this.drinksAndExtras.length; i++){
  400. if (this.drinksAndExtras[i].category>4){
  401. return true
  402. }}
  403. return false
  404. },
  405.  
  406. removeIngredientNumber: function(item){
  407. if (this.currentCategory <= 3){
  408. this.burgerIngredients.splice( this.burgerIngredients.indexOf(item),1);
  409.  
  410. this.price += -item.selling_price;
  411. }
  412. else if (this.currentCategory == 4){
  413. var bread_index;
  414. if(this.isbreadin()){
  415. bread_index=this.burgerIngredients.findIndex(this.getbreadindex);
  416. this.price += -this.burgerIngredients[bread_index].selling_price;
  417. this.burgerIngredients.splice(bread_index,1);
  418.  
  419. }
  420. }
  421. else {
  422. this.drinksAndExtras.splice( this.drinksAndExtras.indexOf(item),1);
  423. this.price += -item.selling_price;
  424. }
  425. },
  426.  
  427. nextPage: function(){
  428. this.currentCategory += 1;
  429. },
  430. previousPage: function(){
  431. this.currentCategory = this.currentCategory - 1;
  432. },
  433.  
  434. popupFunction: function(){
  435. if (confirm("Place order")){
  436. this.placeOrder()
  437. };
  438. }
  439.  
  440. }
  441. }
  442. </script>
  443. <style scoped>
  444. /* scoped in the style tag means that these rules will only apply to elements, classes and ids in this template and no other templates. */
  445. @media all and (max-width: 700px) {
  446. .examplePanel {
  447. position: fixed;
  448. background-size: cover;
  449. width: 100%;
  450. height: 100%;
  451. left: 0;
  452. top: 0;
  453. z-index: -2;
  454. }
  455. }
  456. .examplePanel {
  457. position: fixed;
  458. background-size: cover;
  459. width: 100%;
  460. left: 0;
  461. top: 0;
  462. z-index: -2;
  463. }
  464.  
  465. #ordering {
  466. display: grid;
  467. grid-gap: 15px;
  468. grid-template-columns: 20% 60% 20%;
  469. margin: auto;
  470. width: 90%;
  471. min-width: 1000px;
  472. font-family: "Comic Sans MS";
  473. }
  474. .leftSection{
  475. grid-column: 1;
  476. grid-row: 1 / span 3;
  477. margin-top: 150px
  478. }
  479.  
  480. .header{
  481. grid-column: 2;
  482. grid-row: 1;
  483. font-size: 3.5em;
  484. color: white;
  485. -webkit-text-fill-color: black;
  486. -webkit-text-stroke-width: 1.5px;
  487. -webkit-text-stroke-color: white;
  488. margin-top: -50px;
  489. text-align: center;
  490. }
  491.  
  492. .menu-button{
  493. font-size: 0.90em;
  494. border: 4px groove #ccd;
  495. }
  496.  
  497. #bigButtons {
  498. background-color: white;
  499. border: 4px groove #ccd;
  500. display: inline-block;
  501. }
  502. .hamburgerIngredients {
  503. text-align: center;
  504. }
  505.  
  506. .middleSection{
  507. grid-column: 2;
  508. grid-row: 2;
  509. border: 4px groove #ccd;
  510. background-color: white;
  511. margin-left: 15px;
  512. padding: 1em;
  513. width:700px;
  514. margin-top: -73px;
  515. }
  516. #welcomePage{
  517. font-size: 1.5em;
  518. text-align: center;
  519. }
  520.  
  521. #totalPrice{
  522. font-size: 1.3em;
  523. border: 2px solid;
  524. padding-left: 10px;
  525. margin-right: 500px;
  526. margin-top: 30px;
  527. }
  528.  
  529. .rightSection{
  530. grid-column: 3;
  531. grid-row: 1 / span 3;
  532. margin-top: 135px;
  533. padding: 1em;
  534. }
  535.  
  536. .rightSection button{
  537. margin-bottom: 30px;
  538. background-color: white;
  539. border: 4px groove #ccd;
  540. display: inline-block;
  541. }
  542.  
  543. .ingdiv{
  544. overflow-y:scroll;
  545. height:50vh;
  546. box-shadow: 0px 12px 5px -2px lightgray;
  547. }
  548.  
  549. .rightInfo {
  550. margin-top: 30px;
  551. border: 4px groove #ccd;
  552. background-color: white;
  553. }
  554.  
  555. #menuButtons{
  556. display: grid;
  557. grid-gap: 20px;
  558. grid-template-columns: repeat(1, 1fr);
  559. }
  560.  
  561. #placeOrderButton{
  562. font-size: 30px;
  563. font-family: "Comic Sans MS";
  564. background-color: LightSkyBlue;
  565. border: 2px solid;
  566. }
  567. #addOrderButton {
  568. font-size: 50em;
  569. }
  570. #checkoutButton {
  571. width: 270px;
  572. height: 80px;
  573. margin-top: 10px;
  574. font-size: 18px;
  575. font-family: "Comic Sans MS";
  576. border: 4px groove #ccd;
  577. }
  578.  
  579. #infoAllergy {
  580. border: 4px groove #ccd;
  581. padding: 1em;
  582. background-color: white;
  583. width: 198px;
  584.  
  585. }
  586.  
  587. #secondRightBox {
  588. padding: 1em;
  589. }
  590.  
  591. #milk {
  592. color: blue;
  593. }
  594.  
  595. #gluten {
  596. color: brown;
  597. }
  598.  
  599. #vegan {
  600. color: green;
  601. }
  602. #index{
  603. background-color: OrangeRed;
  604. font-size: 0.9em;
  605. font-weight: bold;
  606. border: 2px solid;
  607. height:0.95;
  608. }
  609. .focused-category {
  610. background-color: black;
  611. color: white;
  612. }
  613.  
  614. .example-panel {
  615. position: fixed;
  616. left:0;
  617. top:0;
  618. z-index: -2;
  619. }
  620. .ingredient {
  621. border: 1px solid #ccd;
  622. padding: 1em;
  623. background-color: white;
  624. }
  625.  
  626. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!