Skip to content

Commit 72756e8

Browse files
TGRHavocTGRHavoc
committed
refactor: update UI
Updated the UI and changed some stuff to make the app run a bit better.
1 parent 143cac5 commit 72756e8

File tree

5 files changed

+527
-135
lines changed

5 files changed

+527
-135
lines changed

‎index.php

+180-127
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,187 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Live map</title>
6-
7-
<style type="text/css">
8-
.gm-style .gm-style-iw{font-weight:300;font-size:13px;overflow:hidden}.gm-style .gm-iw{color:#2c2c2c}.gm-style .gm-iw b{font-weight:400}.gm-style .gm-iw a:link,.gm-style .gm-iw a:visited{color:#4272db;text-decoration:none}.gm-style .gm-iw a:hover{color:#4272db;text-decoration:underline}.gm-style .gm-iw .gm-title{font-weight:400;margin-bottom:1px}.gm-style .gm-iw .gm-basicinfo{line-height:18px;padding-bottom:12px}.gm-style .gm-iw .gm-website{padding-top:6px}.gm-style .gm-iw .gm-photos{padding-bottom:8px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style .gm-iw .gm-sv,.gm-style .gm-iw .gm-ph{cursor:pointer;height:50px;width:100px;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv{padding-right:4px}.gm-style .gm-iw .gm-wsv{cursor:pointer;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv-label,.gm-style .gm-iw .gm-ph-label{cursor:pointer;position:absolute;bottom:6px;color:#fff;font-weight:400;text-shadow:rgba(0,0,0,0.7) 0 1px 4px;font-size:12px}.gm-style .gm-iw .gm-stars-b,.gm-style .gm-iw .gm-stars-f{height:13px;font-size:0}.gm-style .gm-iw .gm-stars-b{position:relative;background-position:0 0;width:65px;top:3px;margin:0 5px}.gm-style .gm-iw .gm-rev{line-height:20px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style.gm-china .gm-iw .gm-rev{display:none}.gm-style .gm-iw .gm-numeric-rev{font-size:16px;color:#dd4b39;font-weight:400}.gm-style .gm-iw.gm-transit{margin-left:15px}.gm-style .gm-iw.gm-transit td{vertical-align:top}.gm-style .gm-iw.gm-transit .gm-time{white-space:nowrap;color:#676767;font-weight:bold}.gm-style .gm-iw.gm-transit img{width:15px;height:15px;margin:1px 5px 0 -20px;float:left}.gm-iw {text-align:left;}.gm-iw .gm-numeric-rev {float:left;}.gm-iw .gm-photos,.gm-iw .gm-rev {direction:ltr;}.gm-iw .gm-stars-f, .gm-iw .gm-stars-b {background:url("http://maps.gstatic.com/mapfiles/api-3/images/review_stars.png") no-repeat;background-size: 65px 26px;float:left;}.gm-iw .gm-stars-f {background-position:left -13px;}.gm-iw .gm-sv-label,.gm-iw .gm-ph-label {left: 4px;}
9-
10-
.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}
11-
12-
@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}
13-
14-
.gm-style {
15-
font: 400 11px Roboto, Arial, sans-serif;
16-
text-decoration: none;
17-
}
18-
19-
.gm-style img { max-width: none; }
20-
21-
@-webkit-keyframes _gm3821 {
22-
0% { -webkit-transform: translate3d(0px,-500px,0); -webkit-animation-timing-function: ease-in; }
23-
50% { -webkit-transform: translate3d(0px,0px,0); -webkit-animation-timing-function: ease-out; }
24-
75% { -webkit-transform: translate3d(0px,-20px,0); -webkit-animation-timing-function: ease-in; }
25-
100% { -webkit-transform: translate3d(0px,0px,0); -webkit-animation-timing-function: ease-out; }
26-
}
27-
28-
</style>
29-
30-
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
31-
<link type="text/css" rel="stylesheet" href="style/bootstrap.css">
32-
<link type="text/css" rel="stylesheet" href="style/style.css">
33-
34-
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
35-
<script type="text/javascript" src="js/app.js"></script>
36-
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbYDZMGkewhRTGRJS4wwSVuBipYlYf-SU"></script>
37-
38-
<script>
39-
///////////////////////////////////////////////////////////////////////////
40-
// CONFIGURATION STARTS HERE
41-
///////////////////////////////////////////////////////////////////////////
42-
43-
// Set relative tile directory
44-
var _MAP_tileURL = "images/map/";
45-
46-
// Set relative icon directory
47-
var _MAP_iconURL = "images/icons/";
48-
49-
// Set if to show Atlas map (WARNING: REQUIRES ATLAS MAP TILE DIRECTORY)
50-
// Set "true" to show map
51-
// Set "false" to not show map
52-
var _MAP_atlasMap = true;
53-
54-
// Set if to show Satellite map (WARNING: REQUIRES SATELLITE MAP TILE DIRECTORY)
55-
// Set "true" to show map
56-
// Set "false" to not show map
57-
var _MAP_satelliteMap = true;
58-
59-
// Set if to show Road map (WARNING: REQUIRES ROAD MAP TILE DIRECTORY)
60-
// Set "true" to show map
61-
// Set "false" to not show map
62-
var _MAP_roadMap = true;
63-
64-
// Set if to show UV Invert map (WARNING: REQUIRES UV INVERT MAP TILE DIRECTORY)
65-
// Set "true" to show map
66-
// Set "false" to not show map
67-
var _MAP_UVInvMap = false;
68-
69-
// Set to the IP of the GTA V server running "live_map"
70-
var _SETTINGS_queryIp = "http://localhost/map-api";
71-
72-
var _SETTINGS_socketUrl = "ws://localhost:30121"
73-
74-
</script>
75-
76-
<!-- IF DEBUG. Use un-minified version -->
77-
<script type="text/javascript" src="js/src/init.js"></script>
78-
<script type="text/javascript" src="js/src/markers.js"></script>
79-
<script type="text/javascript" src="js/src/objects.js"></script>
80-
<script type="text/javascript" src="js/src/utils.js"></script>
81-
<script type="text/javascript" src="js/src/map.js"></script>
82-
<script type="text/javascript" src="js/src/socket.js"></script>
83-
84-
<!-- IF PRODUCTION. Use minified version -->
85-
<!--
86-
<script type="text/javascript" src="js/init.js"></script>
87-
<script type="text/javascript" src="js/markers.min.js"></script>
88-
<script type="text/javascript" src="js/objects.js"></script>
89-
<script type="text/javascript" src="js/utils.js"></script>
90-
<script type="text/javascript" src="js/map.js"></script>
91-
<script type="text/javascript" src="js/socket.js"></script>
92-
-->
93-
94-
<script>
95-
function startMarkers(){
96-
initMarkers(true);
97-
//initMarkers(false);
98-
}
99-
</script>
100-
101-
</head>
102-
<body>
103-
104-
<nav class="navbar navbar-default-invert navbar-static-top" style="margin: 0;">
105-
<div class="container-fluid">
106-
<div class="container">
107-
<div class="navbar-brand" style="padding: 10px 15px">
108-
<a href="https://identityrp.co.uk">
109-
<img src="https://identityrp.co.uk/assets/logo-pmx43bj0.png" style="max-height: 30px" >
110-
</a>
111-
</div>
112-
</div>
113-
</div>
114-
</nav>
115-
116-
<div id="wrapper">
117-
<div id="about-box" class="hidden">
118-
<br><br><strong>THIS MAP IS NOT AFFILIATED WITH TAKE TWO OR ROCKSTAR GAMES</strong>
119-
</div>
120-
<div id="map-holder" style="position: relative">
121-
<div id="map-canvas" style="position: relative; overflow: hidden; background-color: rgb(15, 168, 210);">
122-
</div>
123-
</div>
124-
</div>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Live map</title>
6+
7+
<style type="text/css">
8+
.gm-style .gm-style-iw{font-weight:300;font-size:13px;overflow:hidden}.gm-style .gm-iw{color:#2c2c2c}.gm-style .gm-iw b{font-weight:400}.gm-style .gm-iw a:link,.gm-style .gm-iw a:visited{color:#4272db;text-decoration:none}.gm-style .gm-iw a:hover{color:#4272db;text-decoration:underline}.gm-style .gm-iw .gm-title{font-weight:400;margin-bottom:1px}.gm-style .gm-iw .gm-basicinfo{line-height:18px;padding-bottom:12px}.gm-style .gm-iw .gm-website{padding-top:6px}.gm-style .gm-iw .gm-photos{padding-bottom:8px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style .gm-iw .gm-sv,.gm-style .gm-iw .gm-ph{cursor:pointer;height:50px;width:100px;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv{padding-right:4px}.gm-style .gm-iw .gm-wsv{cursor:pointer;position:relative;overflow:hidden}.gm-style .gm-iw .gm-sv-label,.gm-style .gm-iw .gm-ph-label{cursor:pointer;position:absolute;bottom:6px;color:#fff;font-weight:400;text-shadow:rgba(0,0,0,0.7) 0 1px 4px;font-size:12px}.gm-style .gm-iw .gm-stars-b,.gm-style .gm-iw .gm-stars-f{height:13px;font-size:0}.gm-style .gm-iw .gm-stars-b{position:relative;background-position:0 0;width:65px;top:3px;margin:0 5px}.gm-style .gm-iw .gm-rev{line-height:20px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.gm-style.gm-china .gm-iw .gm-rev{display:none}.gm-style .gm-iw .gm-numeric-rev{font-size:16px;color:#dd4b39;font-weight:400}.gm-style .gm-iw.gm-transit{margin-left:15px}.gm-style .gm-iw.gm-transit td{vertical-align:top}.gm-style .gm-iw.gm-transit .gm-time{white-space:nowrap;color:#676767;font-weight:bold}.gm-style .gm-iw.gm-transit img{width:15px;height:15px;margin:1px 5px 0 -20px;float:left}.gm-iw {text-align:left;}.gm-iw .gm-numeric-rev {float:left;}.gm-iw .gm-photos,.gm-iw .gm-rev {direction:ltr;}.gm-iw .gm-stars-f, .gm-iw .gm-stars-b {background:url("http://maps.gstatic.com/mapfiles/api-3/images/review_stars.png") no-repeat;background-size: 65px 26px;float:left;}.gm-iw .gm-stars-f {background-position:left -13px;}.gm-iw .gm-sv-label,.gm-iw .gm-ph-label {left: 4px;}
9+
10+
.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}
11+
12+
@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}
13+
14+
.gm-style {
15+
font: 400 11px Roboto, Arial, sans-serif;
16+
text-decoration: none;
17+
}
12518
126-
</body>
19+
.gm-style img { max-width: none; }
20+
21+
@-webkit-keyframes _gm3821 {
22+
0% { -webkit-transform: translate3d(0px,-500px,0); -webkit-animation-timing-function: ease-in; }
23+
50% { -webkit-transform: translate3d(0px,0px,0); -webkit-animation-timing-function: ease-out; }
24+
75% { -webkit-transform: translate3d(0px,-20px,0); -webkit-animation-timing-function: ease-in; }
25+
100% { -webkit-transform: translate3d(0px,0px,0); -webkit-animation-timing-function: ease-out; }
26+
}
27+
28+
</style>
29+
30+
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
31+
<link type="text/css" rel="stylesheet" href="style/bootstrap.css">
32+
<link type="text/css" rel="stylesheet" href="style/style.css">
33+
34+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
35+
<script type="text/javascript" src="js/app.min.js"></script>
36+
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbYDZMGkewhRTGRJS4wwSVuBipYlYf-SU"></script>
12737
12838
<script>
129-
$(document).ready(function(){
130-
globalInit();
131-
connect();
132-
});
39+
///////////////////////////////////////////////////////////////////////////
40+
// CONFIGURATION STARTS HERE
41+
///////////////////////////////////////////////////////////////////////////
42+
43+
// Set relative tile directory
44+
var _MAP_tileURL = "images/map/";
45+
46+
// Set relative icon directory
47+
var _MAP_iconURL = "images/icons/";
48+
49+
// Set if to show Atlas map (WARNING: REQUIRES ATLAS MAP TILE DIRECTORY)
50+
// Set "true" to show map
51+
// Set "false" to not show map
52+
var _MAP_atlasMap = true;
53+
54+
// Set if to show Satellite map (WARNING: REQUIRES SATELLITE MAP TILE DIRECTORY)
55+
// Set "true" to show map
56+
// Set "false" to not show map
57+
var _MAP_satelliteMap = true;
58+
59+
// Set if to show Road map (WARNING: REQUIRES ROAD MAP TILE DIRECTORY)
60+
// Set "true" to show map
61+
// Set "false" to not show map
62+
var _MAP_roadMap = true;
63+
64+
// Set if to show UV Invert map (WARNING: REQUIRES UV INVERT MAP TILE DIRECTORY)
65+
// Set "true" to show map
66+
// Set "false" to not show map
67+
var _MAP_UVInvMap = false;
68+
69+
// Set to the IP of the GTA V server running "live_map"
70+
var _SETTINGS_queryIp = "http://localhost/map-api";
71+
72+
var _SETTINGS_socketUrl = "ws://localhost:30121"
73+
74+
</script>
75+
76+
<!-- IF DEBUG. Use un-minified version -->
77+
<script type="text/javascript" src="js/src/init.js"></script>
78+
<script type="text/javascript" src="js/src/markers.js"></script>
79+
<script type="text/javascript" src="js/src/objects.js"></script>
80+
<script type="text/javascript" src="js/src/utils.js"></script>
81+
<script type="text/javascript" src="js/src/map.js"></script>
82+
<script type="text/javascript" src="js/src/socket.js"></script>
83+
84+
<!-- IF PRODUCTION. Use minified version -->
85+
<!--
86+
<script type="text/javascript" src="js/init.min.js"></script>
87+
<script type="text/javascript" src="js/markers.min.js"></script>
88+
<script type="text/javascript" src="js/objects.min.js"></script>
89+
<script type="text/javascript" src="js/utils.min.js"></script>
90+
<script type="text/javascript" src="js/map.min.js"></script>
91+
<script type="text/javascript" src="js/socket.min.js"></script>
92+
-->
93+
94+
<script>
95+
function startMarkers(){
96+
initMarkers(true);
97+
//initMarkers(false);
98+
}
13399
</script>
100+
101+
</head>
102+
<body>
103+
104+
<nav class="navbar navbar-default-invert navbar-static-top" style="margin: 0;">
105+
<div class="container-fluid">
106+
<div class="container">
107+
<div class="navbar-brand" style="padding: 10px 15px">
108+
<a href="https://identityrp.co.uk">
109+
<img src="https://identityrp.co.uk/assets/logo-pmx43bj0.png" style="max-height: 30px" >
110+
</a>
111+
</div>
112+
</div>
113+
</div>
114+
</nav>
115+
116+
<div id="wrapper" class="container">
117+
<div id="map-holder" style="position: absolute">
118+
<div id="map-canvas" style="position: relative; overflow: hidden; background-color: rgb(15, 168, 210);"></div>
119+
</div>
120+
121+
<div id="side-bar" class="sidebar-nav">
122+
<div class="well" style="padding: 8px 0;">
123+
<ul class="nav nav-list">
124+
<li class="nav-header">Controls</li>
125+
126+
<li><a id="refreshBlips" href="#">Refresh Blips</a></li>
127+
128+
<li><a id="toggleLive" href="#">Live update <span id="live_enabled" class="label label-danger pull-right">off</span></a></li>
129+
130+
<li><a id="reconnect" href="#">Connect <span id="connection" class="label label-danger pull-right">disconnected</span></a></li>
131+
<li id="socket_error" class="label label-danger"></li>
132+
133+
</ul>
134+
135+
<ul class="nav nav-list" style="margin-top: 10px;">
136+
<li class="nav-header">Information</li>
137+
138+
<li><a>Blips loaded <span id="blip_count" class="label label-info pull-right">0</span></a></li>
139+
140+
<li><a>Online players <span id="player_count" class="label label-info pull-right">0</span></a></li>
141+
</ul>
142+
143+
</div>
144+
</div>
145+
</div>
146+
</body>
147+
148+
<script>
149+
var _invervalId;
150+
var _isLive = false;
151+
152+
$(document).ready(function(){
153+
globalInit();
154+
connect();
155+
156+
$("#refreshBlips").click(function(e){
157+
e.preventDefault();
158+
webSocket.send("getBlips");
159+
});
160+
161+
$("#reconnect").click(function(e){
162+
e.preventDefault();
163+
164+
$("#connection").removeClass("label-success").removeClass("label-danger").addClass("label-warning").text("reconnecting");
165+
connect();
166+
});
167+
168+
$("#toggleLive").click(function(e){
169+
e.preventDefault();
170+
171+
_isLive = !_isLive;
172+
173+
$("#live_enabled").removeClass("label-success").removeClass("label-danger")
174+
.addClass( _isLive ? "label-success" : "label-danger")
175+
.text(_isLive ? "on" : "off")
176+
177+
if (_isLive){
178+
_invervalId = setInterval(function(){ webSocket.send("getLocations"); }, 250);
179+
}else{
180+
clearInterval(_invervalId);
181+
}
182+
183+
});
184+
185+
});
186+
</script>
134187
</html>

0 commit comments

Comments
 (0)