Skip to content

Commit

Permalink
User inferface based on AngularJs 3
Browse files Browse the repository at this point in the history
  • Loading branch information
zouelfikar committed Jan 27, 2021
1 parent 9215e24 commit 4dcd9a7
Show file tree
Hide file tree
Showing 3 changed files with 585 additions and 0 deletions.
341 changes: 341 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,341 @@
<html>

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/xml2json.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="js/lib/style.css">

<title>RATT Public Transport</title>
</head>

<body ng-app="xml" ng-controller="xmlCtrl">
<img src="js/picture/cover.jpg" style="width: 100%; height: 60%">&nbsp;
<div style="padding-left:10px ;">
<!-- Get & Put buttons -->

<div style="display: flex; text-align: center;">
<div>
<button class="btn btn-primary mainButton" ng-click="getStations()"> Stations </button>
</div>
&nbsp;

<div>
<button class="btn btn-primary mainButton" ng-click="getVehicles()"> Vehicles </button>
</div>
&nbsp;


<div>
<button class="btn btn-primary mainButton" ng-click="getTimeTables()"> Time Tables </button>
</div>
&nbsp;

<div>
<button class="btn btn-primary mainButton" ng-click="showSearchInput('station')"> Get Station </button>
</div>
&nbsp;

<div>
<button class="btn btn-primary mainButton" ng-click="showSearchInput('vehicle')"> Get Vehicle </button>
</div>
&nbsp;

<div>
<button class="btn btn-primary mainButton" ng-click="showSearchInput('table')"> Get time Table </button>
</div>
&nbsp;

<div>
<button class="btn btn-info mainButton" ng-click="showDeleteInput('station')"> Update a Station </button>
</div>
&nbsp;
<div>
<button class="btn btn-info mainButton" ng-click=""> Update a Vehicle </button>
</div>
&nbsp;
<div>
<button class="btn btn-info mainButton" ng-click=""> Update a Time Table </button>
</div>
&nbsp;

</div> &nbsp;





<!-- Post & Delete buttons -->
<div style="display: flex; text-align: center;">
<div>
<button class="btn btn-success mainButton" ng-click=""> Add a Station </button>
</div>
&nbsp;
<div>
<button class="btn btn-success mainButton" ng-click=""> Add a Vehicle </button>
</div>
&nbsp;
<div>
<button class="btn btn-success mainButton" ng-click=""> Add a Time Table </button>
</div>
&nbsp;

<div>
<button class="btn btn-danger mainButton" ng-click="showDeleteInput('station')"> Delete a Station </button>
</div>
&nbsp;
<div>
<button class="btn btn-danger mainButton" ng-click="showDeleteInput('vehicle')"> Delete a Vehicle </button>
</div>
&nbsp;
<div>
<button class="btn btn-danger mainButton" ng-click="showDeleteInput('table')"> Delete a Time Table </button>
</div>
&nbsp;


</div> <br />




<!-- clear button -->
<div>
<br />
<button class="btn btn-primary mainButton" ng-click="clear()"> clear </button>
</div><br /><br /><hr />


<!-- Search input fields -->
<div ng-show="enableStationInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="inputStaion"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="getStationById()"> Search </button>
</div>

<div ng-show="enableVehicleInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="inputVehicle"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="getVehicleByID()"> Search </button>
</div>

<div ng-show="enableTableInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="inputTable"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="getTableByID()"> Search </button>
</div>

<!-- Delete input fields -->
<div ng-show="enableStationDeleteInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="deleteStationID"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="deleteStaion()"> Delete </button>
</div>

<div ng-show="enableVehicleDeleteInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="deleteVehicleID"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="deleteVehicle()"> Delete </button>
</div>

<div ng-show="enableTableDeleteInput">
<input class=" input-field center" style="padding: 10px; width: 70%;" type="text" ng-model="deleteTableID"
placeholder="Enter an ID">
<button class="btn btn-primary" style="padding: 12px;" ng-click="deleteTable()"> Delete </button>
</div>

