soon

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com> Co-authored-by: Wessel Tip <discord@go2it.eu>
2026-07-13 20:13:47 +02:00 · 2020-07-17 13:37:33 +01:00
parent 298a7da3b7
commit 0464afea27
13 changed files with 186 additions and 146 deletions
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -2,7 +2,6 @@
 import React from 'react';
 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
@@ -20,8 +19,8 @@ export default class Background extends React.Component {
      default: photographer = 'Unknown'; break;
    }

+    document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(../offline-images/${photo}.jpeg)`); // Set background and blur etc
    document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-    document.getElementById('backgroundImage').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
  }

  async setBackground() {    
@@ -36,7 +35,7 @@ export default class Background extends React.Component {
      let data = await fetch(requestURL);
      data = await data.json(); 

-      document.getElementById('backgroundImage').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
      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
@@ -1,14 +1,14 @@
-//* Imports
 import React from 'react';

 export default class Clock extends React.Component {
  constructor(...args) {
    super(...args);
+
+    this.timer = undefined;
    this.state = {
      date: '',
-      ampm: '',
+      ampm: ''
    };
-    this.timer = undefined;
  }
  
  startTime(time = localStorage.getItem('seconds') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
@@ -25,8 +25,9 @@ export default class Clock extends React.Component {
          date: `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`
        }); 
      } else {
+        // 12 hour support
        let hours = now.getHours();
-        if (hours > 12) hours -= 12; // 12 hour support
+        if (hours > 12) hours -= 12;

        this.setState({ 
          date: `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`,
--- a/src/components/Greeting.jsx
+++ b/src/components/Greeting.jsx
@@ -1,46 +1,52 @@
-//* Imports
 import React from 'react';

 export default class Greeting extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
-        greeting: ''
+      greeting: ''
    };
 }

-  doEvents(t, g) {
+  doEvents(time, message) {
    const enabled = localStorage.getItem('events');
-    if (enabled === 'false') return;
+    if (enabled === 'false') return message;

-    const m = t.getMonth(); // Current month
-    const d = t.getDate(); // Current Date
+    // Get current month & day
+    const m = time.getMonth(); // Current month
+    const d = time.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
-    }
+    if (m === 11 && d === 25) message = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 0 && d === 1) message = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 9 && d === 31) message = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    
+    return message;
  }

  getGreeting() {
-    const t = new Date(); // Current date object
-    
-    // Normal
-    const h = t.getHours(); // Current hour
+    const now = new Date();
+    const hour = now.getHours();

-    let g = 'Good evening'; // Set the default greeting string to "Good evening"	
-    if (h < 12) g = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
-    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
+    let message = 'Good evening'; // Set the default greeting string to "Good evening"	
+    if (hour < 12) message = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
+    else if (hour < 18) message = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"

    // Events
-    this.doEvents(t, g);
+    message = this.doEvents(now, message);

+    // Name
+    let name = '';
+    let data = localStorage.getItem('greetingName');
+
+    if (typeof data === 'string') {
+      data = data.replace(/\s/g, '');
+      if (data.length > 0) name = `, ${data}`;
+    }
+
+    // Set the state to the greeting string
    this.setState({ 
-      greeting: g 
-    }); // Set the state to the greeting string
+      greeting: `${message}${name}`
+    });
  }

  componentDidMount() {
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,12 +1,24 @@
 //* Imports
 import React from 'react';

-// TODO: Add option to change search engine
 export default class Search extends React.Component {
  render() {
+    const enabled = localStorage.getItem('searchbar');
+    if (enabled === 'false') return (<div></div>);
+
+    const searchEngine = localStorage.getItem('searchEngine');
+    let url;
+
+    switch (searchEngine) {
+      case 'duckduckgo': url = 'https://duckduckgo.com'; break;
+      case 'google': url = 'https://google.com/search'; break;
+      case 'bing': url = 'https://bing.com/search'; break;
+      default: url = 'https://duckduckgo.com'; break;
+    }
+
    return (
      <div id='searchBar' className='searchbar'>
-        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/'> 
+        <form id='searchBar' className='searchbarform' action={url}> 
            <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
            <div className='blursearcbBG'/>
          </form>
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -21,6 +21,12 @@ export default class Settings extends React.Component {
    (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
  }

+  saveStuff() {
+    localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
+    localStorage.setItem('greetingName', document.getElementById('greetingName').value);
+    window.location.reload();
+  }
+
  componentDidMount() {
    for (const key of Object.keys(localStorage)) {
      let value = localStorage.getItem(key);
@@ -55,17 +61,17 @@ export default class Settings extends React.Component {
          <li className="extraSettings">
            <ul>
            <input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
-            <label for="1">Seconds</label>
+            <label htmlFor="1">Seconds</label>
            </ul>
            <ul>
            <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
-            <label for="2">24 Hour</label>
+            <label htmlFor="2">24 Hour</label>
            </ul>
          </li>
        </div>
        </div>
-        <div className='section'>
-          <h4>Greeting</h4>
+        <div style={{ "lineHeight": "1px" }} className='section'>
+          <h4>Greeting</h4>       
          <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' />
@@ -74,7 +80,11 @@ export default class Settings extends React.Component {
          <li className="extraSettings">
            <ul>
            <input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
-            <label for="3">Events</label>
+            <label htmlFor="3">Events</label>
+            </ul>
+            <ul>
+              <p>Name for greeting</p>
+              <input type='text' id='greetingName'></input>
            </ul>
          </li>
        </div>
@@ -94,16 +104,10 @@ export default class Settings extends React.Component {
          </label>
          <li className="extraSettings">
            <ul>
-              <p>Adjust Blur</p>
+              <p>Adjust Blur (<span id='blurAmount'></span>%)</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" />
+              <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
            </ul>
          </li>
        </div>
@@ -116,8 +120,8 @@ export default class Settings extends React.Component {
          </label>
          <li className="extraSettings">
            <ul>
-            <label for="4">Search Engine</label>
-            <select name="4">
+            <label htmlFor="4">Search Engine</label>
+            <select name="4" id='searchBar'>
              <option value="duckduckgo">DuckDuckGo</option>
              <option value="google">Google</option>
              <option value="bing">Bing</option>
@@ -140,8 +144,16 @@ export default class Settings extends React.Component {
            <span className="slider"></span>
          </label>
        </div>
-        <button className="apply" onClick={() => window.location.reload()}>Apply</button>
+        <div className='section'>
+          <h4>Dark Theme (experimental)</h4>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus'  />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <button className="apply" onClick={() => this.saveStuff()}>Apply</button>
      </div>
+      
    </div>;
  }
 }