Add &ipns= EXPLORE button

2023-10-19 17:36:02 +02:00 · 2023-10-19 17:36:02 +02:00 · 3ef8159197
parent 572f47b5c8
commit 3ef8159197
9 changed files with 317 additions and 59 deletions
--- a/earth/Umap.html
+++ b/earth/Umap.html
@ -11,13 +11,34 @@
    width: 100%;
    height: 100%;
 }
+
+.button-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 50%;
+    height: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button {
+    background-color: #3498db;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
 </style>
 </head>
 <body>
    <div id="map" class="map-container"></div>
-<br>
+    <!-- Add a button container if sectorIPNS is not empty -->
+    <div class="button-container" id="buttonContainer"></div>

 <script src="leaflet.js"></script>
+
 <script>
    // const desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
    const tileSizeInPixels = 256;
@ -42,6 +63,10 @@
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+
    const defaultSouthWestLat = 0.00;
    const defaultSouthWestLon = 0.00;
    const defaultOffsetDegrees = 10.00; // 10° offset
@ -90,6 +115,23 @@
    attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
    }).addTo(map);

+    const buttonContainer = document.getElementById('buttonContainer');
+
+    // Check if sectorIPNS is not empty
+    if (sectorIPNS !== '') {
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+    }
+
  </script>
 </body>
 </html>
--- a/earth/Usat.html
+++ b/earth/Usat.html
@ -11,11 +11,31 @@
    width: 100%;
    height: 100%;
 }
+
+.button-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 50%;
+    height: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button {
+    background-color: #3498db;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
 </style>
 </head>
 <body>
    <div id="map" class="map-container"></div>
-<br>
+    <!-- Add a button container if sectorIPNS is not empty -->
+    <div class="button-container" id="buttonContainer"></div>

 <script src="leaflet.js"></script>
  <script>
@ -42,6 +62,10 @@
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+
    const defaultSouthWestLat = 0.00;
    const defaultSouthWestLon = 0.00;
    const defaultOffsetDegrees = 10.00; // 10° offset
@ -90,6 +114,23 @@
    attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
    }).addTo(map);

+    const buttonContainer = document.getElementById('buttonContainer');
+
+    // Check if sectorIPNS is not empty
+    if (sectorIPNS !== '') {
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+    }
+
  </script>
 </body>
 </html>
--- a/earth/index.html
+++ b/earth/index.html
@ -88,6 +88,15 @@
    margin-top: -12.5px;
    cursor: pointer;
 }
