forked from kenta0g/brownbag
-
Notifications
You must be signed in to change notification settings - Fork 0
/
info.html
146 lines (117 loc) · 4.75 KB
/
info.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
<ons-page id="info-page">
<ons-toolbar>
<div class="left">
<ons-back-button>お店を探す</ons-back-button>
</div>
<div class="center"></div>
</ons-toolbar>
<ons-card>
<div id="shop_image" class="image_center">
</div>
</ons-card>
<ons-list-title id="shop_name"></ons-list-title>
<ons-list>
<ons-list-header>お店紹介</ons-list-header>
<ons-list-item id="shop_summary"></ons-list-item>
<ons-list-header>カテゴリー</ons-list-header>
<ons-list-item id="shop_category"></ons-list-item>
<ons-list-header>電話番号</ons-list-header>
<ons-list-item id="shop_tel"></ons-list-item>
<ons-list-item>
<label class="left">
<ons-checkbox value="something" checked></ons-checkbox>
</label>
<label for="check-1" class="center">
テイクアウト可
</label>
</ons-list-item>
<ons-list-item>
<label class="left">
<ons-checkbox value="something"></ons-checkbox>
</label>
<label for="check-1" class="center">
予約可
</label>
</ons-list-item>
<ons-list-header>定休日</ons-list-header>
<ons-list-item id="shop_dayoff"></ons-list-item>
<ons-list-header>営業時間</ons-list-header>
<ons-list-item id="shop_hours"></ons-list-item>
<ons-list-header>Webサイト</ons-list-header>
<ons-list-item id="shop_url"></ons-list-item>
<ons-list-header>メール</ons-list-header>
<ons-list-item id="shop_mail"></ons-list-item>
<ons-list-header>メモ</ons-list-header>
<ons-list-item id="shop_memo"></ons-list-item>
</ons-list>
<ons-card>
<div id="info_map"></div>
</ons-card>
<script>
ons.getScriptPage().onInit = function () {
var index = parseInt(this.data.index);
var item = getShopItem(index);
// item
var lon = item["fX"];
var lat = item["fY"];
var name = item["Name"];
var addr = item["Address1"];
var tel = item["Phone"];
var category = item["category"];
var summary = item["Summary"];
var hours = item["Hours"];
var dayoff = item["dayoff"];
var url = item["Website"];
var email = item["email"];
// 店舗画像
this.querySelector('#shop_image').innerHTML = '<img src="cook0.jpg" width="50%">';
// 店名設定
this.querySelector('ons-toolbar .center').innerHTML = name;
this.querySelector('#shop_name').textContent = "店舗名： " + name;
// お店紹介
this.querySelector('#shop_summary').textContent = summary;
// カテゴリー
this.querySelector('#shop_category').textContent = category;
// 電話番号
this.querySelector('#shop_tel').innerHTML = '<address>連絡先：<a href="tel:' + tel + '">' + tel + '</a></address>';
// テイクアウト可
// ToDO:
// 予約可
// ToDO:
// 定休日
this.querySelector('#shop_dayoff').textContent = hours;
// 営業時間
this.querySelector('#shop_hours').textContent = dayoff;
// Webサイト>
if (url != null && url.length > 0) {
this.querySelector('#shop_url').innerHTML = '<a href="' + url + '">' + url + '</a>';
}
// メール
if (email != null && email.length > 0) {
this.querySelector('#shop_mail').innerHTML = '<a href="mailto:' + email + 'subject=流山テイクアウトマップ&body=修正依頼">' + email + '</a>';
}
// メモ
this.querySelector('#shop_memo').textContent = "";
// マップ
var map = L.map('info_map').setView([lat, lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([lat, lon]).addTo(map)
.bindPopup('名称：' + name + "<br>" + 'カテゴリ：' + category + "<br>" + '電話：' + tel + "<br>" + '住所：' + addr);
}
</script>
<style>
.image_center {
max-width: 50%;
margin: 0 auto;
text-align:center;
border: 1px;
}
#info_map {
z-index: 0;
width: 100%;
height: 400px;
}
</style>
</ons-page>