-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
140 lines (120 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<!-- https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js -->
<script src="../node_modules/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="../scripts/myScripts.js"></script>
<title>GeoToDo App</title>
</head>
<body ng-controller="TheController as theController">
<div class="container">
<h1>GeoToDo App</h1>
<h3>By Alaa, Daniel, Fabian and Vanesa</h3>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-outline-primary btn-block" ng-click="btnShowAllMarkers()">Show all markers</button>
<leaflet tiles="tiles" lf-center="center" markers="markers" height="480px" width="100%"></leaflet>
<button type="button" class="btn btn-outline-primary btn-block" ng-click="btnEnableAddClicked()">Click here to add a new TODO</button>
<div id="divNewTodo" ng-show="isAddMode || isUpdateMode">
<div class="mb-3">
<label for="todoMessage">Message
<!-- <span class="text-muted">(Optional)</span> -->
</label>
<input type="text" ng-model="currentMarker.title" class="form-control" id="todoMessage" placeholder="type your Todo message here">
</div>
<div class="mb-3">
<label for="todoDate">Date
<!-- <span class="text-muted">(Optional)</span> -->
</label>
<input type="date" ng-model="currentMarker.due_date" class="form-control" id="todoDate" placeholder="enter your Todo date here" />
<label for="todoAddress">Address
<!-- <span class="text-muted">(Optional)</span> -->
</label>
<p class="form-control" id="todoAddress">{{currentMarker.postal_address}}</p>
<!-- <input type="text" class="form-control" id="divTodoDate" placeholder="type your Todo Message here"> -->
</div>
<!-- <div class="col-md-6 norightpadding"> -->
<button type="button" class="form-control btn-block btn .btn-sm btn-outline-warning" ng-click = "btnUpdateTodo()" ng-show = "isUpdateMode">Update</button>
<button type="button" class="form-control btn-block btn .btn-sm btn-outline-success" ng-click = "btnAddTodo()" ng-show = "isAddMode">Add new</button>
<button type="button" class="form-control btn-block btn .btn-sm btn-outline-secondary" ng-click = "btnCancelEditing()">Cancel</button>
<!-- </div> -->
</div>
</div>
<div class="col-md-6" ng-show="markers && markers.length > 0">
<div class="col-12">
<!-- <h2>TODO list</h2> -->
<table class="table">
<thead>
<tr>
<th>Message</th>
<th>
Date
</th>
<th>
Detailed address
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="marker in markers | filter : { isNew : '!' }">
<td class="col-6" ng-hide="marker.editingEnabled">{{marker.title}}</td>
<td class="col-6" ng-show="marker.editingEnabled">
<input type="text" class="form-control" id="txtMessage" placeholder="Message" value="" ng-model="marker.message">
</td>
<td class="col-6" ng-hide="marker.editingEnabled">{{marker.due_date | date: "dd/MM/yyyy (hh:mm)"}}</td>
<td class="col-6" ng-show="marker.editingEnabled">
<input type="datetime-local" placeholder="Date" ng-model="marker.dueDate">
</td>
<td class="col-6">
{{marker.postal_address}}
</td>
<!-- <td>
<input src="../img/info.png" width="64" height="64" title="Info" type="image" ng-click="showInfo($index)" data-toggle="modal" data-target="#myModal"></input>
</td> -->
<td class="col">
<input src="../img/zoom.png" width="32" height="32" title="Zoom to" type="image" ng-click="highlightTodo($index)"></input>
</td>
<td class="col">
<input src="../img/delete.png" width="32" height="32" title="Remove" type="image" ng-click="deleteTodo($index)"></input>
</td>
<td class="col">
<input src="../img/edit.png" width="32" height="32" title="Toggle Edit" type="image" ng-click="toggleEditTodo($index)"></input>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal Window -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Info</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Change the item here:</p>
<p>Message:<input type="text" ng-model="currentMarker.message"></p>
<p>Address:{{currentMarker.postalAddress}}</p>
<p><input type="datetime-local" ng-model="currentMarker.dueDate"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>