Skip to content

Commit 15551d1

Browse files
yohan-ocyohan-oc
committed
parent page ui added
1 parent 8835719 commit 15551d1

File tree

6 files changed

+172
-17
lines changed

6 files changed

+172
-17
lines changed

‎designs/parent/parent.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Work in Progress Pallet</title>
7+
<!-- Bootstrap CSS -->
8+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="container mt-5">
12+
<div class="row justify-content-center">
13+
<div class="col-md-6">
14+
<div class="card">
15+
<div class="card-header">
16+
<h3 class="card-title">Work in Progress Pallet</h3>
17+
</div>
18+
<div class="card-body">
19+
<form>
20+
<div class="form-group">
21+
<label for="parentId">Scan the barcode or enter the ID of the pallet that you'll be adding boxes to.</label>
22+
<input type="text" class="form-control" id="parentId" placeholder="Parent ID">
23+
</div>
24+
<div class="form-group">
25+
<button type="button" class="btn btn-secondary">Back</button>
26+
<button type="submit" class="btn btn-primary">Continue</button>
27+
</div>
28+
</form>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<!-- Bootstrap JS and dependencies -->
36+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
37+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
38+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
39+
</body>
40+
</html>

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

4.17 KB
Loading

‎vue-frontend/warehouse-frontend/src/router/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { createRouter, createWebHashHistory } from "vue-router";
22
import LoginPage from "../views/LoginPage.vue";
33
import HomePage from "../views/HomePage.vue";
44
import ModePage from "../views/ModePage.vue";
5+
import ParentPage from "../views/ParentPage.vue";
56

67
const routes = [
7-
{ path: "/", component: LoginPage }, // Default page is login
8-
{ path: "/mode", component: ModePage }, // After login, go Home
9-
{ path: "/home", component: HomePage } // After login, go Home
8+
{ path: "/", component: LoginPage },
9+
{ path: "/mode", component: ModePage },
10+
{ path: "/home", component: HomePage },
11+
{ path: "/parent", component: ParentPage }
1012
];
1113