<!-- result -->
<div>
<div ng-if="stationsResult">
<div class="input-icons">
<i style="padding-left:6px; padding-top: 6px;" class="fa fa-search fa-2x">
</i>

<input class=" input-field center" style="padding: 10px; width: 100%;" type="text" ng-model="search"
placeholder="Search for..">
</div>

&nbsp;
<div class="center" ng-repeat="x in stationsResult | filter:search">
<button class="btn-info"> {{x.transport_station.friendly_station_name}}</button>
</br></br>
</div>
</div>

<div ng-if="vehiclesResult">
<div class="input-icons">
<i style="padding-left:6px; padding-top: 6px;" class="fa fa-search fa-2x">
</i>

<input class=" input-field center" style="padding: 10px; width: 100%;" type="text" ng-model="search"
placeholder="Search for..">
</div>
&nbsp;
<table class="customer table table-bordered">
<thead>
<tr>
<td>vehicle_name</td>
<td>vehicle_type</td>
<td>id</td>
</tr>
</thead>
<tbody ng-repeat="x in vehiclesResult | filter: search">
<tr>
<td>{{x.vehicle.vehicle_name}}</td>
<td>{{x.vehicle.vehicle_type}}</td>
<td>{{x.vehicle._id}}</td>
</tr>
</tbody>
</table>
</div>

<div ng-if="tablesResult">
<div class="input-icons">
<i style="padding-left:6px; padding-top: 6px;" class="fa fa-search fa-2x">
</i>

<input class=" input-field center" style="padding: 10px; width: 100%;" type="text" ng-model="search"
placeholder="Search for..">
</div>

&nbsp;

<table class="customer table table-bordered">
<thead>
<tr>
<td>vehicle ID</td>
<td>arrival</td>
<td>leaving</td>
</tr>
</thead>
<tbody ng-repeat="x in tablesResult | filter: search">

<tr>
<td>{{x.timetable._vehicle_id}}</td>
<td>

<table class="customer table table-bordered">
<thead>
<tr>
<td>station ID</td>
<td>arrival time</td>
</tr>
</thead>
<tbody ng-repeat="y in x.timetable.direction[0].arrival">
<tr>
<td>{{y.station._id}}</td>
<td>{{y.time}}</td>
</tr>
</tbody>
</table>

</td>
<td>
<table class="customer table table-bordered">
<thead>
<tr>
<td>station ID</td>
<td>arrival time</td>
</tr>
</thead>
<tbody ng-repeat="y in x.timetable.direction[1].arrival">
<tr>
<td>{{y.station._id}}</td>
<td>{{y.time}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

</table>
</div>

<div ng-if="stationByIdResult">
<br />
<table class="customer table table-bordered">
<tbody ng-repeat="(key, value) in stationByIdResult">
<tr>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>

<div ng-if="vehicleByIdResult">
<br />
<table class="customer table table-bordered">
<tbody ng-repeat="(key, value) in vehicleByIdResult">
<tr>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>

<div ng-if="tableByIdResult">
<br />
<table class="customer table table-bordered">
<tbody>
<thead>
<tr>
<td>vehicle ID</td>
<td>arrival</td>
<td>leaving</td>
</tr>
</thead>

<tr>
<td>{{tableByIdResult._vehicle_id}}</td>
<td>
<table class="customer table table-bordered">
<thead>
<tr>
<td>station ID</td>
<td>arrival time</td>
</tr>
</thead>
<tbody ng-repeat="y in tableByIdResult.direction[0].arrival">
<tr>
<td>{{y.station._id}}</td>
<td>{{y.time}}</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="customer table table-bordered">
<thead>
<tr>
<td>station ID</td>
<td>arrival time</td>
</tr>
</thead>
<tbody ng-repeat="y in tableByIdResult.direction[1].arrival">
<tr>
<td>{{y.station._id}}</td>
<td>{{y.time}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

</div>
</div>


</body>

</html>
Loading

0 comments on commit 4dcd9a7

Please sign in to comment.