From aca8b0261e28d3be56185220415ce3fe0ca788dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Fri, 5 Nov 2021 16:39:42 +0100 Subject: [PATCH] Added option to set custom greetings. Moved HomeHeader to separate file. Cleaned up README file --- CHANGELOG.md | 2 + README.md | 57 +++++++------------ .../components/Home/Header/Header.module.css | 31 ++++++++++ client/src/components/Home/Header/Header.tsx | 49 ++++++++++++++++ .../functions/getDateTime.ts} | 2 +- .../Home/Header/functions/greeter.ts | 17 ++++++ client/src/components/Home/Home.module.css | 32 +---------- client/src/components/Home/Home.tsx | 43 +------------- .../src/components/Home/functions/greeter.ts | 12 ---- .../Settings/OtherSettings/OtherSettings.tsx | 15 +++++ client/src/interfaces/Config.ts | 1 + client/src/interfaces/Forms.ts | 1 + client/src/store/actions/config.ts | 2 + .../utility/templateObjects/configTemplate.ts | 1 + .../templateObjects/settingsTemplate.ts | 1 + utils/ErrorResponse.js | 4 +- utils/init/initialConfig.json | 3 +- 17 files changed, 149 insertions(+), 124 deletions(-) create mode 100644 client/src/components/Home/Header/Header.module.css create mode 100644 client/src/components/Home/Header/Header.tsx rename client/src/components/Home/{functions/dateTime.ts => Header/functions/getDateTime.ts} (94%) create mode 100644 client/src/components/Home/Header/functions/greeter.ts delete mode 100644 client/src/components/Home/functions/greeter.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index afd7297..1011cad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ### v1.7.4 (TBA) +- [WIP] Added option to set custom greetings and date ([#103](https://github.com/pawelmalak/flame/issues/103)) - Added iOS "Add to homescreen" icon ([#131](https://github.com/pawelmalak/flame/issues/131)) +- Added 3 new themes ### v1.7.3 (2021-10-28) - Fixed bug with custom CSS not updating diff --git a/README.md b/README.md index e3fd2d7..0fcf509 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,10 @@ # Flame -[![JS Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://shields.io/) -[![TS Badge](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://shields.io/) -[![Node Badge](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://shields.io/) -[![React Badge](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://shields.io/) - ![Homescreen screenshot](./.github/_home.png) ## Description -Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own appliaction hub in no time - no file editing necessary. +Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own application hub in no time - no file editing necessary. ## Technology @@ -42,7 +37,15 @@ npm run dev ### With Docker (recommended) -[Docker Hub](https://hub.docker.com/r/pawelmalak/flame) +[Docker Hub link](https://hub.docker.com/r/pawelmalak/flame) + +```sh +docker pull pawelmalak/flame:latest + +# for ARM architecture (e.g. RaspberryPi) +docker pull pawelmalak/flame:multiarch +``` + #### Building images @@ -96,13 +99,13 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/ - Applications - Create, update, delete and organize applications using GUI - - Pin your favourite apps to homescreen + - Pin your favourite apps to the homescreen ![Homescreen screenshot](./.github/_apps.png) - Bookmarks - Create, update, delete and organize bookmarks and categories using GUI - - Pin your favourite categories to homescreen + - Pin your favourite categories to the homescreen ![Homescreen screenshot](./.github/_bookmarks.png) @@ -111,7 +114,7 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/ - Get current temperature, cloud coverage and weather status with animated icons - Themes - - Customize your page by choosing from 12 color themes + - Customize your page by choosing from 15 color themes ![Homescreen screenshot](./.github/_themes.png) @@ -125,23 +128,7 @@ To use search bar you need to type your search query with selected prefix. For e > You can change where to open search results (same/new tab) in the settings -#### Supported search engines - -| Name | Prefix | Search URL | -| ---------- | ------ | ----------------------------------- | -| Disroot | /ds | http://search.disroot.org/search?q= | -| DuckDuckGo | /d | https://duckduckgo.com/?q= | -| Google | /g | https://www.google.com/search?q= | - -#### Supported services - -| Name | Prefix | Search URL | -| ------------------ | ------ | --------------------------------------------- | -| IMDb | /im | https://www.imdb.com/find?q= | -| Reddit | /r | https://www.reddit.com/search?q= | -| Spotify | /sp | https://open.spotify.com/search/ | -| The Movie Database | /mv | https://www.themoviedb.org/search?query= | -| Youtube | /yt | https://www.youtube.com/results?search_query= | +For list of supported search engines, shortcuts and more about searching functionality visit [project wiki](https://github.com/pawelmalak/flame/wiki/Search-bar). ### Setting up weather module @@ -159,13 +146,13 @@ labels: - flame.type=application # "app" works too - flame.name=My container - flame.url=https://example.com - - flame.icon=icon-name # Optional, default is "docker" + - flame.icon=icon-name # optional, default is "docker" # - flame.icon=custom to make changes in app. ie: custom icon upload ``` -And you must have activated the Docker sync option in the settings panel. +> "Use Docker API" option must be enabled for this to work. You can find it in Settings > Other > Docker section -You can set up different apps in the same label adding `;` between each one. +You can also set up different apps in the same label adding `;` between each one. ```yml labels: @@ -208,13 +195,11 @@ metadata: - flame.pawelmalak/type=application # "app" works too - flame.pawelmalak/name=My container - flame.pawelmalak/url=https://example.com - - flame.pawelmalak/icon=icon-name # Optional, default is "kubernetes" + - flame.pawelmalak/icon=icon-name # optional, default is "kubernetes" ``` -And you must have activated the Kubernetes sync option in the settings panel. +> "Use Kubernetes Ingress API" option must be enabled for this to work. You can find it in Settings > Other > Kubernetes section -### Custom CSS +### Custom CSS and themes -> This is an experimental feature. Its behaviour might change in the future. -> -> Follow instructions from wiki: [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS) \ No newline at end of file +See project wiki for [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS) and [Custom theme with CSS](https://github.com/pawelmalak/flame/wiki/Custom-theme-with-CSS). \ No newline at end of file diff --git a/client/src/components/Home/Header/Header.module.css b/client/src/components/Home/Header/Header.module.css new file mode 100644 index 0000000..d7ee22b --- /dev/null +++ b/client/src/components/Home/Header/Header.module.css @@ -0,0 +1,31 @@ +.Header h1 { + color: var(--color-primary); + font-weight: 700; + font-size: 4em; + display: inline-block; +} + +.Header p { + color: var(--color-primary); + font-weight: 300; + text-transform: uppercase; + height: 30px; +} + +.HeaderMain { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2.5rem; +} + +.SettingsLink { + visibility: visible; + color: var(--color-accent); +} + +@media (min-width: 769px) { + .SettingsLink { + visibility: hidden; + } +} diff --git a/client/src/components/Home/Header/Header.tsx b/client/src/components/Home/Header/Header.tsx new file mode 100644 index 0000000..3b2841b --- /dev/null +++ b/client/src/components/Home/Header/Header.tsx @@ -0,0 +1,49 @@ +import { useEffect, useState } from 'react'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; +import { Config, GlobalState } from '../../../interfaces'; +import WeatherWidget from '../../Widgets/WeatherWidget/WeatherWidget'; +import { getDateTime } from './functions/getDateTime'; +import { greeter } from './functions/greeter'; +import classes from './Header.module.css'; + +interface Props { + config: Config; +} + +const Header = (props: Props): JSX.Element => { + const [dateTime, setDateTime] = useState(getDateTime()); + const [greeting, setGreeting] = useState(greeter()); + + useEffect(() => { + let dateTimeInterval: NodeJS.Timeout; + + dateTimeInterval = setInterval(() => { + setDateTime(getDateTime()); + setGreeting(greeter()); + }, 1000); + + return () => window.clearInterval(dateTimeInterval); + }, []); + + return ( +
+