1214
const router = createRouter({

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ export default {
55
username: ""
66
};
77
},
8+
mounted() {
9+
this.$nextTick(() => {
10+
this.$refs.username.focus();
11+
});
12+
},
813
methods: {
914
login() {
1015
// if (this.username) {
@@ -27,7 +32,7 @@ export default {
2732

2833
<div class="mb-3">
2934
<label for="fullname" class="form-label">Full name</label>
30-
<input type="text" class="form-control" id="fullname" placeholder="Joe Bloggs" v-model="username">
35+
<input type="text" class="form-control" id="fullname" placeholder="Joe Bloggs" v-model="username" ref="username">
3136
</div>
3237

3338
<button class="btn btn-primary w-100" @click="login">Continue</button>
@@ -49,8 +54,7 @@ export default {
4954
}
5055
.btn-primary {
5156
background-color: #04A27D;
52-
border-color: #04A27D;
53-
border: none;
57+
border: none #04A27D;
5458
}
5559
.btn-primary:hover {
5660
background-color: #04A27D;

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<script>
22
export default {
33
name: 'ModePage',
4-
mounted() {
5-
import('bootstrap');
4+
methods: {
5+
chooseMode() {
6+
// if (this.username) {
7+
// this.$router.push("/mode"); // Navigate to Home after login
8+
// } else {
9+
// alert("Please enter username");
10+
// }
11+
this.$router.push("/parent");
12+
}
613
}
714
};
815
</script>
@@ -27,14 +34,14 @@ export default {
2734
<div class="card">
2835
<img src="../assets/work-in-progress.png" alt="Work in Progress" width="50" class="d-block mx-auto">
2936
<br/><p>Work in progress palleting</p>
30-
<button class="btn btn-outline-success w-100">Start →</button>
37+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
3138
</div>
3239
</div>
3340
<div class="col-md-2">
3441
<div class="card">
3542
<img src="../assets/shipping-box.png" alt="Shipping Box" width="50" class="d-block mx-auto">
3643
<br/><p>Shipping box palleting</p>
37-
<button class="btn btn-outline-success w-100">Start →</button>
44+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
3845
</div>
3946
</div>
4047
</div>
@@ -48,15 +55,15 @@ export default {
4855
<div class="card">
4956
<img src="../assets/desktop.png" alt="Wiped Desktops" width="50" class="d-block mx-auto">
5057
<br/><p>Boxing (Wiped) Desktops for shipping</p>
51-
<button class="btn btn-outline-success w-100">Start →</button>
58+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
5259
</div>
5360
</div>
5461

5562
<div class="col-md-2">
5663
<div class="card">
5764
<img src="../assets/desktop-imaged.png" alt="Imaged Desktops" width="50" class="d-block mx-auto">
5865
<br/><p>Boxing (Imaged) Desktops for shipping</p>
59-
<button class="btn btn-outline-success w-100">Start →</button>
66+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
6067
</div>
6168
</div>
6269

@@ -66,15 +73,15 @@ export default {
6673
<br/>
6774
<p>Boxing (Wiped) Laptops for shipping</p>
6875
<br/>
69-
<button class="btn btn-outline-success w-100">Start →</button>
76+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
7077
</div>
7178
</div>
7279

7380
<div class="col-md-2">
7481
<div class="card">
7582
<img src="../assets/laptop-imaged.png" alt="Imaged Laptops" width="50" class="d-block mx-auto">
7683
<br/><p>Boxing (Imaged) Laptops for shipping</p><br/>
77-
<button class="btn btn-outline-success w-100">Start →</button>
84+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
7885
</div>
7986
</div>
8087
</div>
@@ -86,23 +93,23 @@ export default {
8693
<div class="card">
8794
<img src="../assets/monitor.png" alt="Monitors" width="50" class="d-block mx-auto">
8895
<br/><p>Boxing monitors for shipping</p><br/>
89-
<button class="btn btn-outline-success w-100">Start →</button>
96+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
9097
</div>
9198
</div>
9299

93100
<div class="col-md-2">
94101
<div class="card">
95102
<img src="../assets/phone.png" alt="Phones and Laptops" width="50" class="d-block mx-auto">
96103
<br/><p>Boxing (Wiped) phones and laptops for shipping</p>
97-
<button class="btn btn-outline-success w-100">Start →</button>
104+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
98105
</div>
99106
</div>
100107

101108
<div class="col-md-2">
102109
<div class="card">
103110
<img src="../assets/money.png" alt="For Sale" width="50" class="d-block mx-auto">
104111
<br/><p>Boxing Desktops and Laptops for sale</p><br/>
105-
<button class="btn btn-outline-success w-100">Start →</button>
112+
<button class="btn btn-outline-success w-100" @click="chooseMode">Start →</button>
106113
</div>
107114
</div>
108115
</div>

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

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script>
2+
export default {
3+
data() {
4+
return {
5+
username: ""
6+
};
7+
},
8+
mounted() {
9+
this.$nextTick(() => {
10+
this.$refs.parentId.focus();
11+
});
12+
},
13+
methods: {
14+
scanParentId() {
15+
// if (this.username) {
16+
// this.$router.push("/mode"); // Navigate to Home after login
17+
// } else {
18+
// alert("Please enter username");
19+
// }
20+
//this.$router.push("/parent");
21+
},
22+
}
23+
};
24+
</script>
25+
26+
<template>
27+
<nav class="navbar navbar-dark px-4">
28+
<a class="navbar-brand" href="#">
29+
<img src="../assets/logo_new.png" alt="Turing Trust Logo" height="30">
30+
</a>
31+
<a class="logout" href="#"><i class="bi bi-box-arrow-left"></i> Log out</a>
32+
</nav>
33+
34+
<div class="d-flex justify-content-center align-items-center vh-80 flex-column">
35+
<!-- Heading Outside the Card, Aligned to the Left -->
36+
<p class="title">Work in progress palleting</p>
37+
38+
<!-- Card Container -->
39+
<div class="card shadow">
40+
<img src="../assets/parent-palleting.png" alt="Parent Id" class="logo">
41+
<p class="text-l"><b>Scan parent</b></p>
42+
<p class="text-muted">
43+
Scan the barcode or enter the ID of the pallet that you’ll be
44+
adding boxes to.
45+
</p>
46+
47+
<div class="mb-3">
48+
<label for="parentId" class="form-label">Parent ID</label>
49+
<input type="text" class="form-control" id="parentId" v-model="parentId" ref="parentId">
50+
</div>
51+
52+
<div class="form-group">
53+
<button class="btn btn-primary" @click="scanParentId" style="width: 237px; margin-right: 8px">Cancel</button>
54+
<button class="btn btn-primary" @click="scanParentId" style="width: 237px">Continue</button>
55+
</div>
56+
</div>
57+
</div>
58+
</template>
59+
60+
<style scoped>
61+
.navbar {
62+
background-color: #0b4c62;
63+
}
64+
.navbar-brand {
65+
color: white;
66+
font-weight: bold;
67+
}
68+
.logout {
69+
color: white;
70+
text-decoration: none;
71+
}
72+
.vh-80 {
73+
height: 80vh;
74+
}
75+
.card {
76+
padding: 30px;
77+
border-radius: 10px;
78+
max-width: 546px;
79+
width: 100%;
80+
border-bottom-width: 3px;
81+
border-bottom-color: #04A27D;
82+
}
83+
.btn-primary {
84+
border-color: #04A27D;
85+
color: #04A27D;
86+
background-color: #fff;
87+
}
88+
.btn-primary:hover {
89+
background-color: #04A27D;
90+
border-color: #04A27D;
91+
}
92+
.logo {
93+
display: block;
94+
margin: 0 auto 15px;
95+
width: 150px;
96+
}
97+
.title{
98+
margin-left: -168px;
99+
color: #075976;
100+
font-size: 34px;
101+
}
102+
</style>

0 commit comments

Comments
 (0)