Skip to content

Commit 5a1dd1d

Browse files
yohan-ocyohan-oc
committed
dynamic ui updated
1 parent ed8da0a commit 5a1dd1d

File tree

1 file changed

+117
-101
lines changed

1 file changed

+117
-101
lines changed

‎vue-frontend/warehouse-frontend/src/views/ModePage.vue‎

Lines changed: 117 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,33 @@ export default {
44
data() {
55
return {
66
operationModes: [],
7-
groupedModes: {},
87
}
98
},
109
mounted() {
1110
this.fetchModes();
1211
},
12+
computed: {
13+
groupedModes() {
14+
return this.operationModes.reduce((acc, mode) => {
15+
if (!acc[mode.category]) {
16+
acc[mode.category] = [];
17+
}
18+
acc[mode.category].push(mode);
19+
return acc;
20+
}, {});
21+
}
22+
},
1323
methods: {
1424
async fetchModes() {
1525
try {
1626
const response = await fetch(`/updates/modes.json`);
1727
const data = await response.json();
18-
//alert(data.operation_modes[0].name);
1928
this.operationModes = data.operation_modes;
20-
this.groupModesByCategory();
2129
} catch (error) {
2230
console.error("Error fetching modes:", error);
2331
}
2432
},
25-
groupModesByCategory() {
26-
this.groupedModes = this.operationModes.reduce((acc, mode) => {
27-
if (!acc[mode.category]) {
28-
acc[mode.category] = [];
29-
}
30-
acc[mode.category].push(mode);
31-
return acc;
32-
}, {});
33-
},
3433
chooseMode(mode) {
35-
// if (this.username) {
36-
// this.$router.push("/mode"); // Navigate to Home after login
37-
// } else {
38-
// alert("Please enter username");
39-
// }
40-
//alert(mode);
4134
localStorage.setItem('mode', mode);
4235
this.$router.push("/parent");
4336
}
@@ -50,93 +43,21 @@ export default {
5043
<h4 class="section-title">Select a mode</h4>
5144
<p style="color: #075976;">Begin palleting or by selecting a mode below.</p>
5245

53-
<div class="row">
54-
<div class="col-md-2">
55-
<h5 class="section-title">Palleting</h5>
56-
</div>
57-
<div class="col-md-2">
58-
<div class="card">
59-
<img src="../assets/work-in-progress.png" alt="Work in Progress" width="50" class="d-block mx-auto">
60-
<p>Work in progress palleting</p>
61-
<button class="btn btn-outline-success w-100" @click="chooseMode('Work in progress palleting')">Start →</button>
46+
<div v-for="(modes, category) in groupedModes" :key="category">
47+
<div class="row">
48+
<div class="col-md-2">
49+
<h5 class="section-title">{{ category }}</h5>
6250
</div>
63-
</div>
64-
<div class="col-md-2">
65-
<div class="card">
66-
<img src="../assets/shipping-box.png" alt="Shipping Box" width="50" class="d-block mx-auto">
67-
<p>Shipping box palleting</p>
68-
<button class="btn btn-outline-success w-100" @click="chooseMode('Shipping box palleting')">Start →</button>
51+
<div v-for="(mode, index) in modes" :key="mode.name" :class="['col-md-2', { 'offset-md-2': index !== 0 && index % 4 === 0 }]" style="padding-bottom: 25px;">
52+
<div class="card">
53+
<img :src="require(`@/assets/${mode.imagePath || mode.image}`)" :alt="mode.name" width="50" class="d-block mx-auto">
54+
<p>{{ mode.name }}</p>
55+
<button class="btn btn-outline-success w-100" @click="chooseMode(mode.name)">Start →</button>
56+
</div>
6957
</div>
7058
</div>
7159
</div>
7260

73-
<div class="row mt-4">
74-
<div class="col-md-2">
75-
<h5 class="section-title">Boxing</h5>
76-
</div>
77-
78-
<div class="col-md-2">
79-
<div class="card">
80-
<img src="../assets/desktop.png" alt="Wiped Desktops" width="50" class="d-block mx-auto">
81-
<p>Boxing (Wiped) Desktops for shipping</p>
82-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) Desktops for shipping')">Start →</button>
83-
</div>
84-
</div>
85-
86-
<div class="col-md-2">
87-
<div class="card">
88-
<img src="../assets/desktop-imaged.png" alt="Imaged Desktops" width="50" class="d-block mx-auto">
89-
<p>Boxing (Imaged) Desktops for shipping</p>
90-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Imaged) Desktops for shipping')">Start →</button>
91-
</div>
92-
</div>
93-
94-
<div class="col-md-2">
95-
<div class="card">
96-
<img src="../assets/laptop.png" alt="Wiped Laptops" width="50" class="d-block mx-auto">
97-
<br/>
98-
<p>Boxing (Wiped) Laptops for shipping</p>
99-
<br/>
100-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) Laptops for shipping')">Start →</button>
101-
</div>
102-
</div>
103-
104-
<div class="col-md-2">
105-
<div class="card">
106-
<img src="../assets/laptop-imaged.png" alt="Imaged Laptops" width="50" class="d-block mx-auto">
107-
<p>Boxing (Imaged) Laptops for shipping</p>
108-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Imaged) Laptops for shipping')">Start →</button>
109-
</div>
110-
</div>
111-
</div>
112-
113-
<div class="row mt-4 mb-5">
114-
<div class="col-md-2"></div>
115-
116-
<div class="col-md-2">
117-
<div class="card">
118-
<img src="../assets/monitor.png" alt="Monitors" width="50" class="d-block mx-auto">
119-
<p>Boxing monitors for shipping</p>
120-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing monitors for shipping')">Start →</button>
121-
</div>
122-
</div>
123-
124-
<div class="col-md-2">
125-
<div class="card">
126-
<img src="../assets/phone.png" alt="Phones and Laptops" width="50" class="d-block mx-auto">
127-
<p>Boxing (Wiped) phones and laptops for shipping</p>
128-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) phones and laptops for shipping')">Start →</button>
129-
</div>
130-
</div>
131-
132-
<div class="col-md-2">
133-
<div class="card">
134-
<img src="../assets/money.png" alt="For Sale" width="50" class="d-block mx-auto">
135-
<p>Boxing Desktops and Laptops for sale</p>
136-
<button class="btn btn-outline-success w-100" @click="chooseMode('Boxing Desktops and Laptops for sale')">Start →</button>
137-
</div>
138-
</div>
139-
</div>
14061
</div>
14162
</template>
14263

