Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
205 lines (196 sloc) 10.5 KB
<!DOCTYPE html>
<!--
* The MIT License
*
* Copyright 2015 Esign Consulting Ltda.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
-->
<html ng-app="logistics">
<head>
<title>Logistics</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-bootstrap.min.js"></script>
<script src="js/logistics.js"></script>
</head>
<body>
<div ng-controller="RoutesMapController">
<div class="jumbotron">
<div class="container">
<h1>Logistics</h1>
<p>Create maps with several routes and find out the best one to deliver your products.</p>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>Maps</h1>
</div>
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<accordion close-others="true">
<accordion-group ng-repeat="map in maps | orderBy:'name'" heading="{{map.name}}">
<table class="table table-striped">
<thead>
<tr>
<th>Origin</th>
<th>Destination</th>
<th>Distance (Km)</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="route in map.routes | orderBy:'name'">
<td>{{route.origin.name}}</td>
<td>{{route.destination.name}}</td>
<td>{{route.distance}}</td>
<td>
<button class="btn btn-default btn-sm" ng-click="removeRoute(map, route)">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
<button name="addRouteButton" class='btn btn-default' ng-click="openAddRouteModal(map)">Add Route</button>
<button name="bestRouteButton" class='btn btn-default' ng-click="openBestRouteModal(map)">Best Route</button>
<button name="removeMapButton" class='btn btn-default' ng-click="removeMap(map)">Remove Map</button>
</accordion-group>
</accordion>
<button name="addMapButton" class='btn btn-default' ng-click="openAddMapModal()">Add Map</button>
</div>
<script type="text/ng-template" id="addMapModal.html">
<div class="modal-header">
<h3 class="modal-title">New Map</h3>
</div>
<div class="modal-body">
<label for="mapName">Name:</label>
<input type="text" id="mapName" ng-model="map.name" placeholder="Enter a name here" class="form-control" autofocus>
</div>
<div class="modal-footer">
<button name="addMapOkButton" class="btn btn-primary" ng-click="ok()">OK</button>
<button name="addMapCancelButton" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="removeMapModal.html">
<div class="modal-header">
<h3 class="modal-title">{{map.name}}: Remove Map</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
Are you sure of removing the map '{{map.name}}'?
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<alert type="danger">This cannot be undone.</alert>
</div>
</div>
</div>
<div class="modal-footer">
<button name="removeMapYesButton" class="btn btn-primary" ng-click="yes()">Yes</button>
<button name="removeMapNoButton" class="btn btn-warning" ng-click="no()">No</button>
</div>
</script>
<script type="text/ng-template" id="addRouteModal.html">
<div class="modal-header">
<h3 class="modal-title">{{map.name}}: New Route</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<label for="originName">Origin:</label>
<input type="text" id="originName" ng-model="route.origin.name" class="form-control" autofocus>
</div>
<div class="col-md-4">
<label for="destinationName">Destination:</label>
<input type="text" id="destinationName" ng-model="route.destination.name" class="form-control">
</div>
<div class="col-md-4">
<label for="distance">Distance (Km):</label>
<input type="text" id="distance" ng-model="route.distance" class="form-control">
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<alert>The opposite route ({{route.destination.name}} -> {{route.origin.name}}) will be also created.</alert>
</div>
</div>
</div>
<div class="modal-footer">
<button name="addRouteOkButton" class="btn btn-primary" ng-click="ok()">OK</button>
<button name="addRouteCancelButton" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="removeRouteModal.html">
<div class="modal-header">
<h3 class="modal-title">{{route.name}}: Remove Route</h3>
</div>
<div class="modal-body">
<div class="row text-left">
<div class="col-md-12">
The opposite route ({{route.destination.name}} -> {{route.origin.name}}) will be also removed.
Are you sure of removing both of them?
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<alert type="danger">This cannot be undone.</alert>
</div>
</div>
</div>
<div class="modal-footer">
<button name="removeRouteYesButton" class="btn btn-primary" ng-click="yes()">Yes</button>
<button name="removeRouteNoButton" class="btn btn-warning" ng-click="no()">No</button>
</div>
</script>
<script type="text/ng-template" id="bestRouteModal.html">
<div class="modal-header">
<h3 class="modal-title">{{map.name}}: Best Route</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<label for="originName">Origin:</label>
<input type="text" id="originName" ng-model="bestRoute.origin.name" class="form-control" autofocus>
</div>
<div class="col-md-3">
<label for="destinationName">Destination:</label>
<input type="text" id="destinationName" ng-model="bestRoute.destination.name" class="form-control">
</div>
<div class="col-md-3">
<label for="autonomy">Autonomy (Km):</label>
<input type="text" id="autonomy" ng-model="bestRoute.autonomy" class="form-control">
</div>
<div class="col-md-3">
<label for="gasPrice">Gas Price:</label>
<input type="text" id="gasPrice" ng-model="bestRoute.gasPrice" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button name="bestRouteOkButton" class="btn btn-primary" ng-click="ok()">OK</button>
<button name="bestRouteCancelButton" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>