-
Notifications
You must be signed in to change notification settings - Fork 4
/
notes.html
45 lines (45 loc) · 1.8 KB
/
notes.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
<!DOCTYPE html>
<html>
<head>
<title>飲水地圖 Note 列表</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css"/>
</head>
<body>
<p>請參考 <a href="https://osmtw.hackpad.com/Note-5FCtyE3QsJE" target="_blank">Note 編修說明書</a>驗證並加入以下飲水點資料。</p>
<table class="notes ui celled padded table">
<thead>
<tr class="single line">
<th>狀態</th>
<th>ID</th>
<th>送交時間</th>
<th>說明</th>
</tr>
</thead>
<tbody class="content">
</tbody>
</table>
<script>
var notesURL = 'https://api.openstreetmap.org/api/0.6/notes/search.json?q=%E9%A3%B2%E6%B0%B4%E5%9C%B0%E5%9C%96'
var $table = $('.notes.table .content')
$.get(notesURL, '', function (data, ok, ajax) {
data.features.forEach(function (d) {
var $tr = $('<tr></tr>')
$tr.append(
'<td>' + '<div class="ui ' + (d.properties.status === 'open' ? 'red' : 'teal') + ' label">' + d.properties.status + '</div></td>',
'<td>' + '<a href="https://www.openstreetmap.org/note/' + d.properties.id + '">' + d.properties.id + '</a>' + '</td>',
'<td>' + d.properties.date_created + '</td>',
'<td>' + d.properties.comments[0].html + '</td>'
)
$tr.addClass(d.properties.status)
$tr.click(function (e) {
e.preventDefault()
window.open('https://www.openstreetmap.org/note/' + d.properties.id)
})
$table.append($tr)
})
})
</script>
</body>
</html>