wallet editor, page loading timer

adding wallet editor adding page loading timer
HerrErde · May 27, 2023 · 6b4f5d3 · 6b4f5d3
1 parent 3fd6c56
commit 6b4f5d3
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 63 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -196,7 +196,7 @@ input[type='checkbox'].item {
 }
 
 .buttons {
-  padding-bottom: 40px;
+  padding-bottom: 5px;
 }
 .btn-upload-input {
   position: relative;

diff --git a/editor/wallet-editor.php b/editor/wallet-editor.php
@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+<html lang="en">
 <?php
 $required_params = [
   "hoverboards",
@@ -8,91 +10,103 @@
   "eventcoins",
 ];
 ?>
-
-<!DOCTYPE html>
-<html lang="en">
   <head>
-    <title>Code for the wallet.json file</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="../assets/js/script.js"></script>
+    <title>Edit your wallet.json file</title>
     <?php require "../require/connect.php"; ?>
+    <?php require "../require/buttons.php"; ?>
   </head>
 
   <body>
     <header>
-      <h1>Code for the Wallet</h1>
+      <h1>Edit your Wallet</h1>
       <p id="title">
-        Download or copy the generated code, find the file wallet.json in the folder
-        "profile" and paste it there.
+        Upload your wallet.json file (unencrypted) and then edit away, <br>after that just download or copy the file into the folder "profile".
       </p>
     </header>
 
-  <div class="btn btn-upload-input">
-    <span class="btn-upload-input-title">
-      <i class="fa fa-upload"></i>Choose File</span>
-    <input type="file" name="jsonFile" id="jsonFileInput" accept=".json" />
-  </div>
+    <div class="btn btn-upload-input" >
+        <span class="btn-upload-input-title">
+            <i class="fa fa-upload"></i>Choose File
+        </span>
+        <input type="file" name="jsonFile" id="jsonFileInput" accept=".json" />
+    </div>
 
+    <div style="display: flex;">
+      <div style="flex: 1; justify-content: flex-start;">
+        <textarea id="textarea" rows="35" cols="45" readonly></textarea>
+      </div>
+      <div style="flex: 1; justify-content: flex-end;">
+        <form id="fileData" method="get" action="../generator/wallet.php">
+          <legend>Game data</legend>
+          <?php foreach ($required_params as $param): ?>
+            <label><?php echo ucfirst($param); ?>:</label><br />
+            <input type="number" name="<?php echo $param; ?>" id="<?php echo $param; ?>" required min="0" max="2147483647" />
+            <span class="required">*</span><br>
+          <?php endforeach; ?>
+          <input type="submit" class="btn btn-success" />
+        </form>
+      </div>
+    </div>
 
-<div>
-    <textarea id="textarea" rows="30" cols="30" readonly></textarea>
-</div>
-<?php require "../require/down-copy.php"; ?>
-
-  </form>
     <script>
-        // Function to read and display JSON contents in textarea
+      // Function to read and display JSON contents in textarea
         function readJSONFile(input) {
           if (input.files && input.files[0]) {
             var reader = new FileReader();
             reader.onload = function (e) {
               document.getElementById('textarea').value = e.target.result;
+
+              // Parse JSON and populate input fields
+              var jsonData = JSON.parse(e.target.result);
+              var currencies = JSON.parse(jsonData.data).currencies;
+
+              var requiredParams = <?php echo json_encode($required_params); ?>;
+              requiredParams.forEach(function (param, index) {
+                var currencyId = index + 1;
+                var value = currencies[currencyId]?.value || '';
+                document.getElementById(param).value = value;
+              });
             };
             reader.readAsText(input.files[0]);
           }
         }
 
-        // Add event listener to file input
-        document
-          .querySelector('#jsonFileInput')
-          .addEventListener('change', function () {
-            var fileName = this.files[0].name;
-            if (fileName !== 'wallet.json') {
-              alert('Please select a file named "wallet.json"');
-              this.value = ''; // reset the file input
-              document.getElementById('textarea').value = ''; // reset the textarea
-              $('.btn-upload-input-title').html(
-                '<i class="fa fa-upload fw"></i>Choose File'
-              ); // reset the button text
-            } else {
-              readJSONFile(this);
-              $('.btn-upload-input-title').text(fileName); // set the button text to the selected file name
-            }
-          });
 
-        // script.js
-        ('use strict');
-        $(function () {
-          var btnTitle = $('.btn-upload-input-title').html();
-          var btnTitleHtml = $.parseHTML(btnTitle);
-          $('.btn-upload-input input:file').change(function () {
-            console.log('im clicked' + this.files.length);
-            if (this.files && this.files.length >= 1) {
-              var file = this.files[0];
-              var reader = new FileReader();
-              // Set preview image into the popover data-content
-              reader.onload = function (e) {
-                $('.btn-upload-input-title').text(file.name);
-              };
-              reader.readAsDataURL(file);
-            } else {
-              $('.btn-upload-input-title').html(btnTitle);
-            }
-          });
+       // Add event listener to file input
+       document.querySelector('#jsonFileInput').addEventListener('change', function () {
+          var fileName = this.files[0].name;
+          if (fileName !== 'wallet.json') {
+            alert('Please select a file named "wallet.json"');
+            this.value = ''; // Reset the file input
+            document.getElementById('textarea').value = ''; // Reset the textarea
+            $('.btn-upload-input-title').html('<i class="fa fa-upload fw"></i>Choose File'); // Reset the button text
+          } else {
+            readJSONFile(this);
+            $('.btn-upload-input-title').text(fileName); // Set the button text to the selected file name
+          }
         });
-      </script>
-    <?php require "../require/buttons.php"; ?>
-    <br /><br /><br />
+
+          ('use strict');
+          $(function () {
+            var btnTitle = $('.btn-upload-input-title').html();
+            var btnTitleHtml = $.parseHTML(btnTitle);
+            $('.btn-upload-input input:file').change(function () {
+              if (this.files && this.files.length >= 1) {
+                var file = this.files[0];
+                var reader = new FileReader();
+                // Set preview image into the popover data-content
+                reader.onload = function (e) {
+                  $('.btn-upload-input-title').text(file.name);
+                };
+                reader.readAsDataURL(file);
+              } else {
+                $('.btn-upload-input-title').html(btnTitle);
+              }
+            });
+          });
+    </script>
+    <br>
+    <br><br><br>
     <?php require "../require/footer.php"; ?>
   </body>
 </html>
diff --git a/page/wallet.php b/page/wallet.php
@@ -72,12 +72,12 @@
        >
         <span class="required">*</span><br>
       </fieldset>
-      <!--       <div class="copy" style="display: inline-block">
+      <div class="copy" style="display: inline-block">
         <a class="fa fa-pen-to-square fa-2x"
           style="cursor: pointer;"
           href="../editor/wallet-editor.php">
         </a>
-      </div> -->
+      </div>
       <input type="submit" class="btn btn-success">
     </form>
   </body>

diff --git a/require/footer.php b/require/footer.php
@@ -1,4 +1,15 @@
 <footer>
+<p>
+<?php
+// Calculate the page loading time in milliseconds
+$endTime = microtime(true);
+$pageLoadTime = ($endTime - $_SERVER["REQUEST_TIME_FLOAT"]) * 1000;
+
+// Display the page loading time
+echo "Page loaded in " . round($pageLoadTime, 2) . " ms";
+?>
+</P>
+
   <p>
     <i class="fab fa-github"></i>
     <a