From 243cadd5d0c3b9c829ac2e86c6925b8e85bf2861 Mon Sep 17 00:00:00 2001
From: "Namhyeon, Go" <gnh1201@gmail.com>
Date: Tue, 25 Jun 2024 17:22:03 +0900
Subject: [PATCH] Update console.html

---
 console.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/console.html b/console.html
index 0f5f9d9..2db76e3 100644
--- a/console.html
+++ b/console.html
@@ -4,7 +4,8 @@
         <title>Caterpillar Proxy Web Console</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.42.0/css/jquery.terminal.min.css" rel="stylesheet"/>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.42.0/css/jquery.terminal.min.css" rel="stylesheet" type="text/css">
+        <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" type="text/css">
         <style type="text/css">/*<!--<![CDATA[*/
             body {
                 background: #2e8d36 url(https://pub-1a7a176eea68479cb5423e44273657ad.r2.dev/bg.jpg) no-repeat;
@@ -34,11 +35,13 @@
             <h1>Caterpillar Proxy Web Console</h1>
             <p>Download an worker script of <a href="https://github.com/gnh1201/caterpillar">Caterpillar Proxy</a>.</p>
             <div id="console"></div>
+            <div id="map"></div>
             <p><a href="https://github.com/gnh1201/caterpillar">Fork me. gnh1201/caterpillar (GitHub)</a></p>
         </main>
 
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.42.0/js/jquery.terminal.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.42.0/js/jquery.terminal.min.js" type="text/javascript" ></script>
+        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" type="text/javascript"></script>
         <script type="text/javascript">//<!--<![CDATA[
             var env = {
                 "target": "http://localhost/",
@@ -124,6 +127,25 @@
                         if (env.filename != null) {
                             download_text(env.filename, text);
                         }
+                        
+                        // method(relay_get_geolocation)
+                        if (env.method == "relay_get_geolocation") {
+                            var geodata = responseData.result.data;
+
+                            term.echo('', {
+                                finalize: function($div) {
+                                    $div.children().last().append($("#map").css("height", "160px"));
+                                    map.setView([geodata.lat, geodata.lon], 13);
+                                    var circle = L.circle([geodata.lat, geodata.lon], {
+                                        color: 'red',
+                                        fillColor: '#f03',
+                                        fillOpacity: 0.5,
+                                        radius: 500
+                                    }).addTo(map);
+                                    term.echo();
+                                }
+                            });
+                        }
                     },
                     error: function(xhr, status, error) {
                         term.echo(error);
@@ -254,6 +276,12 @@
                     checkArity: false
                 });
             });
+
+            var map = L.map('map');
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).addTo(map);
         //]]>--></script>
     </body>
 </html>