CodeResQ_SIH-25/driver.html at main · DevStorm9833/CodeResQ_SIH-25 · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <title>Driver - Bus Tracker (Improved)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    body { font-family: Arial, sans-serif; padding: 12px; }
    button { margin: 6px 0; padding: 8px 12px; }
    #status { margin-top: 8px; color: #333; }
    .bad { color: #b00; }
    .ok { color: #097; }
  </style>
</head>
<body>
  <h2>Driver — Share Location</h2>

  <div>
    <button id="startBtn">Start Sharing (ask permission)</button>
    <button id="stopBtn" disabled>Stop Sharing</button>
  </div>

  <div id="status">Status: <span id="perm">unknown</span></div>
  <div id="info">Last sent: <span id="last">none</span></div>
  <div id="acc">Accuracy: <span id="accuracy">—</span></div>
  <div id="hint" style="margin-top:8px;color:#555"></div>

  <script>
    const serverUrl = "INSERT URL HERE";

    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
    const permEl = document.getElementById('perm');
    const lastEl = document.getElementById('last');
    const accEl = document.getElementById('accuracy');
    const hintEl = document.getElementById('hint');

    let watchId = null;

    // Check permissions (if Permissions API available)
    function checkPermission() {
      if (!navigator.permissions) {
        permEl.textContent = 'Permissions API not available';
        return;
      }
      navigator.permissions.query({ name: 'geolocation' }).then(result => {
        permEl.textContent = result.state;
        result.onchange = () => permEl.textContent = result.state;
      }).catch(() => {
        permEl.textContent = 'unknown';
      });
    }
    checkPermission();

    function sendLocation(position) {
      const payload = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        accuracy: position.coords.accuracy,
        timestamp: position.timestamp
      };

      // Display locally
      lastEl.textContent = new Date(payload.timestamp).toLocaleTimeString();
      accEl.textContent = payload.accuracy + ' m';

      // Heuristic: large accuracy => coarse (IP) location
      if (payload.accuracy > 200) {
        hintEl.innerHTML = '<span class="bad">Low accuracy (&gt;200 m): likely IP/Wi-Fi based. Enable GPS / high-accuracy mode.</span>';
      } else if (payload.accuracy > 50) {
        hintEl.innerHTML = '<span class="ok">Moderate accuracy (' + payload.accuracy + ' m). May be mixed sources.</span>';
      } else {
        hintEl.innerHTML = '<span class="ok">Good accuracy (' + payload.accuracy + ' m) — likely GPS.</span>';
      }

      // send to server
      fetch(serverUrl + '/location', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ lat: payload.lat, lng: payload.lng })
      }).then(() => {
        console.log('Location sent', payload);
      }).catch(err => {
        console.error('Send error', err);
      });
    }

    function handleError(err) {
      console.log('Geolocation error', err);
      if (err.code === 1) {
        hintEl.innerHTML = '<span class="bad">Permission denied. Allow location in your browser settings for this site.</span>';
      } else if (err.code === 2) {
        hintEl.innerHTML = '<span class="bad">Position unavailable. Try enabling GPS / restart location services.</span>';
      } else if (err.code === 3) {
        hintEl.innerHTML = '<span class="bad">Timeout. Try increasing timeout or ensure GPS is enabled.</span>';
      } else {
        hintEl.innerHTML = '<span class="bad">Unknown error: ' + err.message + '</span>';
      }
    }

    function startSharing() {
      if (!navigator.geolocation) {
        hintEl.innerHTML = '<span class="bad">Geolocation not supported by this browser.</span>';
        return;
      }

      // getCurrentPosition first to trigger permission popup in some browsers
      navigator.geolocation.getCurrentPosition(pos => {
        // if this succeeds, start watchPosition for continuous updates
        sendLocation(pos);
        if (watchId === null) {
          watchId = navigator.geolocation.watchPosition(sendLocation, handleError, {
            enableHighAccuracy: true,
            maximumAge: 0,
            timeout: 10000
          });
          startBtn.disabled = true;
          stopBtn.disabled = false;
        }
      }, err => {
        handleError(err);
      }, { enableHighAccuracy: true, maximumAge: 0, timeout: 10000 });
    }

    function stopSharing() {
      if (watchId !== null) {
        navigator.geolocation.clearWatch(watchId);
        watchId = null;
        startBtn.disabled = false;
        stopBtn.disabled = true;
        hintEl.textContent = 'Stopped sharing.';
      }
    }

    startBtn.addEventListener('click', () => {
      checkPermission();
      startSharing();
    });
    stopBtn.addEventListener('click', stopSharing);

    // Optional: poll permission state regularly
    setInterval(checkPermission, 5000);
  </script>
</body>
</html>