yolokube/dashboard
yolokube/dashboard
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

Feature Requests

Browse source
This commit is contained in:
phntxx 2021-04-03 16:54:44 +02:00
parent a94f31ddd2
commit 746505294b
11 changed files with 272 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
data/greeter.json Normal file
View file

@ -0,0 +1,50 @@
{
"greeter": {
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"days": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"greetings": [
{
"greeting": "Good night!",
"start": 0,
"end": 6
},
{
"greeting": "Good morning!",
"start": 6,
"end": 12
},
{
"greeting": "Good afternoon!",
"start": 12,
"end": 18
},
{
"greeting": "Good evening!",
"start": 18,
"end": 0
}
],
"dateformat": "%wd, %m %d%e %y"
}
}

12
package.json
View file

@ -30,5 +30,17 @@
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

6
src/app.tsx
View file

@ -1,4 +1,3 @@
import React from "react";
import { createGlobalStyle } from "styled-components";
import SearchBar from "./components/searchBar";
@ -31,7 +30,7 @@ const GlobalStyle = createGlobalStyle`
*/
const App = () => {
const { appData, bookmarkData, searchProviderData, themeData, imprintData } = useFetcher();
const { appData, bookmarkData, searchProviderData, themeData, imprintData, greeterData } = useFetcher();
return (
<>
@ -44,8 +43,7 @@ const App = () => {
providers={searchProviderData?.providers}
/>
)}
<Greeter />
<Greeter data={greeterData.greeter} />
{!appData.error && (
<AppList apps={appData.apps} categories={appData.categories} />
)}

35
src/components/app.tsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import Icon from "./icon";
import styled from "styled-components";
import selectedTheme from "../lib/theme";
@ -48,20 +48,31 @@ export interface IAppProps {
icon: string;
url: string;
displayURL: string;
newTab?: boolean;
}
/**
* Renders a single app shortcut
* @param {IAppProps} props - The props of the given app
*/
export const App = ({ name, icon, url, displayURL }: IAppProps) => (
<AppContainer>
<IconContainer>
<Icon name={icon} />
</IconContainer>
<DetailsContainer>
<AppLink href={url}>{name}</AppLink>
<AppDescription>{displayURL}</AppDescription>
</DetailsContainer>
</AppContainer>
);
export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
useEffect(() => { console.log(newTab) }, [newTab])
return (
<AppContainer>
<IconContainer>
<Icon name={icon} />
</IconContainer>
<DetailsContainer>
{
(newTab !== undefined && newTab) ?
<AppLink href={url} target="_blank" rel="noopener noreferrer">{name}</AppLink> : <AppLink href={url}>{name}</AppLink>
}
<AppDescription>{displayURL}</AppDescription>
</DetailsContainer>
</AppContainer>
);
}

1
src/components/appCategory.tsx
View file

@ -31,6 +31,7 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => (
icon={app.icon}
url={app.url}
displayURL={app.displayURL}
newTab={app.newTab}
/>
</Item>
))}

1
src/components/appList.tsx
View file

@ -1,4 +1,3 @@
import React from "react";
import { AppCategory, IAppCategoryProps } from "./appCategory";
import { IAppProps } from "./app";

97
src/components/greeter.tsx
View file

@ -1,6 +1,4 @@
import React from "react";
import styled from "styled-components";
import selectedTheme from "../lib/theme";
const GreeterContainer = styled.div`
@ -22,48 +20,45 @@ const DateText = styled.h3`
color: ${selectedTheme.accentColor};
`;
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
export interface IGreeterProps {
months: Array<string>;
days: Array<string>;
greetings: Array<IGreetingProps>;
dateformat: string;
}
const weekDayNames = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
interface IGreetingProps {
greeting: string;
start: number;
end: number;
}
interface IGreeterComponentProps {
data: IGreeterProps;
}
/**
*
* @param a the number that's supposed to be checked
* @param b the minimum
* @param c the maximum
*/
const isBetween = (a: number, b: number, c: number): boolean => (a > b && a < c)
/**
* Returns a greeting based on the current time
* @returns {string} - A greeting
*/
const getGreeting = () => {
switch (Math.floor(new Date().getHours() / 6)) {
case 0:
return "Good night!";
case 1:
return "Good morning!";
case 2:
return "Good afternoon!";
case 3:
return "Good evening!";
default:
break;
}
const getGreeting = (greetings: Array<IGreetingProps>): string => {
let hours = Math.floor(new Date().getHours())
let result = "";
greetings.forEach(greeting => {
if (isBetween(hours, greeting.start, greeting.end)) result = greeting.greeting;
})
return result;
};
/**
@ -89,30 +84,28 @@ const getExtension = (day: number) => {
/**
* Generates the current date
* @param {string} format - The format of the date string
* @returns {string} - The current date as a string
*/
const getDateString = () => {
const getDateString = (weekdays: Array<string>, months: Array<string>, format: string) => {
let currentDate = new Date();
return (
weekDayNames[currentDate.getUTCDay()] +
", " +
monthNames[currentDate.getUTCMonth()] +
" " +
currentDate.getDate() +
getExtension(currentDate.getDate()) +
" " +
currentDate.getFullYear()
);
let weekday = weekdays[currentDate.getUTCDay()];
let day = currentDate.getDate();
let month = months[currentDate.getUTCMonth()];
let extension = getExtension(day);
let year = currentDate.getFullYear();
return format.replace("%wd", weekday).replace("%d", day.toString()).replace("%e", extension).replace("%m", month).replace("%y", year.toString());
};
/**
* Renders the Greeter
*/
const Greeter = () => (
const Greeter = ({ data }: IGreeterComponentProps) => (
<GreeterContainer>
<DateText>{getDateString()}</DateText>
<GreetText>{getGreeting()}</GreetText>
<DateText>{getDateString(data.days, data.months, data.dateformat)}</DateText>
<GreetText>{getGreeting(data.greetings)}</GreetText>
</GreeterContainer>
);

45
src/components/settings.tsx
View file

@ -1,7 +1,7 @@
import React, { useState } from "react";
import styled from "styled-components";
import Select, { Styles, ValueType } from "react-select";
import Select, { ValueType } from "react-select";
import { ISearchProviderProps } from "./searchBar";
import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
@ -9,17 +9,6 @@ import { Button, SubHeadline } from "./elements";
import Modal from "./modal";
interface IHoverProps {
color?: string;
backgroundColor?: string;
border?: string;
borderColor?: string;
}
interface IPseudoProps extends React.CSSProperties {
"&:hover": IHoverProps
}
const FormContainer = styled.div`
display: grid;
grid-template-columns: auto auto auto;
@ -55,22 +44,12 @@ const SectionHeadline = styled(SubHeadline)`
margin-bottom: 0.5rem;
`;
const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
indicatorSeparator: () => ({
display: "none",
}),
container: (base: React.CSSProperties): React.CSSProperties => ({
const SelectorStyle: any = {
container: (base: any): any => ({
...base,
margin: "0 2px",
}),
dropdownIndicator: (base: React.CSSProperties): IPseudoProps => ({
...base,
color: selectedTheme.mainColor,
"&:hover": {
color: selectedTheme.mainColor
}
}),
control: (base: React.CSSProperties): IPseudoProps => ({
control: (base: any): any => ({
...base,
fontWeight: 500,
color: selectedTheme.mainColor,
@ -86,7 +65,17 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
borderColor: selectedTheme.mainColor
},
}),
menu: (base: React.CSSProperties): React.CSSProperties => ({
dropdownIndicator: (base: any): any => ({
...base,
color: selectedTheme.mainColor,
"&:hover": {
color: selectedTheme.mainColor
}
}),
indicatorSeparator: () => ({
display: "none",
}),
menu: (base: any): any => ({
...base,
backgroundColor: selectedTheme.backgroundColor,
border: "1px solid " + selectedTheme.mainColor,
@ -94,7 +83,7 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
boxShadow: "none",
margin: "4px 0"
}),
option: (base: React.CSSProperties): IPseudoProps => ({
option: (base: any): any => ({
...base,
fontWeight: 500,
color: selectedTheme.mainColor,
@ -107,7 +96,7 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
color: selectedTheme.backgroundColor,
},
}),
singleValue: (base: React.CSSProperties): React.CSSProperties => ({
singleValue: (base: any): any => ({
...base,
color: selectedTheme.mainColor,
}),

50
src/data/greeter.json Normal file
View file

@ -0,0 +1,50 @@
{
"greeter": {
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"days": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"greetings": [
{
"greeting": "Good night!",
"start": 0,
"end": 6
},
{
"greeting": "Good morning!",
"start": 6,
"end": 12
},
{
"greeting": "Good afternoon!",
"start": 12,
"end": 18
},
{
"greeting": "Good evening!",
"start": 18,
"end": 0
}
],
"dateformat": "%wd, %m %d%e %y"
}
}

77
src/lib/fetcher.tsx
View file

@ -6,6 +6,7 @@ import { IAppCategoryProps } from "../components/appCategory";
import { IAppProps } from "../components/app";
import { IThemeProps } from "./theme";
import { IImprintProps } from "../components/imprint";
import { IGreeterProps } from "../components/greeter";
const errorMessage = "Failed to load data.";
const inProduction = process.env.NODE_ENV === "production";
@ -47,6 +48,11 @@ export interface IImprintDataProps {
error: string | boolean;
}
export interface IGreeterDataProps {
greeter: IGreeterProps;
error: string | boolean;
}
/**
* Default values for the respective state variables
*/
@ -79,6 +85,57 @@ const defaults = {
},
error: false,
},
greeter: {
greeter: {
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
days: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
greetings: [
{
greeting: "Good night!",
start: 0,
end: 6
},
{
greeting: "Good morning!",
start: 6,
end: 12
},
{
greeting: "Good afternoon!",
start: 12,
end: 18
},
{
greeting: "Good evening!",
start: 18,
end: 0
}
],
dateformat: "%wd, %m %d%e %y"
},
error: false,
}
};
/**
@ -98,6 +155,8 @@ const handleError = (status: string, error: Error) => {
return { ...defaults.theme, error: error.message }
case "imprint":
return { ...defaults.imprint, error: error.message }
case "greeter":
return { ...defaults.greeter, error: error.message }
default:
break;
}
@ -112,6 +171,7 @@ const fetchProduction = Promise.all([
fetch("/data/search.json").then(handleResponse).catch((error: Error) => handleError("searchProvider", error)),
fetch("/data/themes.json").then(handleResponse).catch((error: Error) => handleError("theme", error)),
fetch("/data/imprint.json").then(handleResponse).catch((error: Error) => handleError("imprint", error)),
fetch("/data/greeter.json").then(handleResponse).catch((error: Error) => handleError("greeter", error))
]);
/**
@ -123,6 +183,7 @@ const fetchDevelopment = Promise.all([
import("../data/search.json"),
import("../data/themes.json"),
import("../data/imprint.json"),
import("../data/greeter.json")
]);
/**
@ -146,14 +207,17 @@ export const useFetcher = () => {
defaults.imprint
);
const [greeterData, setGreeterData] = useState<IGreeterDataProps>(defaults.greeter);
const callback = useCallback(() => {
(inProduction ? fetchProduction : fetchDevelopment).then(
([appData, bookmarkData, searchData, themeData, imprintData]: [IAppDataProps, IBookmarkDataProps, ISearchProviderDataProps, IThemeDataProps, IImprintDataProps]) => {
(appData.error) ? setAppData(appData) : setAppData({ ...appData, error: false });
(bookmarkData.error) ? setBookmarkData(bookmarkData) : setBookmarkData({ ...bookmarkData, error: false });
(searchData.error) ? setSearchProviderData(searchData) : setSearchProviderData({ ...searchData, error: false });
(themeData.error) ? setThemeData(themeData) : setThemeData({ ...themeData, error: false });
(imprintData.error) ? setImprintData(imprintData) : setImprintData({ ...imprintData, error: false });
([appData, bookmarkData, searchData, themeData, imprintData, greeterData]: [IAppDataProps, IBookmarkDataProps, ISearchProviderDataProps, IThemeDataProps, IImprintDataProps, IGreeterDataProps]) => {
setAppData((appData.error) ? appData : { ...appData, error: false });
setBookmarkData((bookmarkData.error) ? bookmarkData : { ...bookmarkData, error: false });
setSearchProviderData((searchData.error) ? searchData : { ...searchData, error: false });
setThemeData((themeData.error) ? themeData : { ...themeData, error: false });
setImprintData((imprintData.error) ? imprintData : { ...imprintData, error: false });
setGreeterData((greeterData.error) ? greeterData : { ...greeterData, error: false });
}
);
}, []);
@ -166,6 +230,7 @@ export const useFetcher = () => {
searchProviderData,
themeData,
imprintData,
greeterData,
callback
};
};

2
tsconfig.json
View file

@ -17,7 +17,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [