Enjoy your meal!
@@ -248,6 +250,8 @@ import { mapState } from "vuex";
import DatabaseMixin from "@/mixins/DatabaseMixin.vue";
import { storage } from "@/firebase.js";
+import axios from "axios";
+
export default {
name: "home",
components: {
@@ -278,11 +282,18 @@ export default {
computed: {
...mapState({
notifications: state => state.notifications,
- menuItems: state => state.menuItems,
+ // menuItems: state => state.menuItems,
itemsInCurrentOrder: state => state.itemsInCurrentOrder
}),
totalPrice() {
return this.getTotalSum();
+ },
+ streamURL() {
+ // to prevent overloading backend with video stream + inference (during inference)
+ if (this.state === "init") {
+ return this.settings.cameraStreamURL;
+ } else
+ return "https://miro.medium.com/max/1280/1*3lAxV0t43t9KFf0q4EJXNA.gif";
}
},
mounted() {
@@ -292,47 +303,52 @@ export default {
},
methods: {
makePrediction() {
+ console.log(`Stopping camera stream (3s)...`);
this.state = "inference";
- this.correctionDialog = false;
-
- const url = `${this.settings.deviceHost}/predict`;
+ setTimeout(() => {
+ console.log(`Getting prediction...`);
+ const url = `${this.settings.backendURL}`;
- console.log(`Getting prediction...`);
- console.log(`GET ${this.settings.deviceHost}/predict`);
+ console.log(`GET ${this.settings.backendURL}`);
- this.getPrediction(url)
- .then(data => {
- if (data) {
- this.failedToPredict = false;
- this.prediction = JSON.parse(JSON.stringify(data)); // copies object (not by reference)
- this.prediction.orderId = this.orderId;
- this.prediction.id = this.prediction.id || this.getUID();
- this.prediction.imageURL = `${this.prediction.imageURL}.png`;
- this.prediction.price = this.menuItems.find(
- i => (i.class = data.class)
- ).price;
- const pricePerGram = this.prediction.price / 100; // since price is in EUR/100g
- this.prediction.weightedPrice = (
- pricePerGram * data.weight
- ).toFixed(2);
- this.prediction.created = Date.now();
- console.log(this.prediction);
- this.getImageURL(`${this.prediction.id}.png`);
- } else this.failedToPredict = true;
- })
- .finally(() => {
- this.state = "feedback";
- });
+ this.getPrediction(url)
+ .then(data => {
+ if (data) {
+ console.log("Results:", data);
+ this.failedToPredict = false;
+ // this.prediction = JSON.parse(JSON.stringify(data)); // copies object (not by reference)
+ this.prediction.orderId = this.orderId;
+ this.prediction.id = data.id;
+ this.prediction.imageURL = data.imageURL;
+ this.prediction.class = data.label;
+ this.prediction.price = this.menuItems.find(
+ i => (i.class = data.label)
+ ).price;
+ const pricePerGram = this.prediction.price / 100; // since price is in EUR/100g
+ this.prediction.weightedPrice = (
+ pricePerGram * data.weight
+ ).toFixed(2);
+ this.prediction.created = Date.now();
+ console.log(this.prediction);
+ this.getImageURL(`${this.prediction.id}.jpg`);
+ } else this.failedToPredict = true;
+ })
+ .finally(() => {
+ this.state = "feedback";
+ });
+ }, 10);
+ this.correctionDialog = false;
},
async getPrediction(url) {
try {
- let response = await fetch(url, {
+ let response = await axios(url, {
+ method: "GET",
mode: "no-cors",
headers: {
"Access-Control-Allow-Origin": "*"
}
});
- return response.json();
+ return response.data;
} catch (error) {
console.error(error);
this.$store.commit("FIRE_NOTIFICATION", {
@@ -344,7 +360,7 @@ export default {
getImageURL(filename) {
console.log("GET image:", filename);
this.predictionsStorageRef
- .child("0144b84e-f26f-447d-b834-39744383c67f.jpg")
+ .child(filename)
.getDownloadURL()
.then(url => {
this.prediction.imageURL = url;
@@ -355,12 +371,12 @@ export default {
console.error(error);
document.getElementById(
"prediction-image"
- ).src = this.settings.cameraStreamHost;
- return this.settings.cameraStreamHost;
+ ).src = this.settings.cameraStreamURL;
+ return this.settings.cameraStreamURL;
});
},
updateClass(menuItem) {
- this.prediction = JSON.parse(JSON.stringify(this.prediction)); // copies object (not by reference)
+ this.prediction = this.initPrediction();
this.prediction.class = menuItem.class;
this.prediction.orderId = this.orderId;
this.prediction.id = this.prediction.id || this.getUID();
@@ -441,6 +457,17 @@ export default {
this.model = 2;
this.state = "feedback";
},
+ initPrediction() {
+ return {
+ id: this.getUID(),
+ class: "",
+ orderId: "",
+ price: "",
+ weight: "",
+ created: "",
+ imageURL: ""
+ };
+ },
purchase() {
this.overlayWhilePayment = true;
setTimeout(() => {
@@ -464,7 +491,6 @@ export default {
prop: "itemsInCurrentOrder",
value: []
});
- this.itemsInCurrentOrder = [];
this.initPrediction();
},
backToStart() {
@@ -479,22 +505,15 @@ export default {
.toString(36)
.substr(2, 10);
},
- initPrediction() {
- return {
- id: "",
- class: "",
- orderId: "",
- price: "",
- weight: "",
- created: ""
- };
- },
getTotalSum() {
if (this.itemsInCurrentOrder.length) {
- return this.itemsInCurrentOrder
- .map(item => Number(item.weightedPrice))
- .reduce((prev, next) => prev + next)
- .toFixed(2);
+ const prices = this.itemsInCurrentOrder.map(item =>
+ Number(item.weightedPrice)
+ );
+ console.log(prices);
+ const sum = prices.reduce((prev, next) => prev + next);
+ console.log(sum);
+ return sum.toFixed(2);
} else return 0.0;
}
}
@@ -529,8 +548,10 @@ export default {
.v-stepper__wrapper .v-card__text {
/* minus v-card-title height and v-card-actions height */
height: calc(100% - 48px - 38px - 52px - 16px);
- padding: 16px !important; /* overrides .v-card__title + .v-card__text { padding-top: 0px; } */
- margin-bottom: 16px !important; /* spaces v-list-action buttons */
+ padding: 16px !important;
+ /* overrides .v-card__title + .v-card__text { padding-top: 0px; } */
+ margin-bottom: 16px !important;
+ /* spaces v-list-action buttons */
overflow-y: auto;
}
@@ -542,6 +563,7 @@ export default {
justify-content: center;
max-width: 100%;
}
+
#prediction-image.error {
background-color: red;
opacity: 0.15;
diff --git a/src/views/Menu.vue b/src/views/Menu.vue
index 1ec45a7..dbf67ae 100644
--- a/src/views/Menu.vue
+++ b/src/views/Menu.vue
@@ -1,7 +1,21 @@
-
+
+
+ mdi-plus Add
+
+
+
+
- {{ item.id }}
+ {{ item.class }}
{{ item.price }} EUR
@@ -41,7 +55,7 @@
color="primary"
depressed
:key="`dialog-btn-${item.id}`"
- @click="openDialog(item)"
+ @click="openUpdateDialog(item)"
>Edit item
@@ -63,7 +77,7 @@
Menu item
- Details
+
Image
- Image -->
+
-
+ >
- Delete
+ Delete
Cancel
- Save
+ Save
+ Save
@@ -118,15 +131,22 @@ export default {
data() {
return {
imageURLs: [],
+ dialogType: "update",
editDialog: false,
itemToEdit: null,
- file: null
+ file: null,
+ newMenuItem: {
+ id: "",
+ class: "",
+ price: "",
+ imageURL: ""
+ }
};
},
computed: {
...mapState({
notifications: state => state.notifications,
- menuItems: state => state.menuItems,
+ // // menuItems: state => state.menuItems,
itemsInCurrentOrder: state => state.itemsInCurrentOrder
})
},
@@ -136,10 +156,17 @@ export default {
this.getImageUrls(predictionsRef);
},
methods: {
- openDialog(item) {
+ openCreateDialog(item) {
+ console.log(item);
+ this.itemToEdit = item;
+ this.dialogType = "create";
this.editDialog = true;
+ },
+ openUpdateDialog(item) {
+ console.log(item);
this.itemToEdit = item;
- this.alert(JSON.stringify(item, null, 4));
+ this.dialogType = "update";
+ this.editDialog = true;
},
getImageUrls(folderRef) {
folderRef
@@ -188,6 +215,18 @@ export default {
console.error(error);
})
.finally(() => console.log(this.imageURLs));
+ },
+ create(item) {
+ this.createDoc(this.$firestoreRefs.menuItems, item);
+ this.editDialog = false;
+ },
+ update(item) {
+ this.updateDoc(this.$firestoreRefs.menuItems, item.id, item);
+ this.editDialog = false;
+ },
+ remove(item) {
+ this.deleteDocById(this.$firestoreRefs.menuItems, item.id, item);
+ this.editDialog = false;
}
}
};
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 02efc9a..d1c6cad 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -18,7 +18,7 @@ export default {
computed: {
...mapState({
notifications: state => state.notifications,
- menuItems: state => state.menuItems,
+ // menuItems: state => state.menuItems,
itemsInCurrentOrder: state => state.itemsInCurrentOrder
})
},
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 95f2c66..d68dbf0 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -1,7 +1,7 @@
Menu
-Menu
+
-
+
- {{ item.class }}
+ {{ item.label }}
{{ item.price }} EUR
@@ -72,7 +72,7 @@ export default {
computed: {
...mapState({
notifications: state => state.notifications,
- menuItems: state => state.menuItems,
+ // menuItems: state => state.menuItems,
itemsInCurrentOrder: state => state.itemsInCurrentOrder
})
},