Merge pull request #3 from kumitterer/main

Server-side calculations for JavaScript-free environments

index.php

@@ -4,6 +4,10 @@ header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");
 
+$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
+$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
+$parentUrl = dirname($currentUrl);
+
 // Get currency data from JSON
 $api_cg = json_decode(file_get_contents('coingecko.json'), true);
 
@@ -52,9 +56,22 @@ $lang = strtolower($lang);
 require_once "lang/{$lang}.php";
 
 $xmr_in = isset($_GET["in"]) ? strtoupper(htmlspecialchars($_GET["in"])) : 'EUR';
-$xmr_in_fiat = number_format($exchangeRates[$xmr_in], $xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU' ? 8 : 2);
+$xmr_amount = isset($_GET["xmr"]) ? floatval($_GET["xmr"]) : 1;
+$fiat_amount = isset($_GET["fiat"]) ? floatval($_GET["fiat"]) : '';
+$conversion_direction = isset($_GET["direction"]) ? intval($_GET["direction"]) : 0;
 
-$xmr_in_fiat = strtr($xmr_in_fiat, ",", " ");
+if ($conversion_direction == 0) {
+    $fiat_value = $xmr_amount * $exchangeRates[$xmr_in];
+    $xmr_value = $xmr_amount;
+} else {
+    $xmr_value = $fiat_amount / $exchangeRates[$xmr_in];
+    $fiat_value = $fiat_amount;
+}
+
+$fiat_value = number_format($fiat_value, ($xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU') ? 8 : 2);
+$xmr_value = number_format($xmr_value, 12);
+
+$fiat_value = strtr($fiat_value, ",", " ");
 
 // Order preferred currencies to the top
 foreach (array_reverse($preferred_currencies) as $currency) {
@@ -81,7 +98,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
 
     <meta property="og:title" content="<?php echo $page_title; ?>" />
     <meta property="og:description" content="<?php echo $meta_description; ?>" />
-    <meta property="og:image" content="img/mstile-310x150.png" />
+    <meta property="og:image" content="<?php echo $parentUrl; ?>/img/mstile-310x150.png" />
     <meta property="og:type" content="website" />
 
     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
@@ -143,20 +160,29 @@ foreach (array_reverse($preferred_currencies) as $currency) {
                 </div>
                 <hr class="gold" />
 
-                <div class="input-group">
+                <form method="get" action="">
+                    <div class="input-group mb-3">
                         <button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
-                    <input class="form-control" id="xmrInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="1">
+                        <input class="form-control" id="xmrInput" name="xmr" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="<?php echo $xmr_value; ?>">
                         <input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
                     </div>
 
-                <div class="equals-box">
+                    <div class="equals-box mb-3">
+                        <button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
+                            <span class="equals-text">&darr;</span>
+                        </button>
+                        <button type="button" class="btn btn-equals">
                             <span class="equals-text cursor-default">=</span>
+                        </button>
+                        <button id="convertFiatToXMR" type="submit" name="direction" value="1" class="btn btn-arrow">
+                            <span class="equals-text">&uarr;</span>
+                        </button>
                     </div>
 
-                <div class="fiatDiv input-group">
+                    <div class="fiatDiv input-group mb-3">
                         <button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
-                    <input class="form-control" id="fiatInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $xmr_in_fiat; ?>">
-                    <select class="input-group-text cursor-pointer" id="selectBox" aria-label="<?php echo $l_fiatSelect; ?>">
+                        <input class="form-control" id="fiatInput" name="fiat" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $fiat_value; ?>">
+                        <select class="input-group-text cursor-pointer" id="selectBox" name="in" aria-label="<?php echo $l_fiatSelect; ?>">
                             <?php
                             foreach ($currencies as $currency) {
                                 $selected = $currency == $xmr_in ? 'selected' : '';
@@ -166,6 +192,14 @@ foreach (array_reverse($preferred_currencies) as $currency) {
                             ?>
                         </select>
                     </div>
+                </form>
+
+                <noscript>
+                    <div class="alert alert-warning" role="alert">
+                        Looks like you have JavaScript disabled. You can still use this tool, but you won't be able to use the &#128203; buttons to automatically copy the results to your clipboard.<br />
+                        Use the &darr; button to convert XMR to fiat, or the &uarr; button to convert fiat to XMR.
+                    </div>
+                </noscript>
 
                 <hr class="gold" />
                 <small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
@@ -195,11 +229,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
         </div>
     </div>
 
-    <script>
-        var exchangeRates = <?php echo json_encode($exchangeRates); ?>;
-    </script>
     <script src="js/main.js"></script>
-
 </body>
 
 </html>

src/css/custom.css

@@ -51,6 +51,32 @@ input.form-control {
     color: #e9ecef;
     font-weight: 800;
     font-size: 42px;
+    padding-bottom: 1;
+}
+
+.btn-arrow {
+    border: 1px solid white;
+    border-radius: 10px;
+    font-size: 38px !important;
+    color: white;
+    padding: 0;
+    cursor: pointer;
+}
+
+.btn-arrow:hover {
+    border: 1px solid black;
+    color: black;
+}
+
+.btn-equals {
+    font-size: 38px !important;
+    color: white;
+    padding: 0;
+    cursor: default;
+}
+
+.btn-equals:hover {
+    color: black;
 }
 
 .equals-text {

src/js/main.js

@@ -14,12 +14,16 @@ console.log(tooltipList);
 
 let lastModifiedField = 'xmr';
 
+var exchangeRates = {};
+
 document.addEventListener('DOMContentLoaded', function () {
   const copyXMRBtn = document.getElementById('copyXMRBtn');
   const copyFiatBtn = document.getElementById('copyFiatBtn');
   const xmrInput = document.getElementById('xmrInput');
   const fiatInput = document.getElementById('fiatInput');
   const selectBox = document.getElementById('selectBox');
+  const convertXMRToFiatBtn = document.getElementById('convertXMRToFiat');
+  const convertFiatToXMRBtn = document.getElementById('convertFiatToXMR');
 
   // Add event listeners for the copy buttons
   copyXMRBtn.addEventListener('click', copyToClipBoardXMR);
@@ -62,6 +66,10 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 
+  // Hide the conversion buttons if JavaScript is enabled
+  convertXMRToFiatBtn.style.display = 'none';
+  convertFiatToXMRBtn.style.display = 'none';
+
   // Fetch updated exchange rates immediately, then every 5 seconds
   fetchUpdatedExchangeRates();
   setInterval(fetchUpdatedExchangeRates, 5000);

webpack.config.js

@@ -31,7 +31,7 @@ module.exports = {
       paths: glob.sync([
         path.join(__dirname, 'index.php')
       ]),
-      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow']
+      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
     })
   ]
 };