Skip to content

U
uBus
Commit ae5dba5a authored by Ian De La Cruz's avatar Ian De La Cruz
Browse files
Options

Reworked web-app 

-Uses Javascript Promises
-Follows new database design
parent c4b5ff9f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9789 additions and 304 deletions
web-app/createTrip.html 0 → 100644
View file @ ae5dba5a
<!-- List all Schedule Times
List all Origin Terminals
List all Destination Terminals
List all Bus Plate of Current Bus Company
List all Bus Types of Current Bus Company -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header class="header">
<a href="index.html" class="header__logo"><img src="img/logo.png" width="40px"></a>
<nav class="header__nav" id="navigation">
<a href=""></a>
<a href=""></a>
</nav>
</header>
<main class="container">
<div class="createTrip card">
<form class="createTrip__form">
<h1 class="createTrip__header">Create Trip</h1>
<label class="createTrip__selectLabel">
<span>Origin: </span>
<select class="createTrip__select" id="selectOrigin">
<option>Hello</option>
</select>
</label>
<label class="createTrip__selectLabel">
<span>Destination: </span>
<select class="createTrip__select" id="selectDestination">
<option>Hello</option>
</select>
</label>
<hr>
<label class="createTrip__selectLabel">
<span>Schedule Code: </span>
<select class="createTrip__select" id="selectSchedule">
<option>Hello</option>
</select>
</label>
<label class="createTrip__information">
<span>Time: </span>
<input type="text" id="scheduleTime" disabled="true" size="10">
<span>Day: </span>
<input type="text" id="scheduleDay" disabled="true" size="10">
</label>
<hr>
<label class="createTrip__selectLabel">
<span>Plate Number: </span>
<select class="createTrip__select" id="selectPlate">
<option>Hello</option>
</select>
</label>
<label class="createTrip__information">
<span>Bus Type: </span>
<input type="text" id="busType" disabled="true" size="10">
</label>
<!-- <label for="cost" class="createTrip__cost">
<span>Costs Per Seat</span>
<input type="text" id="cost">
</label> -->
<label class="createTrip__submit" >
<button id="createTrip__btn">Create Trip</button>
</label>
</form>
</div>
</main>
</body>
</html>
web-app/css/style.css
View file @ ae5dba5a
html, body {
margin: 0;
padding: 0;
/*
* Resets
* Typography
* General Style Classes
* → Grid System
* Components
* → Navigation
* → Registration/Login
* → Schedule
* → Adding Credits
*
*
*/
/* Resets */
* {
box-sizing: border-box;
}
body {
font-family: "Courier New", Courier, monospace;
}
nav {
position: relative;
height: 60px;
background-color: #124E78;
html {
font-size: 62.5%;
}
nav a {
display: inline-block;
height: 100%;
padding: 10px;
position: relative;
float:right;
body {
font-size: 1.6em;
margin: 0;
}
nav a:first-child {
float: left;
/* Typography */
body {
font-family: Helvetica, Arial, sans-serif;
}
nav > h1 {
display: inline-block;
margin: 0;
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
.button {
display: inline-block;
width: 45% !important;
text-align:center;
padding: 0 !important;
/* General Style Classes */
.card {
box-shadow:0 1px 2px #aaa;
/*height: 300px;*/
padding: 2rem;
border-radius:3px;
}
.button:first-child {
margin-right: 15px;
/* Components */
.header {
display: block;
width: 100%;
height: 80px;
background-color: #124E78;
}
.button a {
display: block;
width: 100%;
text-decoration: none;
color: black;
}
.button img {
display:block;
width:80%;
margin:0 5% 0 15%;
}
.wrapper {
width: 90%;
.container {
display: block;
width: 80%;
padding-top: 60px;
margin: 0 auto;
padding-top: 20px;
}
.title {
text-align: center;
.login {
display: block;
width: 80%;
margin: 0 auto;
/*-moz-column-count: 2;*/
}
.title h1{
display: inline-block;
.login__form {
display: block;
width: 80%;
margin: 0 auto;
}
.card {
box-shadow:0 1px 2px #aaa;
/*height: 300px;*/
padding: 2rem;
border-radius:3px;
margin: 0 auto;
width: 60%;
}
.login__header {
text-align: center;
}
.card img {
display: inline-block;
position: relative;
top: 0;
left: 0;
.login__uname, .login__pass {
display: block;
width: 50%;
height: 80px;
margin: 0 auto;
}
.row {
position: relative;
.login__uname::before, .login__pass::before {
display: inline-block;
margin-right: 10px;
}
.card .img-placeholder {
position: absolute;
top: 0;
.login__uname input, .login__pass input {
border: 0;
border-bottom: solid 1px;
width: 80%;
margin: 0 auto;
padding: 10px;
}
.card form {
display: inline-block;
margin-left: 80px;
width: calc(100% - 80px);
}
.login__uname input:focus, .login__pass input:focus {
border-bottom-color: #124E78;
border-bottom-width: 2.5px;
}
.card_schedule fieldset {
display: inline-block;
width: 30%;
border:none;
margin-bottom: 20px;
.login__submit {
position: relative;
display: block;
width: 100%;
height: 50px;
}
.card_schedule fieldset input[type="text"], .card_schedule fieldset input[type="datetime-local"] {
font-size: 1em;
border-top:0;
border-left: 0;
border-right: 0;
#login__btn {
position: absolute;
right: 0;
bottom:0;
}
.card_schedule fieldset:nth-child(5) {
width: 80%;
.actionbox__list {
list-style-type: none;
}
.card_schedule fieldset:nth-child(n+6):nth-child(-n+8) {
.tripList {
list-style-type: none;
}
.tripList__item {
display: block;
width: 40%;
width: calc(50% - 10px);
float: left;
}
.card_schedule fieldset:nth-child(n+5):nth-child(-n+8) input[type="text"] {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 10px;
border-top:0;
border-left: 0;
border-right: 0;
.tripList__itemInfo {
display: block;
width: 50%;
float: left;
}
.card_adminAccount fieldset {
display: inline-block;
width: 40%;
border: none;
margin-bottom: 20px;
.createTrip{
display: block;
height: 450px;
padding: 2rem 6rem;
}
.createTrip__selectLabel {
display: inline-block;
width: 45%;
margin-right: 20px;
}
.card_adminAccount input[type="text"], .card_adminAccount input[type="password"] {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 15px;
border-top:0;
border-left: 0;
border-right: 0;
}
.createTrip__selectLabel li:nth-child(4) {
display: block;
}
input[type="text"] {
.createTrip__information {
display: block;
margin-top: 10px;
margin-bottom: 20px;
}
}
.createTrip__information input[type="text"] {
background-color: white;
border: none;
border-bottom: solid 1px;
}
.row {
display: block;
}
\ No newline at end of file
.createTrip hr {
margin: 30px 0;
}
\ No newline at end of file
web-app/index.html
View file @ ae5dba5a
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header>
<nav>
<a href="index.html"><img src="img/logo.png" width="40px"></a>
<h1 style="display:inline-block; margin:0; padding-top:10px; padding-left:15px;">Bus Ticket Reservation System</h1>
<a href="adminAccount.html" style="color:white;padding:15px 20px;"><i class="fa fa-plus fa-2x"></i></a>
<a href="login.html"><i class="fa fa-2x fa-user"style="color:white;"></i></a>
</nav>
</header>
<div id="parent"></div>
<div class="wrapper">
<div class="card button">
<a href="schedule.html" id="admin">
<img src="img/scheduling.png" width="50%">
<br><h3>SCHEDULING</h3>
</a>
</div>
<div class="card button">
<a href="loading.html" id="loading">
<img src="img/loading.png" width="50%">
<br><h3>LOADING</h3>
</a>
</div>
<header class="header">
<a href="index.html" class="header__logo"><img src="img/logo.png" width="40px"></a>
<nav class="header__nav" id="navigation">
<a href=""></a>
<a href=""></a>
</nav>
</header>
<main class="container">
<div class="actionbox card">
<!-- This is not available when user is a Clerk user -->
<h1 class="actionbox__header">Trips Management</h1>
<ul class="actionbox__list">
<li class="actionbox__listitem"><a href="createTrip.html">Create Trips</a></li>
<li class="actionbox__listitem"><a href="viewTrip.html">View All Trips</a></li>
</ul>
</div>
<div class="actionbox card">
<h1 class="actionbox__header">Customer Management</h1>
<ul class="actionbox__list">
<li class="actionbox__listitem"><a href="register.html">Register New User</a></li>
<li class="actionbox__listitem"><a href="reload.html">Reload User Credits</a></li>
</ul>
</div>
<button onclick="app.searchRole()">Print in Console</button>
</main>
</body>
</html>
web-app/js/app.js
View file @ ae5dba5a
This diff is collapsed.
web-app/js/jquery-2.1.4.js 0 → 100644
View file @ ae5dba5a
This diff is collapsed.
web-app/login.html
View file @ ae5dba5a
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header>
<nav>
<a href="index.html"><img src="img/logo.png" width="40px"></a>
<h1 style="display:inline-block; margin:0; padding-top:10px; padding-left:15px;">Bus Ticket Reservation System</h1>
<a href="adminAccount.html" style="color:white;padding:15px 20px;"><i class="fa fa-plus fa-2x"></i></a>
<a href="login.html"><i class="fa fa-2x fa-user" style="color:white;"></i></a>
</nav>
</header>
<div id="parent"></div>
<div class="wrapper">
<form method="post" id="adminLogin">
<input type="text" placeholder="Username" id="login_uname">
<input type="password" placeholder="Password" id="login_pass">
<button type="button" onclick="login()">Log-In</button>
<header class="header">
<a href="header__logo"></a>
<nav class="header__nav" id="navigation">
<a href=""></a>
<a href=""></a>
</nav>
</header>
<main class="container">
<div class="login card">
<form class="login__form">
<h1 class="login__header">LOG-IN</h1>
<label class="fa fa-user fa-2x login__uname" >
<input type="text" id="login_uname" placeholder="Username" autofocus></label>
<label class="fa fa-unlock fa-2x login__pass">
<input type="password" id="login_pass" placeholder="Password"></label>
<label class="login__submit" >
<button id="login__btn" onclick="app.login()">Login</button>
</label>
</form>
</div>
</main>
</body>
</html>
web-app/viewTrip.html 0 → 100644
View file @ ae5dba5a
<!DOCTYPE html>
<html lang="en">
<head>
<title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header class="header">
<a href="index.html" class="header__logo"><img src="img/logo.png" width="40px"></a>
<nav class="header__nav" id="navigation">
<a href=""></a>
<a href=""></a>
</nav>
</header>
<main class="container">
<ul class="tripList" id="tripList">
</ul>
</main>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment