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; * Resets
padding: 0; * Typography
* General Style Classes
* → Grid System
* Components
* → Navigation
* → Registration/Login
* → Schedule
* → Adding Credits
*
*
*/
/* Resets */
* {
box-sizing: border-box;
} }
body { html {
font-family: "Courier New", Courier, monospace; font-size: 62.5%;
}
nav {
position: relative;
height: 60px;
background-color: #124E78;
} }
nav a { body {
display: inline-block; font-size: 1.6em;
height: 100%; margin: 0;
padding: 10px;
position: relative;
float:right;
} }
nav a:first-child { /* Typography */
float: left; body {
font-family: Helvetica, Arial, sans-serif;
} }
nav > h1 { /* General Style Classes */
display: inline-block; .card {
margin: 0; box-shadow:0 1px 2px #aaa;
padding-top: 15px; /*height: 300px;*/
padding-left: 15px; padding: 2rem;
color: #fff; border-radius:3px;
}
.button {
display: inline-block;
width: 45% !important;
text-align:center;
padding: 0 !important;
} }
.button:first-child { /* Components */
margin-right: 15px; .header {
display: block;
width: 100%;
height: 80px;
background-color: #124E78;
} }
.button a {
display: block;
width: 100%;
text-decoration: none;
color: black;
}
.button img { .container {
display:block; display: block;
width:80%; width: 80%;
margin:0 5% 0 15%; padding-top: 60px;
}
.wrapper {
width: 90%;
margin: 0 auto; margin: 0 auto;
padding-top: 20px;
} }
.title { .login {
text-align: center; display: block;
width: 80%;
margin: 0 auto;
/*-moz-column-count: 2;*/
} }
.title h1{ .login__form {
display: inline-block; display: block;
width: 80%;
margin: 0 auto;
} }
.card { .login__header {
box-shadow:0 1px 2px #aaa; text-align: center;
/*height: 300px;*/ }
padding: 2rem;
border-radius:3px;
margin: 0 auto;
width: 60%;
}
.card img { .login__uname, .login__pass {
display: inline-block; display: block;
position: relative; width: 50%;
top: 0; height: 80px;
left: 0; margin: 0 auto;
} }
.row { .login__uname::before, .login__pass::before {
position: relative; display: inline-block;
margin-right: 10px;
} }
.card .img-placeholder { .login__uname input, .login__pass input {
position: absolute; border: 0;
top: 0; border-bottom: solid 1px;
width: 80%;
margin: 0 auto;
padding: 10px;
} }
.card form { .login__uname input:focus, .login__pass input:focus {
display: inline-block; border-bottom-color: #124E78;
margin-left: 80px; border-bottom-width: 2.5px;
width: calc(100% - 80px); }
}
.card_schedule fieldset { .login__submit {
display: inline-block; position: relative;
width: 30%; display: block;
border:none; width: 100%;
margin-bottom: 20px; height: 50px;
} }
.card_schedule fieldset input[type="text"], .card_schedule fieldset input[type="datetime-local"] { #login__btn {
font-size: 1em; position: absolute;
border-top:0; right: 0;
border-left: 0; bottom:0;
border-right: 0;
} }
.card_schedule fieldset:nth-child(5) { .actionbox__list {
width: 80%; list-style-type: none;
} }
.card_schedule fieldset:nth-child(n+6):nth-child(-n+8) { .tripList {
list-style-type: none;
}
.tripList__item {
display: block; display: block;
width: 40%; width: calc(50% - 10px);
float: left;
} }
.card_schedule fieldset:nth-child(n+5):nth-child(-n+8) input[type="text"] { .tripList__itemInfo {
position: relative; display: block;
top: 50%; width: 50%;
transform: translateY(-50%); float: left;
margin-left: 10px;
border-top:0;
border-left: 0;
border-right: 0;
} }
.card_adminAccount fieldset { .createTrip{
display: inline-block; display: block;
width: 40%; height: 450px;
border: none; padding: 2rem 6rem;
margin-bottom: 20px;
} }
.createTrip__selectLabel {
display: inline-block;
width: 45%;
margin-right: 20px;
}
.card_adminAccount input[type="text"], .card_adminAccount input[type="password"] { .createTrip__selectLabel li:nth-child(4) {
position: relative; display: block;
top: 50%; }
transform: translateY(-50%);
margin-left: 15px;
border-top:0;
border-left: 0;
border-right: 0;
}
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 { .createTrip hr {
display: block; margin: 30px 0;
} }
\ No newline at end of file \ No newline at end of file
web-app/index.html
View file @ ae5dba5a
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>uBus | Admin System</title> <title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools."> <meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"> <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/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.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 src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
</head> </head>
<body> <body>
<header> <header class="header">
<nav> <a href="index.html" class="header__logo"><img src="img/logo.png" width="40px"></a>
<a href="index.html"><img src="img/logo.png" width="40px"></a> <nav class="header__nav" id="navigation">
<h1 style="display:inline-block; margin:0; padding-top:10px; padding-left:15px;">Bus Ticket Reservation System</h1> <a href=""></a>
<a href="adminAccount.html" style="color:white;padding:15px 20px;"><i class="fa fa-plus fa-2x"></i></a> <a href=""></a>
<a href="login.html"><i class="fa fa-2x fa-user"style="color:white;"></i></a> </nav>
</nav> </header>
</header> <main class="container">
<div id="parent"></div> <div class="actionbox card">
<div class="wrapper"> <!-- This is not available when user is a Clerk user -->
<div class="card button"> <h1 class="actionbox__header">Trips Management</h1>
<a href="schedule.html" id="admin"> <ul class="actionbox__list">
<img src="img/scheduling.png" width="50%"> <li class="actionbox__listitem"><a href="createTrip.html">Create Trips</a></li>
<br><h3>SCHEDULING</h3> <li class="actionbox__listitem"><a href="viewTrip.html">View All Trips</a></li>
</a> </ul>
</div>
<div class="card button">
<a href="loading.html" id="loading">
<img src="img/loading.png" width="50%">
<br><h3>LOADING</h3>
</a>
</div>
</div> </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> </body>
</html> </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> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>uBus | Admin System</title> <title>uBus | Admin System</title>
<meta charset="utf-8">
<meta name="description" content="uBus Ticket Reservation System administrator tools."> <meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"> <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/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.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 src="js/parse-1.6.7.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
</head> </head>
<body> <body>
<header> <header class="header">
<nav> <a href="header__logo"></a>
<a href="index.html"><img src="img/logo.png" width="40px"></a> <nav class="header__nav" id="navigation">
<h1 style="display:inline-block; margin:0; padding-top:10px; padding-left:15px;">Bus Ticket Reservation System</h1> <a href=""></a>
<a href="adminAccount.html" style="color:white;padding:15px 20px;"><i class="fa fa-plus fa-2x"></i></a> <a href=""></a>
<a href="login.html"><i class="fa fa-2x fa-user" style="color:white;"></i></a> </nav>
</nav> </header>
</header> <main class="container">
<div id="parent"></div> <div class="login card">
<div class="wrapper"> <form class="login__form">
<form method="post" id="adminLogin"> <h1 class="login__header">LOG-IN</h1>
<input type="text" placeholder="Username" id="login_uname"> <label class="fa fa-user fa-2x login__uname" >
<input type="password" placeholder="Password" id="login_pass"> <input type="text" id="login_uname" placeholder="Username" autofocus></label>
<button type="button" onclick="login()">Log-In</button> <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> </form>
</div> </div>
</main>
</body> </body>
</html> </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