Skip to content

Commit 6674cde

Browse files
yohan-ocyohan-oc
committed
landing page updated
1 parent 5a740ca commit 6674cde

File tree

4 files changed

+49
-173
lines changed

4 files changed

+49
-173
lines changed

‎vue-frontend/warehouse-frontend/src/assets/flow-arrow.png‎

1.06 KB
Loading

‎vue-frontend/warehouse-frontend/src/assets/moving-location.png‎

2.5 KB
Loading

‎vue-frontend/warehouse-frontend/src/assets/palleting-and-shipping.png‎

986 Bytes
Loading

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

Lines changed: 49 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -3,203 +3,79 @@ export default {
33
name: "App",
44
data() {
55
return {
6-
operatorName: "",
7-
isOperatorDisabled: false,
8-
parentId: "", // SP000123,
9-
isParentIdValid: false,
10-
isParentDisabled: false,
11-
assetId: "", // SP000123
12-
selectedMode: "",
13-
modes: [],
14-
isModeDisabled: true,
15-
showContent: false,
16-
showParent: false,
17-
showAsset: false,
18-
showTransActionsAndInventory: false,
196
};
207
},
218
mounted() {
22-
this.fetchModes();
239
},
2410
methods: {
25-
checkOperator() {
26-
let isAuthenticated = this.operatorName.trim().toUpperCase() === "SC";
27-
if(isAuthenticated){
28-
this.isModeDisabled = !isAuthenticated;
29-
this.$nextTick(() => {
30-
this.$refs.modeInput.focus();
31-
})
32-
} else{
33-
alert("Error: Invalid operator name: " + this.operatorName)
34-
}
35-
},
36-
async fetchModes() {
37-
try {
38-
const response = await fetch("https://mocki.io/v1/d1c96117-ee6f-4d3d-b9db-082487a94fbc");
39-
const data = await response.json();
40-
this.modes = data.modes; // Extract array from response
11+
hello(){
4112
42-
// Ensure the first option is always "Select a mode"
43-
this.selectedMode = "Select a mode";
44-
} catch (error) {
45-
console.error("Error fetching modes:", error);
46-
}
47-
},
48-
modeChanged() {
49-
//alert(this.selectedMode)
50-
this.showParent = true;
51-
this.$nextTick(() => {
52-
this.$refs.parentInput.focus();
53-
})
54-
},
55-
scanParent() {
56-
this.showAsset = true;
57-
this.isModeDisabled = true;
58-
this.isParentIdValid = true;
59-
this.isOperatorDisabled = true;
60-
this.$nextTick(() => {
61-
this.$refs.assetInput.focus();
62-
})
63-
},
64-
scanAsset() {
65-
this.showTransActionsAndInventory = true;
66-
this.isParentDisabled = true;
67-
},
13+
}
6814
},
6915
};
7016
</script>
7117

7218
<template>
73-
<div class="container mt-3">
74-
<div class="mb-3">
75-
<label class="fw-bold">Operator Name:</label>
76-
<input type="text" class="form-control d-inline w-auto" :disabled="isOperatorDisabled" v-model="operatorName" @keyup.enter="checkOperator" ref="operatorInput">
77-
<label class="fw-bold ms-3">Current State:</label>
78-
<input type="text" class="form-control d-inline w-auto" value="Asset Scan" disabled>
79-
<button class="btn btn-secondary ms-3" style="margin-top: -5px;" disabled>Completed</button>
80-
<label class="fw-bold ms-3">Mode:</label>
81-
<select class="form-select d-inline w-auto" :disabled="isModeDisabled" ref="modeInput" v-model="selectedMode" @change="modeChanged">
82-
<option selected>Select a mode</option>
83-
<option selected>Work-in-Progress Palleting</option>
84-
<option selected>Shipping Box Palleting</option>
85-
<option v-for="mode in modes" :key="mode">{{ mode }}</option>
86-
</select>
87-
</div>
8819

89-
<div class="mb-3" v-if="showParent">
90-
<div class="d-flex align-items-center">
91-
<div class="col-auto">
92-
<label class="fw-bold" for="assetId">Parent ID:</label>
93-
</div>
94-
<div class="col">
95-
<div class="d-flex align-items-center">
96-
<input type="text" class="form-control d-inline w-auto" :disabled="isParentDisabled" v-model="parentId" @keyup.enter="scanParent" ref="parentInput">
97-
<span class="badge bg-success" v-if="isParentIdValid">OK</span>
98-
<div id="message" class="alert alert-danger ms-2 mb-0 custom-alert" style="display: none; max-width: 300px;">
99-
<!-- Error message will appear here -->
100-
</div>
101-
<div id="message-success" class="alert alert-success ms-2 mb-0 custom-alert" style="display: none; max-width: 300px;">
102-
<!-- Success message will appear here -->
103-
</div>
20+
<div class="container">
21+
<h4 class="section-title">Select a mode</h4>
22+
<p style="color: #075976;">Begin palleting or by selecting a mode below.</p>
23+
24+
<div class="row" style="padding-top: 15px;">
25+
<div class="col-md-4">
26+
<div class="card" @click="hello">
27+
<div class="d-flex align-items-start">
28+
<img src="../assets/palleting-and-shipping.png" alt="Work in Progress" width="50" class="me-3">
29+
<span style="font-size: 28px">Work in progress palleting</span>
10430
</div>
31+
<button class="arrow">
32+
<img src="../assets/flow-arrow.png" alt="Arrow" width="50" height="50">
33+
</button>
10534
</div>
10635
</div>
107-
</div>
10836

