Skip to content

Commit de0a95a

Browse files
author
Takashi Nishibayashi
committed
Refine client js
1 parent 99658f6 commit de0a95a

File tree

5 files changed

+116
-42
lines changed

5 files changed

+116
-42
lines changed

‎static/admin.html‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎static/index.html‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,50 @@
1212
<script type="text/javascript" src="js/MainController.js" ></script>
1313
<script type="text/javascript">
1414
var controller = new ew.MainController();
15-
1615
</script>
16+
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
17+
<script type="text/javascript" src="js/ControllPanel.js"></script>
18+
<style>
19+
div#control-panel {
20+
height: 120px;
21+
padding: 10px;
22+
box-sizing:border-box;
23+
}
24+
h1 {
25+
margin: 4px 0 4px 0;
26+
}
27+
input#message {
28+
width: calc(100% - 120px);
29+
font-size: 1.4em;
30+
border-radius: 5px;
31+
vertical-align:middle;
32+
}
33+
div#publish_button {
34+
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN';
35+
display: inline-block;
36+
height: 25px;
37+
width: 80px;
38+
border: 1px solid #000;
39+
vertical-align:middle;
40+
text-align:center;
41+
border-radius: 5px;
42+
padding-top: 6px;
43+
font-weight: bold;
44+
color: #FFF;
45+
background-color: #2c2;
46+
border-color: #2a2;
47+
cursor: pointer;
48+
}
49+
</style>
1750
</head>
1851
<body>
19-
<div id="map-canvas" style="width:100%; height:100%"></div>
52+
<div id="control-panel">
53+
<h1>Publish Warning</h1>
54+
<div style="font-size:10px">
55+
Latitude: <span id="lat"></span> / Longitude: <span id="lon"></span> (Radius: <span id="radius"></span>km)<br>
56+
</div>
57+
<input type="text" value="" placeholder="Input warning message" size="40" id="message"/> &nbsp; <div id="publish_button">Publish</div>
58+
</div>
59+
<div id="map-canvas" style="width:100; height:calc(100% - 100px);"></div>
2060
</body>
21-
</html>
61+
</html>

‎static/js/ControllPanel.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
jQuery(function($) {
2+
var sending = false;
3+
$('#publish_button').on('click', function() {
4+
if (sending) {
5+
return;
6+
}
7+
sending = true;
8+
$('#publish_button').text('Wait...');
9+
10+
var circle = window.controller.circle;
11+
var xhr = $.ajax({
12+
method: 'POST',
13+
url: '/publish',
14+
headers: {
15+
'Content-Type': 'application/json',
16+
},
17+
data: JSON.stringify({
18+
lat: Number(circle.center.d),
19+
lon: Number(circle.center.e),
20+
radius: Number(circle.radius),
21+
message: $('#message').val()
22+
})
23+
});
24+
xhr.done(function() {
25+
alert('Message succesfully published');
26+
$('#publish_button').text('Publish');
27+
sending = false;
28+
});
29+
xhr.error(function() {
30+
$('#publish_button').text('Publish');
31+
sending = false;
32+
});
33+
});
34+
35+
function update_latlon(loc) {
36+
$('#lat').text(Math.floor(loc.lat * 100)/100);
37+
$('#lon').text(Math.floor(loc.lon * 100)/100);
38+
}
39+
40+
function update_radius(val) {
41+
$('#radius').text(Math.floor(val/1000));
42+
}
43+
44+
window.controller.on_center_changed = function(loc) {
45+
update_latlon({
46+
lat: loc.d,
47+
lon: loc.e
48+
});
49+
};
50+
window.controller.on_radius_changed = function(radius) {
51+
update_radius(radius);
52+
};
53+
54+
// Initial
55+
update_latlon({
56+
lat: 22.74,
57+
lon: 90.75
58+
});
59+
update_radius(100000);
60+
61+
});

‎static/js/MainController.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,20 @@ var ew;
4343

4444
this.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
4545
_this.getLatLng("Bangladesh mosque");
46-
_this.circle.setMap(_this.map);
4746

4847
this.circle = this.createCircle(this.map.getCenter(), 100000);
48+
_this.circle.setMap(_this.map);
49+
this.circle.addListener('center_changed', (function() {
50+
if (this.on_center_changed) {
51+
this.on_center_changed(this.circle.center);
52+
}
53+
}).bind(this));
54+
55+
this.circle.addListener('radius_changed', (function() {
56+
if (this.on_radius_changed) {
57+
this.on_radius_changed(this.circle.radius);
58+
}
59+
}).bind(this));
4960
};
5061

5162
MainController.prototype.getLatLng = function (place) {

‎static/js/main.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)