Work more on settings and update modal etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com> Co-authored-by: Wessel Tip <discord@go2it.eu>
2026-07-14 04:24:01 +02:00 · 2020-07-16 17:40:24 +01:00
parent d9a4c76a8e
commit f458a69781
14 changed files with 299 additions and 121 deletions
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -7,38 +7,22 @@ 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;
-      }
+      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;
+      default: photographer = 'Unknown'; 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
-  }  
+    document.getElementById('backgroundImage').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+  }

  async setBackground() {    
    const enabled = localStorage.getItem('offlineMode');
@@ -46,12 +30,13 @@ export default class Background extends React.Component {

    try { // First we try and get an image from the API...
      let requestURL;
-      if (await supportsWebP) requestURL = 'https://api.muetab.xyz/getImage?webp=true';
+      const enabled = localStorage.getItem('webp');
+      if (await supportsWebP && enabled === 'true') requestURL = 'https://api.muetab.xyz/getImage?webp=true';
      else requestURL = 'https://api.muetab.xyz/getImage?category=Outdoors';
      let data = await fetch(requestURL);
      data = await data.json(); 

-      document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('backgroundImage').style.backgroundImage = `url(${data.file})`; // Set the background
      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
--- a/src/components/Clock.jsx
+++ b/src/components/Clock.jsx
@@ -8,27 +8,44 @@ export default class Clock extends React.Component {
      date: '',
      ampm: '',
    };
+    this.timer = undefined;
  }
+  
+  startTime(time) {
+    this.timer = setTimeout(() => {
+      this.startTime();
+      const t = new Date(); // Get the current date 
+      const a = t.getHours();
+      let h = t.getHours(); // Get hours
+  
+      // Seconds 
+      let s = '';
+      const enabled = localStorage.getItem('seconds');
+      if (enabled === 'true') s = ':' + ('0' + t.getSeconds()).slice(-2);
+  
+      const twentyfour = localStorage.getItem('24hour');
+      if (twentyfour === 'true') {
+        // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`;
+        return this.setState({ 
+          date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`
+        }); 
+      } else {
+        if (h > 12) h = h - 12; // 12 hour support
+        // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`;

-  startTime() {
-    const t = new Date(); // Get the current date 
-    const a = t.getHours();
-    let h = t.getHours(); // Get hours
-    // const s = today.getSeconds();
-
-    if (h > 12) h = h - 12; // 12 hour support
-
-    this.setState({ 
-      date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}`, ampm: a >= 12 ? 'PM' : 'AM' 
-    }); // Set time
-
-    this.timeout = setTimeout(() => this.startTime(), 750); // Update the clock every 750 milliseconds
+        this.setState({ 
+          date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`, ampm: a >= 12 ? 'PM' : 'AM' 
+        }); // Set time
+        }
+  
+  
+    }, (1000 - Date.now() % 1000));
  }

  componentDidMount() {
    const enabled = localStorage.getItem('time');
    if (enabled === 'false') return;
-    this.startTime();
+    this.startTime(0);
  }

  render() {
--- a/src/components/Greeting.jsx
+++ b/src/components/Greeting.jsx
@@ -9,6 +9,22 @@ export default class Greeting extends React.Component {
    };
 }

+  doEvents(t, g) {
+    const enabled = localStorage.getItem('events');
+    if (enabled === 'false') return;
+
+    const m = t.getMonth(); // Current month
+    const d = t.getDate(); // Current Date
+
+    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    return {
+      g,
+      t
+    }
+  }
+
  getGreeting() {
    const t = new Date(); // Current date object
    
@@ -20,12 +36,7 @@ export default class Greeting extends React.Component {
    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"

    // Events
-    const m = t.getMonth(); // Current month
-    const d = t.getDate(); // Current Date
-
-    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
-    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
-    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    this.doEvents(t, g);

    this.setState({ 
      greeting: g 
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,7 @@
 //* Imports
 import RefreshIcon from '@material-ui/icons/Refresh';
 import Gear from '@material-ui/icons/Settings';
+import NewReleases from '@material-ui/icons/NewReleases';
 import React from 'react';

 export default class Navbar extends React.Component {
@@ -8,11 +9,14 @@ export default class Navbar extends React.Component {
    return (
      <div className='navbar-container'>
        <div className='navbar1'>
-          <Gear className='settings-icon' onClick={this.props.modalOpen} />
+          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
        </div>
        <div className='navbar2'>
            <RefreshIcon className='refreshicon' onClick={() => window.location.reload()} />
        </div>
+        <div className='navbar3'>
+            <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
+        </div>
      </div>
    );
  }
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ExpandMore from '@material-ui/icons/ExpandMore';

 export default class Settings extends React.Component {
  setItem(key, value) {
@@ -15,93 +16,131 @@ export default class Settings extends React.Component {
    console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
  }

+  toggleExtra(element, element2) {
+    (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none';
+    (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
+  }
+
+  componentDidMount() {
+    for (const key of Object.keys(localStorage)) {
+      let value = localStorage.getItem(key);
+      const tag = document.getElementById(`${key}Status`);
+      
+      if (tag) {
+        switch (value) {
+          case 'true': value = true; break;
+          case 'false': value = false; break;
+          default: value = true; 
+        }
+
+        tag.checked = value;
+      }
+    }
+  }
+
  render() {
    return <div className="content">
-      <a class="closeModal" onClick={this.props.modalClose}>&times;</a>
+      <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
      <h1>Settings</h1>
      <p>Edit different components to make Mue your new tab.</p>
-
      <div className='columns'>
-        <div className='section'>
-          <h4>Time</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('time')} />
-            <span class="slider round"></span>
+          <div className='group'>
+          <div className='section'>
+            <h4>Time</h4>     
+            <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('time')} id='timeStatus' />
+            <span className="slider round"></span>
          </label>
+          <li className="extraSettings">
+            <ul>
+            <input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
+            <label for="1">Seconds</label>
+            </ul>
+            <ul>
+            <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
+            <label for="2">24 Hour</label>
+            </ul>
+          </li>
+        </div>
        </div>
        <div className='section'>
          <h4>Greeting</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('greeting')} />
-            <span class="slider round"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('greeting')} id='greetingStatus' />
+            <span className="slider round"></span>
          </label>
+          <li className="extraSettings">
+            <ul>
+            <input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
+            <label for="3">Events</label>
+            </ul>
+          </li>
        </div>
        <div className='section'>
          <h4>Quote</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('quote')} />
-            <span class="slider"></span>
+          <label className="switch">
+            <input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
+            <span className="slider"></span>
          </label>
        </div>
        <div className='section'>
          <h4>Background</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('background')}  />
-            <span class="slider"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('background')} id='backgroundStatus'  />
+            <span className="slider"></span>
          </label>
+          <li className="extraSettings">
+            <ul>
+              <p>Adjust Blur</p>
+            </ul>
+            <ul>
+              <input className="range" type="range" min="1" max="100" />
+            </ul>
+            <ul>
+              <p>Adjust Brightness</p>
+            </ul>
+            <ul>
+              <input className="range" type="range" min="1" max="100" />
+            </ul>
+          </li>
        </div>
        <div className='section'>
          <h4>Search Bar</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('searchBar')}  />
-            <span class="slider"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('searchBar')} id='searchBarStatus'  />
+            <span className="slider"></span>
          </label>
+          <li className="extraSettings">
+            <ul>
+            <label for="4">Search Engine</label>
+            <select name="4">
+              <option value="duckduckgo">DuckDuckGo</option>
+              <option value="google">Google</option>
+              <option value="bing">Bing</option>
+              <option value="custom">Custom</option>
+            </select>
+            </ul>
+          </li>
        </div>
        <div className='section'>
          <h4>Offline Mode</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('offlineMode')}  />
-            <span class="slider"></span>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('offlineMode')} id='offlineModeStatus'  />
+            <span className="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 className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('webp')} id='webpStatus'  />
+            <span className="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> 
-        <button onClick={()=>this.setItem('time')}>Toggle Time</button>
-      <h4 style={{ flex: 2 }}>Search Bar</h4>
-      <button onClick={()=>this.setItem('searchbar')}>Toggle Searchbar</button>
-      <h4 style={{ flex: 2 }}>Greeting <span id="greetingStatus">{localStorage.getItem('greeting') === 'true' ? 'ON' :
-        'OFF'}</span></h4>
-      <button onClick={()=>this.setItem('greeting')}>Greeting Toggle</button>
-      <h4 style={{ flex: 2 }}>Quote <span id="quoteStatus">{localStorage.getItem('quote') === 'true' ? 'ON' :
-          'OFF'}</span>     <button onClick={()=>this.setItem('quote')}>Quote Toggle</button>
-          </h4>
-      <h4 style={{ flex: 2 }}>Background <span id="backgroundStatus">{localStorage.getItem('background') === 'true' ? 'ON'
-          : 'OFF'}</span></h4>
-      <button onClick={()=> this.setItem('background')}>Background Toggle</button>
-
-      <label class="switch">
-        <input type="checkbox" />
-        <span class="slider round"></span>
-      </label>
-
-      <label class="switch">
-        <input type="checkbox"  checked />
-        <span class="slider round"></span>
-      </label>
-      {/* <label className="switch">
-        <input type="checkbox" checked></input>
-          <span className="slider round"></span>
-        </label> */} 
-
+        <button className="apply" onClick={() => window.location.reload()}>Apply</button>
      </div>
    </div>;
  }
--- a/src/components/Update.jsx
+++ b/src/components/Update.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Update extends React.Component {
+  render() {
+    return <div className="content">
+              <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
+              <h1>Update</h1>
+      <p>Edit different components to make Mue your new tab.</p>
+    </div>;
+  }
+}