{dateTime}

+ + Go to Settings + + +

{greeting}

+ + +
+ ); +}; + +const mapStateToProps = (state: GlobalState) => { + return { + config: state.config.config, + }; +}; + +export default connect(mapStateToProps)(Header); diff --git a/client/src/components/Home/functions/dateTime.ts b/client/src/components/Home/Header/functions/getDateTime.ts similarity index 94% rename from client/src/components/Home/functions/dateTime.ts rename to client/src/components/Home/Header/functions/getDateTime.ts index ddcfc70..9f1d601 100644 --- a/client/src/components/Home/functions/dateTime.ts +++ b/client/src/components/Home/Header/functions/getDateTime.ts @@ -1,4 +1,4 @@ -export const dateTime = (): string => { +export const getDateTime = (): string => { const days = [ 'Sunday', 'Monday', diff --git a/client/src/components/Home/Header/functions/greeter.ts b/client/src/components/Home/Header/functions/greeter.ts new file mode 100644 index 0000000..93b32b4 --- /dev/null +++ b/client/src/components/Home/Header/functions/greeter.ts @@ -0,0 +1,17 @@ +export const greeter = (): string => { + const now = new Date().getHours(); + let msg: string; + + const greetingsSchemaRaw = + localStorage.getItem('greetingsSchema') || + 'Good evening!;Good afternoon!;Good morning!;Good night!'; + const greetingsSchema = greetingsSchemaRaw.split(';'); + + if (now >= 18) msg = greetingsSchema[0]; + else if (now >= 12) msg = greetingsSchema[1]; + else if (now >= 6) msg = greetingsSchema[2]; + else if (now >= 0) msg = greetingsSchema[3]; + else msg = 'Hello!'; + + return msg; +}; diff --git a/client/src/components/Home/Home.module.css b/client/src/components/Home/Home.module.css index 652ca22..f425184 100644 --- a/client/src/components/Home/Home.module.css +++ b/client/src/components/Home/Home.module.css @@ -1,24 +1,3 @@ -.Header h1 { - color: var(--color-primary); - font-weight: 700; - font-size: 4em; - display: inline-block; -} - -.Header p { - color: var(--color-primary); - font-weight: 300; - text-transform: uppercase; - height: 30px; -} - -.HeaderMain { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2.5rem; -} - .SettingsButton { width: 35px; height: 35px; @@ -40,21 +19,12 @@ opacity: 1; } -.SettingsLink { - visibility: visible; - color: var(--color-accent); -} - @media (min-width: 769px) { .SettingsButton { visibility: visible; } - - .SettingsLink { - visibility: hidden; - } } .HomeSpace { height: 20px; -} \ No newline at end of file +} diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 4a0adbe..017df9c 100644 --- a/client/src/components/Home/Home.tsx +++ b/client/src/components/Home/Home.tsx @@ -21,12 +21,8 @@ import classes from './Home.module.css'; // Components import AppGrid from '../Apps/AppGrid/AppGrid'; import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid'; -import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget'; import SearchBar from '../SearchBar/SearchBar'; - -// Functions -import { greeter } from './functions/greeter'; -import { dateTime } from './functions/dateTime'; +import Header from './Header/Header'; interface ComponentProps { getApps: Function; @@ -48,11 +44,6 @@ const Home = (props: ComponentProps): JSX.Element => { categoriesLoading, } = props; - const [header, setHeader] = useState({ - dateTime: dateTime(), - greeting: greeter(), - }); - // Local search query const [localSearch, setLocalSearch] = useState(null); const [appSearchResult, setAppSearchResult] = useState(null); @@ -74,23 +65,6 @@ const Home = (props: ComponentProps): JSX.Element => { } }, [getCategories]); - // Refresh greeter and time - useEffect(() => { - let interval: any; - - // Start interval only when hideHeader is false - if (!props.config.hideHeader) { - interval = setInterval(() => { - setHeader({ - dateTime: dateTime(), - greeting: greeter(), - }); - }, 1000); - } - - return () => clearInterval(interval); - }, []); - useEffect(() => { if (localSearch) { // Search through apps @@ -126,20 +100,7 @@ const Home = (props: ComponentProps): JSX.Element => {
)} - {!props.config.hideHeader ? ( -
-

{header.dateTime}

- - Go to Settings - - -

{header.greeting}

- - -
- ) : ( -
- )} + {!props.config.hideHeader ?
:
} {!props.config.hideApps ? ( diff --git a/client/src/components/Home/functions/greeter.ts b/client/src/components/Home/functions/greeter.ts deleted file mode 100644 index 64cb2ea..0000000 --- a/client/src/components/Home/functions/greeter.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const greeter = (): string => { - const now = new Date().getHours(); - let msg: string; - - if (now >= 18) msg = 'Good evening!'; - else if (now >= 12) msg = 'Good afternoon!'; - else if (now >= 6) msg = 'Good morning!'; - else if (now >= 0) msg = 'Good night!'; - else msg = 'Hello!'; - - return msg; -} \ No newline at end of file diff --git a/client/src/components/Settings/OtherSettings/OtherSettings.tsx b/client/src/components/Settings/OtherSettings/OtherSettings.tsx index 6610b65..b076735 100644 --- a/client/src/components/Settings/OtherSettings/OtherSettings.tsx +++ b/client/src/components/Settings/OtherSettings/OtherSettings.tsx @@ -187,6 +187,21 @@ const OtherSettings = (props: ComponentProps): JSX.Element => { + + + inputChangeHandler(e)} + /> + + Greetings must be separated with semicolon. Only 4 messages can be + used + +