it works now

2026-07-17 14:04:09 +02:00 · 2020-07-16 11:45:48 +01:00
parent 0c6022aa2d
commit 771b374a0b
3 changed files with 86 additions and 49 deletions
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -4,7 +4,46 @@ import supportsWebP from 'supports-webp';


 export default class Background extends React.Component {
+  doOffline() {
+    const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
+    document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+    let photographer; // Photographer credit
+    let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
+    if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
+    else switch (photo) {
+      default: {
+        photographer = 'Unknown';
+        break;
+      }
+      case 1: {
+        photographer = 'Tirachard Kumtanom';
+        break;
+      }
+      case 4: {
+        photographer = 'Sohail Na';
+        break;
+      }
+      case 7: {
+        photographer = 'Miriam Espacio';
+        break;
+      }
+      case 10: {
+        photographer = 'NO NAME';
+        break;
+      }
+      case 20: {
+        photographer = 'Fabian Wiktor';
+        break;
+      }
+    }
+    document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
+    document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+  }  
+
  async setBackground() {    
+    const enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+
    try { // First we try and get an image from the API...
      let requestURL;
      if (await supportsWebP) requestURL = 'https://api.muetab.xyz/getImage?webp=true';
@@ -16,39 +55,7 @@ export default class Background extends React.Component {
      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
      document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
    } catch (e) { // ..and if that fails we load one locally
-      const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
-      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
-      let photographer; // Photographer credit
-      let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
-      if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
-      else switch (photo) {
-        default: {
-          photographer = 'Unknown';
-          break;
-        }
-        case 1: {
-          photographer = 'Tirachard Kumtanom';
-          break;
-        }
-        case 4: {
-          photographer = 'Sohail Na';
-          break;
-        }
-        case 7: {
-          photographer = 'Miriam Espacio';
-          break;
-        }
-        case 10: {
-          photographer = 'NO NAME';
-          break;
-        }
-        case 20: {
-          photographer = 'Fabian Wiktor';
-          break;
-        }
-      }
-      document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+      this.doOffline();
    }
  }

--- a/src/components/Quote.jsx
+++ b/src/components/Quote.jsx
@@ -11,27 +11,30 @@ export default class Quote extends React.Component {
    };
  }

+  doOffline() {
+    const quote = Quotes.random(); // Get a random quote from our local package
+    this.setState({ 
+      quote: '"' + quote.quote + '"', 
+      author: quote.author 
+    }); // Set the quote
+  }
+
  async getQuote() {
+    const enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+    
    try { // First we try and get a quote from the API...
      let data = await fetch('https://api.muetab.xyz/getQuote');
      data = await data.json();
      if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes
-        const quote = Quotes.random(); // Get a random quote from our local package
-        return this.setState({ 
-          quote: '"' + quote.quote + '"', 
-          author: quote.author 
-        }); // Set the quote
+        this.doOffline();
      }
      this.setState({ 
        quote: '"' + data.quote + '"', 
        author: data.author 
      });
    } catch (e) { // ..and if that fails we load one locally
-      const quote = Quotes.random(); // Get a random quote from our local package
-      this.setState({ 
-        quote: '"' + quote.quote + '"', 
-        author: quote.author 
-      }); // Set the quote
+      this.doOffline();
    }
  }

--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -11,7 +11,7 @@ export default class Settings extends React.Component {
    }

    localStorage.setItem(key, val);
-    document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
+    //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
    console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
  }

@@ -25,26 +25,53 @@ export default class Settings extends React.Component {
        <div className='section'>
          <h4>Time</h4>
          <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('time')} />
+            <span class="slider round"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Greeting</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('greeting')} />
            <span class="slider round"></span>
          </label>
        </div>
        <div className='section'>
          <h4>Quote</h4>
          <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('quote')} />
            <span class="slider"></span>
          </label>
        </div>
        <div className='section'>
          <h4>Background</h4>
          <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('background')}  />
            <span class="slider"></span>
          </label>
        </div>
-        <button class="apply">Apply</button>
-        <p>You need to refresh the page to see your changes!</p>
+        <div className='section'>
+          <h4>Search Bar</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('searchBar')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Offline Mode</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('offlineMode')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Enable WebP (experimental)</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('webp')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <button class="apply" onClick={() => window.location.reload()}>Apply</button>
      {/*
        <h4 style={{ flex: 2 }}>Time <span id="timeStatus">{localStorage.getItem('time') === 'true' ? 'ON' : 'OFF'}</span>
        </h4>