109-
<div class="mb-3" v-if="showAsset">
110-
<div class="d-flex align-items-center">
111-
<div class="col-auto">
112-
<label class="fw-bold" for="assetId">Asset ID:</label>
113-
</div>
114-
<div class="col">
115-
<div class="d-flex align-items-center">
116-
<input type="text" class="form-control d-inline w-auto" v-model="assetId" @keyup.enter="scanAsset" ref="assetInput">
117-
<div id="message" class="alert alert-danger ms-2 mb-0 custom-alert" style="display: none; max-width: 300px;">
118-
<!-- Error message will appear here -->
119-
</div>
120-
<div id="message-success" class="alert alert-success ms-2 mb-0 custom-alert" style="display: none; max-width: 300px;">
121-
<!-- Success message will appear here -->
122-
</div>
37+
<div class="col-md-4">
38+
<div class="card">
39+
<div class="d-flex align-items-start">
40+
<img src="../assets/moving-location.png" alt="Work in Progress" width="50" class="me-3">
41+
<span style="font-size: 28px">Moving assets</span>
12342
</div>
43+
<button class="arrow">
44+
<img src="../assets/flow-arrow.png" alt="Arrow" width="50" height="50">
45+
</button>
12446
</div>
12547
</div>
12648
</div>
127-
128-
<!-- Transaction Section -->
129-
<h4 v-if="showTransActionsAndInventory">Transaction</h4>
130-
<div class="mb-2 text-end" v-if="showTransActionsAndInventory">Asset Scan Failure Count: <input type="text" value="0" class="form-control d-inline w-auto"></div>
131-
132-
<table class="table table-bordered" v-if="showTransActionsAndInventory">
133-
<thead>
134-
<tr>
135-
<th>Transaction ID</th>
136-
<th>Asset ID</th>
137-
<th>Equipment</th>
138-
<th>Notes</th>
139-
<th>Force</th>
140-
</tr>
141-
</thead>
142-
<tbody>
143-
<tr class="bg-warning-custom">
144-
<td>4</td>
145-
<td>SB001662</td>
146-
<td></td>
147-
<td>Cannot assign asset to parent: Asset Status was 'Registered', expected: Boxed for Shipping for mode 'Shipping Box Palleting'.</td>
148-
<td><button class="btn btn-primary">Force</button></td>
149-
</tr>
150-
<tr class="bg-success-custom">
151-
<td>3</td>
152-
<td>SB001662</td>
153-
<td></td>
154-
<td>SB001662 is already assigned to SP000123</td>
155-
<td></td>
156-
</tr>
157-
</tbody>
158-
</table>
159-
160-
<!-- Inventory List Section -->
161-
<h4 v-if="showTransActionsAndInventory">Inventory List</h4>
162-
<div class="mb-2" v-if="showTransActionsAndInventory">Inventory list count <input type="text" value="2" class="form-control d-inline w-auto"></div>
163-
164-
<table class="table table-bordered" v-if="showTransActionsAndInventory">
165-
<thead>
166-
<tr>
167-
<th>Asset ID</th>
168-
<th>Status</th>
169-
<th>Make</th>
170-
<th>Model</th>
171-
</tr>
172-
</thead>
173-
<tbody>
174-
<tr>
175-
<td>SB000555</td>
176-
<td>Boxed for Shipping</td>
177-
<td>null</td>
178-
<td>null</td>
179-
</tr>
180-
<tr>
181-
<td>SB001662</td>
182-
<td>Boxed for Shipping</td>
183-
<td>null</td>
184-
<td>null</td>
185-
</tr>
186-
</tbody>
187-
</table>
18849
</div>
50+
18951
</template>
19052

191-
<style>
192-
.bg-warning-custom { background-color: yellow; }
193-
.bg-success-custom { background-color: lightgreen; }
194-
.text-end { text-align: end; }
195-
.custom-alert {
196-
max-width: 300px;
197-
height: 38px; /* Adjust the height to match the input field's height */
53+
<style scoped>
54+
.container {
55+
margin-top: 40px;
56+
}
57+
.section-title {
58+
color: #0b4c62;
59+
margin-bottom: 10px;
60+
}
61+
.card {
62+
padding: 20px;
63+
border-radius: 10px;
64+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
19865
display: flex;
199-
align-items: center; /* Vertically center the text */
200-
padding: 7px 10px;
66+
flex-direction: column;
67+
justify-content: space-between;
68+
min-height: 180px;
69+
cursor: pointer;
70+
transition: transform 0.3s ease-in-out;
71+
}
72+
.card:hover {
73+
transform: scale(1.05);
20174
}
202-
.form-control {
203-
height: 38px; /* Ensure the input field has the same height */
75+
.arrow {
76+
text-decoration: none;
77+
border-style: none;
78+
background-color: white;
79+
align-self: flex-end;
20480
}
20581
</style>

0 commit comments

Comments
 (0)