+
+.button {
+    background-color: #3498db;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+
  </style>

    <link rel="stylesheet" href="earth.css">
@ -97,7 +106,7 @@

  <body>
    <h1>♥ U Planet ♥</h1>
-        <a href="/ipfs/QmbRCHkj93pJAeBBCmxznxeLTw4dKQUu3FhS3EfjPXCbSU">LOGIN</a>
+        <a href="login/">LOGIN</a>

    <div id="container">
        <br><br>
@ -132,5 +141,45 @@
          <textarea id="example_code" onclick="this.focus();this.select();"></textarea>
        </div>
 -->
+  <script>
+
+    // Function to extract URL parameters
+    function getUrlParameter(name) {
+      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+      const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+      const results = regex.exec(location.search);
+      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    }
+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+    if (sectorIPNS !== '') {
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container'
+        buttonContainer.style.position = 'absolute';
+        buttonContainer.style.bottom = '0px';
+        buttonContainer.style.left = '0px';
+        buttonContainer.style.width = '200px';
+        buttonContainer.style.height = '150px';
+        buttonContainer.style.zIndex = '1001';
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.flexDirection = 'column';
+        buttonContainer.style.alignItems = 'center';
+        buttonContainer.style.justifyContent = 'center';
+
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+        document.body.appendChild(buttonContainer);
+    }
+</script>

 </body></html>
--- a/earth/login/_STATION_
+++ b/earth/login/_STATION_
--- a/earth/login/favicon.ico
+++ b/earth/login/favicon.ico
--- a/earth/login/index.html
+++ b/earth/login/index.html
@ -149,20 +149,30 @@ a {
                    <p><input type="hidden" id="g1pub" value="2L8vaYixCf97DMT8SistvQFeBj7vb6RQL7tvwyiv1XVH"/></p>
                    <div id="appname">
                        <label>
-                            <input type="radio" id="r0" name="appname" value="login">
+                            <input type="radio" id="q1" name="appname" value="login">
                            <b>LOGIN</b>
                        </label>
                        <label>
-                            <input type="radio" id="r5" name="appname" value="logout" checked="checked">
+                            <input type="radio" id="q2" name="appname" value="logout" checked="checked">
                            <b>LOGOUT</b>
                        </label>
                    </div>
                    <strong><div id="resu"></div></strong>
-                    <p> <h2>Scan G1Card</h2> </p>
+                    <p> <h2>Scan AstroID</h2> </p>
                                                                            <h1><div id="countdown">___</div></h1>

                    <p><a href="https://opencollective.com/monnaie-libre/" target="funding">- (^‿‿^) -</a></p>
-
+<!--
+<br>or enter<br>
+<form id="formlink" action="http://127.0.0.1:1234" method="GET" enctype="application/x-www-form-urlencoded">
+        SECRET 1 : (EMAIL) <input name='salt' value='0'>
+        SECRET 2 : (8 DIGIT PASS)<input name='pepper' value='0'>
+        <br>
+         LOGIN : <input type="radio" id="s1" name="login" value="login">
+         LOGOUT : <input type="radio" id="s2" name="logout" value="logout" checked="checked">
+                 <input type='submit' value='OK'>
+</form>
+-->
                </div>
            </div>
            <div id="console"><a href="_STATION_" target="aframe">CONSOLE</a>
@ -185,6 +195,7 @@ a {
    // Create the "station" variable with the specified format
    var station = protocol + "://" + modifiedURL;

+
        async function fetchAstroport(myURL) {
          try {

@ -227,13 +238,14 @@ a {
                var appname = document.querySelector('input[name="appname"]:checked').value;

                if ( appname == 'login' || appname == 'logout' ) {
-                    var amount = prompt("Saisir EMAIL:");
+                    // var amount = prompt("Saisir EMAIL:");
+                    var amount = "UPlanet";
                }

                // GET PASS TO DECODE PGP
                var oldpass = document.getElementById("PASS").value;
                if ( oldpass == 'PASS') {
-                    var pass = prompt("Saisir PASS:");
+                    var pass = prompt("Saisir PIN:");
                } else {
                    var pass = oldpass;
                }
@ -241,21 +253,6 @@ a {
                // PREVIOUS G1PUB SCAN
                var g1pub = document.getElementById("g1pub").value;

-                // APPNAME : DATA COLLECT & ARRANGE
-                if ( appname == 'pay') {
-                    var amount = prompt("MONTANT (Ğ1) ?");
-                    alert('PAY TO ' + g1pub + ' = ' +  amount);
-                }
-
-                if ( appname == 'friend') {
-                    var amount = prompt("Entre 1 et 5 (★) ?");
-                    alert( amount + '★ > ' + g1pub );
-                }
-
-                if ( amount == 'undefined' || amount == '' ) {
-                    var amount = document.getElementById("g1pub").value;
-                }
-
                var myU = station + '/?qrcode=' + content +'&pass=' + pass + '&' + appname + '=' + amount + '&g1pub=' + g1pub ;
                console.log(myU);

--- a/earth/map_render.html
+++ b/earth/map_render.html
@ -27,6 +27,14 @@
        width: 100%;
        height: 100%;
    }
+
+    .button {
+        background-color: #3498db;
+        color: #fff;
+        padding: 10px 20px;
+        border: none;
+        cursor: pointer;
+    }
 </style>

 </head>
@ -35,7 +43,6 @@
    <div id="coordinates-display"></div> <!-- Coordinates display element -->
    <div id="map" style="width: 100%; height: 100vh;"></div>
 </div>
-<br>

 <script src="leaflet.js"></script>

@ -64,6 +71,37 @@
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+    if (sectorIPNS !== '') {
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container'
+        buttonContainer.style.position = 'absolute';
+        buttonContainer.style.bottom = '10px';
+        buttonContainer.style.left = '10px';
+        buttonContainer.style.width = '200px';
+        buttonContainer.style.height = '150px';
+        buttonContainer.style.zIndex = '1001';
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.flexDirection = 'column';
+        buttonContainer.style.alignItems = 'center';
+        buttonContainer.style.justifyContent = 'center';
+
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+        document.body.appendChild(buttonContainer);
+    }
+
    const defaultSouthWestLat = 0.00;
    const defaultSouthWestLon = 0.00;
    const defaultOffsetDegrees = 10.00; // 10° offset
@ -166,16 +204,6 @@ if (deg <= 0.01) {

  container.appendChild(button);

-  //~ const link = document.createElement('a');
-  //~ link.href = 'https://ipfs.copylaradio.com/ipfs/QmXom7iUq7G9Z1eiuckAQ1B7tkYfYGKnWhh3kUaKBd3ct4';
-  //~ link.target = 'pp';
-  //~ link.textContent = '>> PRINT PASSPORT <<';
-  //~ link.style.fontSize = '24px'; // Customize the font size
-  //~ link.style.textDecoration = 'none'; // Remove underline from the link
-  //~ link.style.marginBottom = '30px'; // Add some space between the link and the button
-
-  //~ container.appendChild(link);
-
  document.body.appendChild(container);

 } else {
@ -225,6 +253,7 @@ document.getElementById('map-container').addEventListener('click', (event) => {
      }
    });

+/////////////////

  </script>
 </body>
--- a/earth/sat_render.html
+++ b/earth/sat_render.html
@ -27,15 +27,38 @@
        width: 100%;
        height: 100%;
    }
+
+    .button-container {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 50%;
+        height: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+    }
+
+    .button {
+        background-color: #3498db;
+        color: #fff;
+        padding: 10px 20px;
+        border: none;
+        cursor: pointer;
+        z-index: 1000;
+    }
 </style>

 </head>
 <body>
+
 <div id="map-container" style="position: relative;">
+    <div class="button-container" id="buttonContainer"></div>
    <div id="coordinates-display"></div> <!-- Coordinates display element -->
    <div id="map" style="width: 100%; height: 100vh;"></div>
 </div>
-<br>
+

 <script src="leaflet.js"></script>

@ -64,6 +87,37 @@
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+    if (sectorIPNS !== '') {
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container'
+        buttonContainer.style.position = 'absolute';
+        buttonContainer.style.bottom = '10px';
+        buttonContainer.style.left = '10px';
+        buttonContainer.style.width = '200px';
+        buttonContainer.style.height = '150px';
+        buttonContainer.style.zIndex = '1001';
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.flexDirection = 'column';
+        buttonContainer.style.alignItems = 'center';
+        buttonContainer.style.justifyContent = 'center';
+
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+        document.body.appendChild(buttonContainer);
+    }
+
    const defaultSouthWestLat = 0.00;
    const defaultSouthWestLon = 0.00;
    const defaultOffsetDegrees = 10.00; // 10° offset
@ -209,7 +263,6 @@ document.getElementById('map-container').addEventListener('click', (event) => {
  }
 });
 /////////////////
-
  </script>
 </body>
 </html>
--- a/earth/welcome.html
+++ b/earth/welcome.html
@ -8,25 +8,72 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="leaflet.css">
  <style>
+    #map {
+      width: 100%;
+      height: 100vh;
+    }
+
    .clickable-area {
      fill-opacity: 0.2; /* Adjust the opacity as needed */
      fill: #0074d9; /* Adjust the color as needed */
      stroke: #001f3f;
    }
+
+    .button {
+        background-color: #3498db;
+        color: #fff;
+        padding: 10px 20px;
+        border: none;
+        cursor: pointer;
+    }
 </style>

  <script src="leaflet.js"></script>
-  <style>
-    #map {
-      width: 100%;
-      height: 100vh;
-    }
-  </style>
+
 </head>
 <body>
  <div id="map"></div>

  <script>
+
+    // Function to extract URL parameters
+    function getUrlParameter(name) {
+      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+      const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+      const results = regex.exec(location.search);
+      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    }
+    const defaultIPNS = '';
+    const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
+    console.log('sectorIPNS: /ipns/', sectorIPNS);
+    if (sectorIPNS !== '') {
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container'
+        buttonContainer.style.position = 'absolute';
+        buttonContainer.style.bottom = '0px';
+        buttonContainer.style.left = '0px';
+        buttonContainer.style.width = '200px';
+        buttonContainer.style.height = '150px';
+        buttonContainer.style.zIndex = '1001';
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.flexDirection = 'column';
+        buttonContainer.style.alignItems = 'center';
+        buttonContainer.style.justifyContent = 'center';
+
+        const button = document.createElement('button');
+        button.innerText = 'EXPLORE';
+        button.className = 'button';
+
+        // Add an event listener to the button
+        button.addEventListener('click', function() {
+            window.open( '/ipns/'+ sectorIPNS, "AstroTab");
+        });
+
+        // Append the button to the button container
+        buttonContainer.appendChild(button);
+        document.body.appendChild(buttonContainer);
+    }
+
  // Set up initial variables
 const tileSize = 10; // 10° interval
 const gridSize = 36;