You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
316 lines
12 KiB
316 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Complaints</title>
|
|
<meta name="viewport" content="initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
|
|
<style>
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
|
|
#img:hover{
|
|
color: #424242;
|
|
-webkit-transition: all .3s ease-in;
|
|
-moz-transition: all .3s ease-in;
|
|
-ms-transition: all .3s ease-in;
|
|
-o-transition: all .3s ease-in;
|
|
transition: all .3s ease-in;
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
-ms-transform: scale(1.15); /* IE 9 */
|
|
-webkit-transform: scale(1.15); /* Safari and Chrome */
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
#img-user{
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
}
|
|
|
|
.title{
|
|
text-align: left;
|
|
}
|
|
|
|
td{
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.popup{
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
padding-top: 60px;
|
|
}
|
|
|
|
#table,#table-user{
|
|
background: white;
|
|
padding: 40px 60px;
|
|
}
|
|
|
|
#content, #user-content{
|
|
display: inline-block;
|
|
margin-top: 125px;
|
|
background: white;
|
|
}
|
|
#submit{
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false"></audio>
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
<!-- ANANA SOKIYIM JAVASCRIPT
|
|
Sen nası gereksiz bir dilsin amk bütün bi gecemi yedin
|
|
ben senenin ebeni sikiyim inşallah seni yazan programcının götüne av tüfeği girer
|
|
AYNISI SOCKET.IO IÇIN DE GEÇERLİ ALLAHIM KAFAYI YİCEM ADAMLAR HERALDE "ACABA NE KADAR ÖZÜRLÜ BI FRAMERWORK YAZARIZ DUYE BAŞLAMIŞLAR IŞE"-->
|
|
|
|
|
|
<div id = "popup" align = "center" class = "popup">
|
|
|
|
<div id = "content">
|
|
|
|
<form onsubmit="sendUpdate(this);console.log('submitting');return false;" action = "." id = "submission_form">
|
|
|
|
<table border="0" cellpadding="10" cellspacing="0" id = "table" class = "modal">
|
|
<tr>
|
|
<td rowspan="2" colspan="7"><img src="cityscape.png" alt="img"id = "img"></td>
|
|
<td colspan="2" class="title"><strong>Priority: </strong></td>
|
|
<td colspan="1" id = "priority">7</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="title"><strong>Type: </strong></td>
|
|
<td colspan="1" id = "type"> Ambulance</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Submitter: </strong></td>
|
|
<td colspan="6">
|
|
<a href="#" id = "user" class = "panel" onclick=
|
|
"document.getElementById('popup').style.display='none';
|
|
document.getElementById('user-popup').style.display='block';
|
|
setUser(this.getAttribute('userid'))"
|
|
|
|
>Efe Aydın </a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Message: </strong></td>
|
|
<td colspan="6" id = "message">Test ambulance</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Tags: </strong></td>
|
|
<td colspan="6" id = "tags">Test tags</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Message: </strong></td>
|
|
<td colspan="6" id = "input"> <textarea name="message" rows="5" cols="30" id="response">Please enter response.</textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="10">
|
|
<input type="submit" id = "submit">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div id = "user-popup" align = "center" class="popup">
|
|
|
|
<div id = "user-content">
|
|
<table border="0" cellpadding="10" cellspacing="0" id = "table-user" class = "modal">
|
|
|
|
<tr>
|
|
<td rowspan="3" colspan="7"><img src="cityscape.png" alt="img"id = "img-user"></td>
|
|
<td colspan="2" class="title"><strong>Name: </strong></td>
|
|
<td colspan="1" id = "name">Efe Aydın</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="title"><strong>TC: </strong></td>
|
|
<td colspan="1" id = "tc">111111111111</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="title"><strong>Trust: </strong></td>
|
|
<td colspan="1" id = "trust">7</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Phone: </strong></td>
|
|
<td colspan="6" id="phone">
|
|
0 555 555 55 55
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>E-mail: </strong></td>
|
|
<td colspan="6" id = "email">efeaydin@citizenview.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="title"><strong>Health: </strong></td>
|
|
<td colspan="6" id = "health">Test tags</td>
|
|
</tr>
|
|
</table>
|
|
<button onclick=
|
|
"document.getElementById('popup').style.display='block';
|
|
document.getElementById('user-popup').style.display='none';"
|
|
style="margin-bottom: 5px;">OK</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function setUser(id) {
|
|
if(!(id in users)) {
|
|
$.get("https://" + document.domain + ":5000/users/" + id, function (dataStr, status) {
|
|
data_user = $.parseJSON(dataStr)
|
|
users[id]=data_user
|
|
document.getElementById("name").innerHTML = users[id]["realname"];
|
|
document.getElementById("tc").innerHTML = users[id]["TC"];
|
|
document.getElementById("trust").innerHTML = users[id]["trustability"];
|
|
document.getElementById("phone").innerHTML = users[id]["tel"];
|
|
document.getElementById("email").innerHTML = users[id]["email"];
|
|
document.getElementById("img-user").setAttribute("src","https://" + document.domain + ":5000"+users[id]["avatar"])
|
|
});
|
|
}else {
|
|
document.getElementById("name").innerHTML = users[id]["realname"];
|
|
document.getElementById("tc").innerHTML = users[id]["TC"];
|
|
document.getElementById("trust").innerHTML = users[id]["trustability"];
|
|
document.getElementById("phone").innerHTML = users[id]["tel"];
|
|
document.getElementById("email").innerHTML = users[id]["email"];
|
|
document.getElementById("img-user").setAttribute("src","data:image/png;base64," + users[id]["image"])
|
|
}
|
|
}
|
|
function sendUpdate(form) {
|
|
params = "?";
|
|
|
|
params += "message=" + document.getElementById("response").value + "&";
|
|
params += "id=" + form.getAttribute("id") + "&";
|
|
params += "index=" + form.getAttribute("index");
|
|
$.get("https://" + document.domain + ":5000/complaints_update" + params, function (dataStr, status) {
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var modal = document.getElementById('popup');
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var map;
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 39.92, lng: 32.85},
|
|
zoom: 13
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var sound = document.getElementById("audio");
|
|
var markers = [];
|
|
|
|
var socket = io.connect('http://' + document.domain + ':' + location.port + "/complaints_socket");
|
|
console.log('http://' + document.domain + ":4000/complaints_socket")
|
|
console.log(socket);
|
|
|
|
var markers = [];
|
|
var denunciation_count = markers.length;
|
|
var users = {};
|
|
setInterval(function () {
|
|
socket.emit("check",{})
|
|
},1000);
|
|
var LatLng = null;
|
|
socket.on("new",function (dataStr) {
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers.pop().setMap(null);
|
|
}
|
|
console.log("Update received!")
|
|
data = $.parseJSON(dataStr);
|
|
for(var key in data) {
|
|
data[key].forEach(function (element,index) {
|
|
if(element["lng"] === undefined || element["lat"] === undefined){
|
|
return;
|
|
}
|
|
LatLng = {lat: parseFloat(element["lat"]), lng: parseFloat(element["lng"])};
|
|
var marker = new google.maps.Marker({
|
|
position: {lat: parseFloat(element["lat"]), lng: parseFloat(element["lng"])},
|
|
map: map,
|
|
label: element["response"]["priority"].toString(),
|
|
title: element["datetime"]
|
|
});
|
|
|
|
marker.addListener('click', function () {
|
|
document.getElementById('popup').style.display = 'block';
|
|
document.getElementById("priority").innerHTML = element["response"]["priority"];
|
|
if(element["response"]["status"]){
|
|
document.getElementById("response").innerHTML = element["response"]["message"];
|
|
}
|
|
document.getElementById("submission_form").setAttribute("index",index);
|
|
document.getElementById("submission_form").setAttribute("id",key);
|
|
document.getElementById("type").innerHTML = "Road Damage";
|
|
document.getElementById("message").innerHTML = element["content"];
|
|
|
|
if (!(key in users)) {
|
|
$.get("https://" + document.domain + ":5000/users/" + key, function (dataStr, status) {
|
|
data_user = $.parseJSON(dataStr);
|
|
users[key] = data_user;
|
|
document.getElementById("user").innerHTML = users[key]["realname"];
|
|
});
|
|
} else {
|
|
document.getElementById("user").innerHTML = users[key]["realname"];
|
|
}
|
|
document.getElementById("user").setAttribute("userid", key);
|
|
document.getElementById("img").setAttribute("src", "data:image/png;base64," + element["img"])
|
|
});
|
|
|
|
});
|
|
}
|
|
map.setCenter(LatLng);
|
|
|
|
if (denunciation_count < markers.length) {
|
|
sound.play();
|
|
}
|
|
denunciation_count = markers.length;
|
|
});
|
|
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuOC03IHPA_6TPnfk18b0SAgD1uge4-dk&callback=initMap" async defer></script>
|
|
|
|
</body>
|
|
</html>
|