@@ -173,4 +94,99 @@ export default {
17394
border-bottom-width: 3px;
17495
border-bottom-color: #04A27D;
17596
}
176-
</style>
97+
</style>
98+
99+
<!--<template>-->
100+
<!-- <div class="container">-->
101+
<!-- <h4 class="section-title">Select a mode</h4>-->
102+
<!-- <p style="color: #075976;">Begin palleting or by selecting a mode below.</p>-->
103+
104+
<!-- <div class="row">-->
105+
<!-- <div class="col-md-2">-->
106+
<!-- <h5 class="section-title">Palleting</h5>-->
107+
<!-- </div>-->
108+
<!-- <div class="col-md-2">-->
109+
<!-- <div class="card">-->
110+
<!-- <img src="../assets/work-in-progress.png" alt="Work in Progress" width="50" class="d-block mx-auto">-->
111+
<!-- <p>Work in progress palleting</p>-->
112+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Work in progress palleting')">Start →</button>-->
113+
<!-- </div>-->
114+
<!-- </div>-->
115+
<!-- <div class="col-md-2">-->
116+
<!-- <div class="card">-->
117+
<!-- <img src="../assets/shipping-box.png" alt="Shipping Box" width="50" class="d-block mx-auto">-->
118+
<!-- <p>Shipping box palleting</p>-->
119+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Shipping box palleting')">Start →</button>-->
120+
<!-- </div>-->
121+
<!-- </div>-->
122+
<!-- </div>-->
123+
124+
<!-- <div class="row mt-4">-->
125+
<!-- <div class="col-md-2">-->
126+
<!-- <h5 class="section-title">Boxing</h5>-->
127+
<!-- </div>-->
128+
129+
<!-- <div class="col-md-2">-->
130+
<!-- <div class="card">-->
131+
<!-- <img src="../assets/desktop.png" alt="Wiped Desktops" width="50" class="d-block mx-auto">-->
132+
<!-- <p>Boxing (Wiped) Desktops for shipping</p>-->
133+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) Desktops for shipping')">Start →</button>-->
134+
<!-- </div>-->
135+
<!-- </div>-->
136+
137+
<!-- <div class="col-md-2">-->
138+
<!-- <div class="card">-->
139+
<!-- <img src="../assets/desktop-imaged.png" alt="Imaged Desktops" width="50" class="d-block mx-auto">-->
140+
<!-- <p>Boxing (Imaged) Desktops for shipping</p>-->
141+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Imaged) Desktops for shipping')">Start →</button>-->
142+
<!-- </div>-->
143+
<!-- </div>-->
144+
145+
<!-- <div class="col-md-2">-->
146+
<!-- <div class="card">-->
147+
<!-- <img src="../assets/laptop.png" alt="Wiped Laptops" width="50" class="d-block mx-auto">-->
148+
<!-- <br/>-->
149+
<!-- <p>Boxing (Wiped) Laptops for shipping</p>-->
150+
<!-- <br/>-->
151+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) Laptops for shipping')">Start →</button>-->
152+
<!-- </div>-->
153+
<!-- </div>-->
154+
155+
<!-- <div class="col-md-2">-->
156+
<!-- <div class="card">-->
157+
<!-- <img src="../assets/laptop-imaged.png" alt="Imaged Laptops" width="50" class="d-block mx-auto">-->
158+
<!-- <p>Boxing (Imaged) Laptops for shipping</p>-->
159+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Imaged) Laptops for shipping')">Start →</button>-->
160+
<!-- </div>-->
161+
<!-- </div>-->
162+
<!-- </div>-->
163+
164+
<!-- <div class="row mt-4 mb-5">-->
165+
<!-- <div class="col-md-2"></div>-->
166+
167+
<!-- <div class="col-md-2">-->
168+
<!-- <div class="card">-->
169+
<!-- <img src="../assets/monitor.png" alt="Monitors" width="50" class="d-block mx-auto">-->
170+
<!-- <p>Boxing monitors for shipping</p>-->
171+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing monitors for shipping')">Start →</button>-->
172+
<!-- </div>-->
173+
<!-- </div>-->
174+
175+
<!-- <div class="col-md-2">-->
176+
<!-- <div class="card">-->
177+
<!-- <img src="../assets/phone.png" alt="Phones and Laptops" width="50" class="d-block mx-auto">-->
178+
<!-- <p>Boxing (Wiped) phones and laptops for shipping</p>-->
179+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing (Wiped) phones and laptops for shipping')">Start →</button>-->
180+
<!-- </div>-->
181+
<!-- </div>-->
182+
183+
<!-- <div class="col-md-2">-->
184+
<!-- <div class="card">-->
185+
<!-- <img src="../assets/money.png" alt="For Sale" width="50" class="d-block mx-auto">-->
186+
<!-- <p>Boxing Desktops and Laptops for sale</p>-->
187+
<!-- <button class="btn btn-outline-success w-100" @click="chooseMode('Boxing Desktops and Laptops for sale')">Start →</button>-->
188+
<!-- </div>-->
189+
<!-- </div>-->
190+
<!-- </div>-->
191+
<!-- </div>-->
192+
<!--</template>-->

0 commit comments

Comments
 (0)