Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <template>
<BModal
v-model="show"
id="package_planner"
title="Pack Planner"
centered
size="xl"
>
<div v-if="!isAvailable" class="text-center">
Your devices or browsers may still not support WebGL.
</div>
<div v-else>
<PackagePlanner :items="items" />
</div>
<template #modal-footer>
<div class="w-100 d-flex justify-content-end">
<button size="sm" class="btn btn-light mr-2" v-on:click="show = false">
Close
</button>
</div>
</template>
</BModal>
</template>
<script>
import { productItems } from "~/static/product_Items_Examples";
import WebGL from "~/utils/WebGL";
import PackagePlanner from "../PackPlanner";
export default {
name: "PackagePlannerModal",
components: { PackagePlanner },
props: { order: Object },
data: () => ({
show: false,
items: [],
isAvailable: false,
productItems,
}),
beforeMount() {
const { isWebGLAvailable } = WebGL;
this.isAvailable = isWebGLAvailable();
},
mounted() {
const { order_items, order_bundles } = this.order;
const order_products = order_items.reduce((acc, item) => {
const { quantity, product } = item;
return [...acc, ...new Array(quantity).fill(product)];
}, []);
const order_bundles_products = order_bundles.reduce((acc, item) => {
if (item.bundle) {
acc = [...acc, ...item.bundle.products];
}
return acc;
}, []);
this.items = [
/*...order_products, ...order_bundles_products,*/ ...this.productItems,
].sort(function sortByVolume(b, a) {
if (a.volume < b.volume) {
return -1;
}
if (a.volume > b.volume) {
return 1;
}
return 0;
});
},
};
</script>
<style scoped>
#planner {
width: 100%;
height: calc(100vh * 0.5);
}
</style> |