Skip to content

Commit 8ceb888

Browse files
yohan-ocyohan-oc
committed
overlay screen added
1 parent e714ab3 commit 8ceb888

File tree

5 files changed

+207
-49
lines changed

5 files changed

+207
-49
lines changed

‎vue-frontend/warehouse-frontend/src/assets/parent-scan.png‎

-2.72 KB
Loading

‎vue-frontend/warehouse-frontend/src/components/AppNavbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<span class="navbar-brand">
77
<img src="@/assets/logo_new.png" alt="Turing Trust Logo" height="30">
88
</span>
9-
<button class="logout btn btn-link text-white" @click="logout"><i class="bi bi-box-arrow-left" style="padding-right: 5px;"></i>Logout</button>
9+
<!-- <button class="logout btn btn-link text-white" @click="logout"><i class="bi bi-box-arrow-left" style="padding-right: 5px;"></i>Logout</button>-->
1010
</nav>
1111
</template>
1212

@@ -18,7 +18,7 @@ export default {
1818
// localStorage.removeItem('isAuthenticated');
1919
// localStorage.removeItem('operatorName');
2020
// localStorage.removeItem('mode');
21-
this.$router.push('/');
21+
// this.$router.push('/');
2222
},
2323
},
2424
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ export default {
8383
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
8484
display: flex;
8585
flex-direction: column;
86-
justify-content: space-between; /* Distribute space evenly between elements */
87-
height: 100%; /* Allow the card to stretch */
86+
justify-content: space-between;
87+
height: 100%;
8888
}
8989
.card img {
9090
padding-bottom: 15px;

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

Lines changed: 202 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,56 @@
11
<script>
22
import {API_BASE_URL} from "@/config";
3+
// import { Modal } from "bootstrap";
34
45
export default {
56
data() {
67
return {
8+
isModalVisible: true,
79
parentId: "",
810
mode: "",
9-
isLoading: false,
11+
isParentScanning: false,
1012
errorMessage: ""
1113
};
1214
},
1315
mounted() {
16+
// this.modalInstance = new Modal(this.$refs.parentModal); // Initialize modal instance
17+
// this.modalInstance.show();
18+
this.isModalVisible = true;
1419
this.$nextTick(() => {
1520
this.$refs.parentId.focus();
1621
});
1722
this.mode = localStorage.getItem("mode");
1823
},
1924
methods: {
20-
async scanParentId() {
21-
// if (this.username) {
22-
// this.$router.push("/mode"); // Navigate to Home after login
23-
// } else {
24-
// alert("Please enter username");
25+
showModal() {
26+
this.isModalVisible = true; // Show the modal again
27+
this.$nextTick(() => {
28+
this.$refs.parentId.focus(); // Auto-focus input
29+
});
30+
},
31+
closeModal() {
32+
// this.modalInstance.hide(); // Closes the modal properly
33+
//const backdrop = document.querySelector(".modal-backdrop");
34+
// const modal = document.querySelector("#parentScanModal");
35+
// // if (backdrop) {
36+
// // backdrop.remove();
37+
// // }
38+
// //
39+
// if (modal) {
40+
// modal.remove();
2541
// }
26-
this.isLoading = true;
42+
this.isModalVisible = false;
43+
},
44+
async scanParentId() {
45+
this.isParentScanning = true;
2746
try {
2847
const response = await fetch(`${API_BASE_URL}/v1/lookup/parent/${this.parentId}?operation_mode=${this.mode}`);
2948
const data = await response.json();
3049
3150
if (data.response_type === "OK") {
3251
playSuccessSound();
33-
this.$router.push("/transaction");
52+
//this.$router.push("/transaction");
53+
this.closeModal();
3454
} else {
3555
playErrorSound();
3656
if(data.message) {
@@ -45,10 +65,11 @@ export default {
4565
alert("API Error:", error);
4666
}
4767
finally {
48-
this.isLoading = false;
68+
this.isParentScanning = false;
4969
}
5070
},
5171
goBack(){
72+
this.closeModal();
5273
this.$router.push("/");
5374
}
5475
}
@@ -66,53 +87,189 @@ function playSuccessSound(){
6687
</script>
6788

6889
<template>
90+
<div>
91+
<!-- Button to Show Modal Again -->
92+
<!-- <button class="btn btn-primary" @click="showModal">Open Parent Scan</button>-->
6993

70-
<div class="d-flex justify-content-center align-items-center vh-80 flex-column">
71-
<p class="title">{{ mode }}</p>
94+
<!-- Modal (Rendered Only When Needed) -->
95+
<div v-if="isModalVisible" class="modal fade show d-block" id="parentScanModal" aria-modal="true" role="dialog">
96+
<div class="modal-dialog modal-dialog-centered">
97+
<div class="modal-content">
98+
<div class="modal-header">
99+
<h5 class="modal-title">Scan parent</h5>
100+
</div>
72101

73-
<!-- Card Container -->
74-
<div class="card shadow">
75-
<img src="../assets/parent-scan.png" alt="Parent Id" class="logo">
76-
<p class="text-l"><b>Scan parent</b></p>
77-
<p class="text-muted">
78-
Scan the barcode or enter the ID of the pallet that you’ll be
79-
adding boxes to.
80-
</p>
102+
<div class="modal-body">
103+
<img src="../assets/parent-scan.png" alt="Parent Id" class="logo">
104+
<p class="text-muted">Scan the barcode or enter the ID of the pallet that you’ll be adding boxes to.</p>
81105

82-
<div class="mb-3">
83-
<label for="parentId" class="form-label">Parent ID</label>
84-
<input type="text" class="form-control" id="parentId" v-model="parentId" @keyup.enter="scanParentId" ref="parentId">
85-
</div>
106+
<div class="mb-3">
107+
<label for="parentId" class="form-label">Parent ID</label>
108+
<input type="text" class="form-control" id="parentId" v-model="parentId" ref="parentId">
109+
</div>
86110

87-
<div class="form-group">
88-
<button class="btn btn-primary" @click="goBack" style="width: 237px; margin-right: 8px">Cancel</button>
89-
<button class="btn btn-primary" @click="scanParentId" style="width: 237px">
90-
<span v-if="isLoading" class="spinner-border spinner-border-sm"></span>
91-
<span v-else>Continue</span>
92-
</button>
93-
</div>
111+
<div class="form-group d-flex justify-content-end">
112+
<button class="btn btn-primary" @click="goBack" style="width: 100px; margin-right: 8px">Cancel</button>
113+
<button class="btn btn-primary" @click="scanParentId" style="width: 100px">
114+
<span v-if="isParentScanning" class="spinner-border spinner-border-sm"></span>
115+
<span v-else>Continue</span>
116+
</button>
117+
</div>
94118

95-
<div v-if="errorMessage" class="mt-3">
96-
<p class="text-danger">
97-
<i class="bi bi-exclamation-octagon-fill" style="padding-right: 5px;"></i> {{ errorMessage }}
98-
</p>
119+
<div v-if="errorMessage" class="mt-3">
120+
<p class="text-danger">
121+
<i class="bi bi-exclamation-octagon-fill" style="padding-right: 5px;"></i> {{ errorMessage }}
122+
</p>
123+
</div>
124+
</div>
125+
</div>
126+
</div>
99127
</div>
100128

129+
<!-- Modal Backdrop (Controlled by Vue) -->
130+
<div v-if="isModalVisible" class="modal-backdrop fade show"></div>
131+
</div>
132+
133+
<!-- Transactions -->
134+
<div class="container content mt-4">
135+
<div class="mb-3" style="margin-top: 15px;">
136+
<h3 class="fw-bold" style="padding-bottom: 10px;">Work in progress palleting</h3>
137+
<hr class="my-2"> <!-- Adds a horizontal line with small top/bottom margin -->
138+
<p style="margin-top: 20px; padding-bottom: 10px;">
139+
<span class="" style="color: #075976;">Parent ID: </span>
140+
<span class="text-dark">XXX123</span>
141+
<span style="color: #CED4DA; padding-left: 15px; padding-right: 15px;">|</span>
142+
<span class="" style="color: #075976;">Location: </span>
143+
<span class="text-dark">LOC456</span>
144+
</p>
145+
</div>
146+
147+
<!-- Transaction Table -->
148+
<div class="card p-3 mt-3">
149+
<h5 class="fw-bold">Transaction</h5>
150+
<table class="table"> <!-- Removed 'table-striped' -->
151+
<thead>
152+
<tr>
153+
<th>Transaction ID</th>
154+
<th>Asset ID</th>
155+
<th>Equipment</th>
156+
<th>Notes</th>
157+
<th>Actions</th>
158+
</tr>
159+
</thead>
160+
<tbody>
161+
<tr>
162+
<td>6</td>
163+
<td>SB001234</td>
164+
<td>-</td>
165+
<td>
166+
<div class="alert-warning">
167+
Cannot assign asset to parent:<br>
168+
Asset status: <strong>Registered</strong><br>
169+
Expected status: <strong>Boxed for shipping</strong>
170+
</div>
171+
</td>
172+
<td>
173+
<div>
174+
<br>
175+
<button class="logout btn" style="color: #075976;">Force</button>
176+
</div>
177+
178+
</td>
179+
</tr>
180+
<tr>
181+
<td>5</td>
182+
<td>SB004321</td>
183+
<td>-</td>
184+
<td>SB004321 is already assigned to XXX123</td>
185+
<td></td>
186+
</tr>
187+
<tr>
188+
<td>4</td>
189+
<td>SB001243</td>
190+
<td>-</td>
191+
<td>SB001243 is already assigned to XXX123</td>
192+
<td></td>
193+
</tr>
194+
<tr>
195+
<td>3</td>
196+
<td>SB003412</td>
197+
<td>-</td>
198+
<td>SB003412 is already assigned to XXX123</td>
199+
<td></td>
200+
</tr>
201+
</tbody>
202+
</table>
203+
</div>
204+
205+
<!-- Inventory List -->
206+
<div class="card p-3 mt-4">
207+
<h5 class="d-flex justify-content-between">
208+
<span>Inventory list</span>
209+
<span style="color: #075976;">Inventory list count: <strong>3</strong></span>
210+
</h5>
211+
<table class="table"> <!-- Removed 'table-striped' -->
212+
<thead>
213+
<tr>
214+
<th>Asset ID</th>
215+
<th>Status</th>
216+
<th>Make</th>
217+
<th>Model</th>
218+
</tr>
219+
</thead>
220+
<tbody>
221+
<tr>
222+
<td>SB004321</td>
223+
<td>Boxed for shipping</td>
224+
<td>Acer</td>
225+
<td>0560X</td>
226+
</tr>
227+
<tr>
228+
<td>SB001243</td>
229+
<td>Boxed for shipping</td>
230+
<td>Dell</td>
231+
<td>Inspiron</td>
232+
</tr>
233+
<tr>
234+
<td>SB003412</td>
235+
<td>Boxed for shipping</td>
236+
<td>Apple</td>
237+
<td>Macbook Air</td>
238+
</tr>
239+
</tbody>
240+
</table>
101241
</div>
102242
</div>
243+
244+
<!-- Footer -->
245+
<div class="footer d-flex w-100">
246+
<div class="container d-flex justify-content-end">
247+
<!-- <button class="btn btn-primary me-2">Cancel</button>-->
248+
<button class="btn btn-primary">Finish scanning</button>
249+
</div>
250+
</div>
251+
103252
</template>
104253

254+
255+
105256
<style scoped>
106-
.vh-80 {
107-
height: 80vh;
257+
258+
.modal-backdrop.fade {
259+
opacity: 0.80;
108260
}
261+
262+
.footer {
263+
position: fixed;
264+
bottom: 0;
265+
width: 100%;
266+
background-color: #fff;
267+
padding: 10px;
268+
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
269+
}
270+
109271
.card {
110-
padding: 30px;
111272
border-radius: 10px;
112-
max-width: 546px;
113-
width: 100%;
114-
border-bottom-width: 3px;
115-
border-bottom-color: #04A27D;
116273
}
117274
.btn-primary {
118275
border-color: #04A27D;
@@ -127,11 +284,14 @@ function playSuccessSound(){
127284
.logo {
128285
display: block;
129286
margin: 0 auto 15px;
130-
width: 150px;
287+
width: 48px;
131288
}
132289
.title{
133290
/*margin-left: -168px;*/
134291
color: #075976;
135292
font-size: 34px;
136293
}
294+
.card {
295+
border-radius: 10px;
296+
}
137297
</style>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,7 @@ thead {
192192
flex: 1;
193193
padding-bottom: 60px;
194194
}
195-
.card {
196-
border-radius: 10px;
197-
}
195+
198196
.alert-warning {
199197
background-color: #fff3cd;
200198
color: #856404;

0 commit comments

Comments
 (0)