-
Notifications
You must be signed in to change notification settings - Fork 1
/
node.html
238 lines (202 loc) · 11 KB
/
node.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<link rel="shortcut icon" href="./img/agoama.png" type="image/x-icon">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10; chrome=1;">
<meta name="fragment" content="!">
<base target="_blank">
<title>大家一起把回收拿給阿公阿嬤</title>
<link href='css/style2.css' type='text/css' rel='stylesheet'>
<link href='css/style-node.css' type='text/css' rel='stylesheet'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<link href='css/Leaflet.awesome-markers.css' type='text/css' rel='stylesheet'>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="js/leaflet.awesome-markers.min.js"></script>
<!-- // <script src="js/pace.min.js"></script> -->
<script src="js/tabletop.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50648405-1', 'agoama.tw');
ga('require', 'displayfeatures');
ga('require', 'GTM-N8WW2GQ');
ga('send', 'pageview');
</script>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<link rel="alternate" type="text/xml+oembed" href="https://docs.google.com/forms/d/1x64IhdUPES5JXaL2pCh6mn0y-zKN6C7BksBUKdRXFa0/oembed?url=https://docs.google.com/forms/d/1x64IhdUPES5JXaL2pCh6mn0y-zKN6C7BksBUKdRXFa0/viewform&format=xml">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="大家一起把回收拿給阿公阿嬤"><meta property="og:type" content="article"><meta property="og:site_name" content="幫阿公阿嬤做回收"><meta property="og:url" content="http://junsuwhy.github.io/whereisama/"><meta property="og:image" content="http://junsuwhy.github.io/whereisama/img/amabg.jpg"><meta property="og:image:width" content="400"><meta property="og:image:height" content="265"><meta property="og:description" content="你家附近有回收的阿公阿嬤嗎?
請幫我們把他們的地址填入問卷
我們將用這個資料,建立一個回收點地圖
讓大家都可以把家裡的回收附近有在收回收的阿公阿嬤
PS:我們會的工具不多,如果有攻城師想到更好的方式,也請不吝指教
PS:如果可以的話,盡可能取得阿公阿嬤公開資料的同意,避免造成他們的困擾">
</head>
<body dir="ltr" class="ss-base-body">
<div itemscope itemtype="http://schema.org/CreativeWork/FormObject"><meta itemprop="name" content="大家一起把回收拿給阿公阿嬤">
<meta itemprop="description" content="你家附近有回收的阿公阿嬤嗎? 請幫我們把他們的地址填入問卷 我們將用這個資料,建立一個回收點地圖,讓大家都可以把家裡的回收附近有在收回收的阿公阿嬤 PS:我們會的工具不多,如果有攻城師想到更好的方式,也請不吝指教 PS:如果可以的話,盡可能取得阿公阿嬤公開資料的同意,避免造成他們的困擾">
<meta itemprop="url" content="https://docs.google.com/forms/d/1x64IhdUPES5JXaL2pCh6mn0y-zKN6C7BksBUKdRXFa0/viewform">
<meta itemprop="embedUrl" content="https://docs.google.com/forms/d/1x64IhdUPES5JXaL2pCh6mn0y-zKN6C7BksBUKdRXFa0/viewform?embedded=true">
<meta itemprop="faviconUrl" content="http://junsuwhy.github.io/whereisama/img/agoama.png">
<div class="all-container">
<div class="background-div"></div>
<div class="ss-header-image">
<a href="./" target="_self"><img src="img/ama-logo-background.jpg"/></a>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fgive.them.to.ago.ama&width=200&layout=standard&action=like&show_faces=true&share=true&height=80&appId=1436418016572374" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;
overflow:hidden;
width:200px;
height:80px;
position: absolute;
bottom: 0;
left:0;"></iframe>
</div>
<div class="ss-form-container">
<div class="ss-top-of-page"><div class="ss-form-heading"><h1 class="ss-form-title" dir="ltr">大家一起把回收拿給阿公阿嬤</h1>
</div></div>
<div class="node-div-wrapper">
<div class = "node-div">
<div class="node-name">
<!-- <span class="tag-span"></span> -->
<h2 class="val-h2"></h2>
</div>
<div class="node-address">
<div class="tag-div">
<span class="tag-span">地址</span>
</div>
<span class="val-span"></span>
</div>
<div class="node-point">
<div class="tag-div">
<span class="tag-span">附近地標</span>
</div>
<span class="val-span"></span>
</div>
<div class="node-start">
<div class="tag-div">
<span class="tag-span">開始回收時間</span>
</div>
<span class="val-span">未標記</span>
</div>
<div class="node-end">
<div class="tag-div">
<span class="tag-span">結束回收時間</span>
</div>
<span class="val-span">未標記</span>
</div>
<div class="node-other">
<!-- <span class="tag-span"></span> -->
<span class="val-span"></span>
</div>
</div>
</div>
<div class="map-wrapper">
<div id="map" ><div class="load"><img src="img/loader.gif"/></div></div>
</div>
<script>
var map = L.map('map',{'scrollWheelZoom':false,}).setView([23.675,121.264], 5);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
Tabletop.init({
key: '1r8geMv62QiLS3rZFVSjn_q-nt_tfOqIxFmJOUP_OiH0',
callback: afterLoadSheet,
simpleSheet: false
});
function afterLoadSheet(data, tabletop) {
// console.log(data);
agoma_array = data.sheet1.elements;
try{
//取得阿公阿嬤編號
var url = location.href;
var agoama = parseInt(url.match(/agoama=(\d+)/g)[0].split("=")[1]);
var redMarker = L.AwesomeMarkers.icon({
icon: 'star',
markerColor: 'yellow'
});
for (var i = 0; i < agoma_array.length; i++) {
/*
回收時間-結束: "17:00"
回收時間-開始: "09:00"
回收項目: ""
地址: "台灣台中市北區興進路218巷"
性別: "女"
意見回饋: ""
時間戳記: "2014/5/10 下午 11:42:23"
稱呼: "婆婆"
經度: "120.6921969"
緯度: "24.156139"
附近地標: "湖南味小吃"
*/
if(!isNaN(parseFloat(agoma_array[i]['緯度'])) && !isNaN(parseFloat(agoma_array[i]['經度']))){
var name = add_tag(agoma_array[i]['稱呼'],"","h3");
var address = add_tag(agoma_array[i]['地址']+' <a href="https://www.google.com.tw/maps/place/'+agoma_array[i]['地址']+'" target="_blank" >到 Google 地圖</a>','地址',"div");
var point = add_tag(agoma_array[i]['附近地標'],'附近地標',"div");
var start = add_tag(agoma_array[i]['回收時間-開始'],'開始回收時間',"div");
var end = add_tag(agoma_array[i]['回收時間-結束'],'結束回收時間',"div");
var other = add_tag(break_line(agoma_array[i]['意見回饋']),'',"div","other");
// var link_node ="";
var link_node = add_tag('<a target="_self" href="./node.html?agoama='+i+'">補充資訊</a>','',"div");
var text = name + address + point + start + end + other + link_node;
if(i==agoama){
var marker = L.marker([agoma_array[i]['緯度'], agoma_array[i]['經度']],{icon:redMarker}).addTo(map).bindPopup(text);
}else{
var marker = L.marker([agoma_array[i]['緯度'], agoma_array[i]['經度']]).addTo(map).bindPopup(text);
}
}
}
$('.load').hide('slow');
has_error = false;
if(typeof agoma_array[agoama] !== "undefined"){
i=agoama;
$('.node-name .val-h2').html(agoma_array[i]['稱呼']);
$('.node-address .val-span').text(agoma_array[i]['地址']);
$('.node-point .val-span').text(agoma_array[i]['附近地標']);
$('.node-start .val-span').text(agoma_array[i]['開始回收時間']);
$('.node-end .val-span').text(agoma_array[i]['結束回收時間']);
$('.node-other .val-span').html(break_line(agoma_array[i]['意見回饋']));
map.setView([agoma_array[i]['緯度'], agoma_array[i]['經度']], 15);
}else{
is_error();
}
}catch(e){
console.log(e);
is_error();
}
$('.node-div').show('slow');
};
function break_line(text){
return text.replace(/\n/g,"<br>");
}
function add_tag(val,name , htmltag, classname){
name = (name == "")?"":name+ ":";
myclass = (typeof classname == "undefined")? "": " class="+classname;
return (val=="")?"":"<"+htmltag+myclass+">" + name + val + "</"+htmltag+">";
}
function is_error(){
$('.map-wrapper').remove();
$('.node-div').html('登愣 !! 這個網址似乎是有問題 !! <br>麻煩請在下面留言處描述一下<br>從哪裡連到這個網頁的,<br>我們會儘快解決它,感激不盡QQ。');
$('.addition').hide();
$('.textarea').html('<p>YYY</p>');
}
</script>
<div class="addition">有什麼想要補充的,可在下面留言喔!!<br>我們會幫您更新資訊。</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'whereisama'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div></body></html>