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

First Commit!

Browse source
This commit is contained in:
Bastian Meissner 2020-05-20 13:49:49 +02:00
parent 4432a35fea
commit 32bc836787
25 changed files with 1229 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/components/appList.js Normal file
View file

@ -0,0 +1,93 @@
import React from 'react';
import MaterialIcon from 'material-icons-react';
import styled from 'styled-components';
import appData from './data/apps.json';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
const AppListContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
const AppsContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
@media (max-width: 600px) {
flex-direction: column;
}
`;
const AppContainer = styled.div`
display: flex;
flex-direction: row;
flex: 1 0 21%;
padding: 1rem 0 1rem 0;
@media (max-width: 750px) {
flex: 1 0 42%;
}
`;
const IconContainer = styled.div`
margin-right: 5px;
`;
const AppDetails = styled.div`
display: flex;
flex-direction: column;
`;
const ApplicationsText = styled.h3`
font-family: Roboto, sans-serif;
font-weight: 900;
text-transform: uppercase;
margin: 0px;
font-size: 20px;
color: ${selectedTheme.mainColor};
`;
const Link = styled.a`
font-family: Roboto, sans-serif;
color: ${selectedTheme.mainColor};
font-weight: 500;
text-transform: uppercase;
margin: 0px;
text-decoration: none;
font-size: 15px;
`;
const Description = styled.p`
font-family: Roboto, sans-serif;
text-transform: uppercase;
margin: 0px;
font-size: 10px;
font-weight: 400;
color: ${selectedTheme.accentColor};
`;
const appList = () => (
<AppListContainer>
<ApplicationsText>Applications</ApplicationsText>
<AppsContainer>
{
appData.apps.map((app) => (
<AppContainer>
<IconContainer>
<MaterialIcon icon={app.icon} color={selectedTheme.mainColor}/>
</IconContainer>
<AppDetails>
<Link href={app.URL}>{app.name}</Link>
<Description>{app.displayURL}</Description>
</AppDetails>
</AppContainer>
))
}
</AppsContainer>
</AppListContainer>
);
export default appList;

79
src/components/bookmarkList.js Normal file
View file

@ -0,0 +1,79 @@
import React from 'react';
import styled from 'styled-components';
import bookmarkData from './data/bookmarks.json';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
const BookmarksText = styled.h3`
font-family: Roboto, sans-serif;
text-transform: uppercase;
margin: 0;
font-size: 20px;
color: ${selectedTheme.mainColor};
`;
const GroupText = styled.h4`
font-family: Roboto, sans-serif;
font-weight: 700;
margin: 0;
text-transform: uppercase;
color: ${selectedTheme.mainColor};
`;
const BookmarkListContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
const BookmarksContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
@media (max-width: 600px) {
flex-direction: column;
}
`;
const BookmarkGroupContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 0 21%;
padding-top: 2rem;
font-size: 15px;
`;
const Bookmark = styled.a`
font-family: Roboto, sans-serif;
font-weight: 400;
text-decoration: none;
color: ${selectedTheme.accentColor};
padding: 10px 0 0 0;
font-size: 14px;
`;
const bookmarkList = () => (
<BookmarkListContainer>
<BookmarksText>Bookmarks</BookmarksText>
<BookmarksContainer>
{
bookmarkData.groups.map((group) => (
<BookmarkGroupContainer>
<GroupText>{group.name}</GroupText>
{
group.items.map((link) => (
<Bookmark href={link.url}>{link.name}</Bookmark>
))
}
</BookmarkGroupContainer>
))
}
</BookmarksContainer>
</BookmarkListContainer>
);
export default bookmarkList;

58
src/components/data/apps.json Normal file
View file

@ -0,0 +1,58 @@
{
"apps": [
{
"name": "PiHole",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "vpn_lock"
},
{
"name": "Plex",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "tv"
},
{
"name": "NextCloud",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "filter_drama"
},
{
"name": "Ghost",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "rss_feed"
},
{
"name": "Minecraft",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "games"
},
{
"name": "pfSense",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "security"
},
{
"name": "ESXi",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "dns"
},
{
"name": "Tautulli",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "bar_chart"
},
{
"name": "Grafana",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "show_chart"
}
]
}

140
src/components/data/bookmarks.json Normal file
View file

@ -0,0 +1,140 @@
{
"groups": [
{
"name": "Communicate",
"items": [
{
"name": "Discord",
"url": "https://example.com"
},
{
"name": "Gmail",
"url": "https://example.com"
},
{
"name": "Slack",
"url": "https://example.com"
}
]
},
{
"name": "Cloud",
"items": [
{
"name": "Box",
"url": "https://example.com"
},
{
"name": "Dropbox",
"url": "https://example.com"
},
{
"name": "Drive",
"url": "https://example.com"
}
]
},
{
"name": "Design",
"items": [
{
"name": "Awwwards",
"url": "https://example.com"
},
{
"name": "Dribbble",
"url": "https://example.com"
},
{
"name": "Muz.li",
"url": "https://example.com"
}
]
},
{
"name": "Dev",
"items": [
{
"name": "Codepen",
"url": "https://example.com"
},
{
"name": "Devdocs",
"url": "https://example.com"
},
{
"name": "Devhints",
"url": "https://example.com"
}
]
},
{
"name": "Lifestyle",
"items": [
{
"name": "Design Milk",
"url": "https://example.com"
},
{
"name": "Dwell",
"url": "https://example.com"
},
{
"name": "Freshome",
"url": "https://example.com"
}
]
},
{
"name": "Media",
"items": [
{
"name": "Spotify",
"url": "https://example.com"
},
{
"name": "Trakt",
"url": "https://example.com"
},
{
"name": "YouTube",
"url": "https://example.com"
}
]
},
{
"name": "Reading",
"items": [
{
"name": "Instapaper",
"url": "https://example.com"
},
{
"name": "Medium",
"url": "https://example.com"
},
{
"name": "Reddit",
"url": "https://example.com"
}
]
},
{
"name": "Tech",
"items": [
{
"name": "TheNextWeb",
"url": "https://example.com"
},
{
"name": "The Verge",
"url": "https://example.com"
},
{
"name": "MIT Technology Review",
"url": "https://example.com"
}
]
}
]
}

64
src/components/data/search.json Normal file
View file

@ -0,0 +1,64 @@
{
"providers":[
{
"name":"Allmusic",
"url":"https://www.allmusic.com/search/all/",
"prefix":"/a"
},
{
"name":"Discogs",
"url":"https://www.discogs.com/search/?q=",
"prefix":"/di"
},
{
"name":"Duck Duck Go",
"url":"https://duckduckgo.com/?q=",
"prefix":"/d"
},
{
"name":"iMDB",
"url":"https://www.imdb.com/find?q=",
"prefix":"/i"
},
{
"name":"TheMovieDB",
"url":"https://www.themoviedb.org/search?query=",
"prefix":"/m"
},
{
"name":"Reddit",
"url":"https://www.reddit.com/search?q=",
"prefix":"/r"
},
{
"name":"Qwant",
"url":"https://www.qwant.com/?q=",
"prefix":"/q"
},
{
"name":"Soundcloud",
"url":"https://soundcloud.com/search?q=",
"prefix":"/so"
},
{
"name":"Spotify",
"url":"https://open.spotify.com/search/results/",
"prefix":"/s"
},
{
"name":"TheTVDB",
"url":"https://www.thetvdb.com/search?q=",
"prefix":"/tv"
},
{
"name":"Trakt",
"url":"https://trakt.tv/search?query=",
"prefix":"/t"
},
{
"name": "YouTube",
"url": "https://youtube.com/results?search_query=",
"prefix":"/yt"
}
]
}

25
src/components/data/themes.json Normal file
View file

@ -0,0 +1,25 @@
{
"themes": [
{
"label": "Classic",
"value": 0,
"mainColor": "#000000",
"accentColor": "#1e272e",
"backgroundColor": "#ffffff"
},
{
"label": "Dark",
"value": 1,
"mainColor": "#ffffff",
"accentColor": "#999999",
"backgroundColor": "#000000"
},
{
"label": "Raw",
"value": 2,
"mainColor": "",
"accentColor": "",
"backgroundColor": "#ffffff"
}
]
}

73
src/components/greeter.js Normal file
View file

@ -0,0 +1,73 @@
import React from 'react';
import styled from 'styled-components';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
const GreeterContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
const GreetText = styled.h1`
font-family: Roboto, sans-serif;
font-weight: 900;
font-size: 45px;
margin: 0.5rem 0 0.5rem 0;
color: ${selectedTheme.mainColor};
`;
const DateText = styled.h3`
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 15px;
text-transform: uppercase;
margin: 0;
color: ${selectedTheme.accentColor};
`;
const getGreeting = () => {
// Maybe add some expandability for different greetings?
return "Hello World!"
}
const getExtension = (day) => {
let extension = ""
if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) {
extension = "th"
} else if (day % 10 === 1) {
extension = "st"
} else if (day % 10 === 2) {
extension = "nd"
} else if (day % 10 === 3) {
extension = "rd"
}
return extension
}
const getDateString = () => {
let currentDate = new Date();
const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear();
}
const greeter = () => {
let date = getDateString();
let greeting = getGreeting();
return (
<GreeterContainer>
<DateText>{ date }</DateText>
<GreetText>{ greeting }</GreetText>
</GreeterContainer>
);
}
export default greeter;

69
src/components/searchBar.js Normal file
View file

@ -0,0 +1,69 @@
import React, {useState} from 'react';
import styled from 'styled-components';
import searchData from './data/search.json';
import themeData from './data/themes.json';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
const SearchInput = styled.input`
width: 100%;
font-size: 16px;
border: none;
border-bottom: 1px solid ${selectedTheme.accentColor};
background: none;
border-radius: 0;
color: ${selectedTheme.mainColor};
`;
const handleQueryWithProvider = (query) => {
let queryArray = query.split(" ");
let prefix = queryArray[0];
queryArray.shift();
let searchQuery = queryArray.join(" ");
var foundProvider = false;
searchData.providers.forEach((provider) => {
if (provider.prefix === prefix) {
foundProvider = true;
window.location = provider.url + searchQuery
}
})
if (!foundProvider) {
window.location = "https://google.com/search?q=" + query;
}
}
const SearchBar = () => {
let [input, setInput] = useState();
const handleSearchQuery = (e) => {
var query = input;
console.log(query)
if (query.split(" ")[0].includes("/")) {
handleQueryWithProvider(query)
} else {
window.location = "https://google.com/search?q=" + query;
}
e.preventDefault();
}
return (
<form onSubmit={(e) => handleSearchQuery(e)}>
<SearchInput type="text" onChange={(e) => setInput(e.target.value)}></SearchInput>
<button type="submit" hidden />
</form>
)
}
export default SearchBar;

175
src/components/settingsModal.js Normal file
View file

@ -0,0 +1,175 @@
import React, { useState } from 'react';
import MaterialIcon from 'material-icons-react';
import styled from 'styled-components';
import Select from 'react-select';
import searchData from './data/search.json'
import themeData from './data/themes.json'
import getTheme, { setTheme } from './themeManager'
const selectedTheme = getTheme();
const ModalButton = styled.button`
float: right;
border: none;
background: none;
padding: 10px;
`;
const ExitButton = styled.button`
float: right;
border: none;
background: none;
`;
const Modal = styled.div`
position: absolute;
left: 50%;
top: 50%;
padding: 1rem;
transform: translate(-50%, -50%);
z-index: 10;
border: 1px solid ${selectedTheme.mainColor};
background-color: ${selectedTheme.backgroundColor};
`;
const SelectContainer = styled.div`
padding-bottom: 1rem;
`;
const FormContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
`;
const ApplyButton = styled.button`
font-family: Roboto, sans-serif;
text-transform: uppercase;
font-weight: 400;
border: 1px solid ${selectedTheme.mainColor};
color: ${selectedTheme.mainColor};
background: none;
margin-left: 1rem;
`;
const Headline = styled.h3`
font-family: Roboto, sans-serif;
font-weight: 900;
color: ${selectedTheme.mainColor};
margin-top: 0;
`;
const SelectorStyle = {
control: (provided) => ({
...provided,
fontFamily: "Roboto, sans-serif",
fontWeight: "500",
color: selectedTheme.mainColor,
textTransform: "uppercase",
width: "200px",
background: "none",
borderRadius: "0px",
border: "1px solid " + selectedTheme.mainColor,
boxShadow: 0,
'&:hover': {
border: "1px solid " + selectedTheme.mainColor,
}
}),
menu: (provided) => ({
...provided,
backgroundColor: selectedTheme.backgroundColor,
border: "1px solid " + selectedTheme.mainColor,
borderRadius: "0px",
boxShadow: 0,
}),
option: (provided) => ({
...provided,
fontFamily: "Roboto, sans-serif",
fontWeight: "500",
color: selectedTheme.mainColor,
textTransform: "uppercase",
borderRadius: "0px",
boxShadow: 0,
backgroundColor: selectedTheme.backgroundColor,
'&:hover': {
backgroundColor: selectedTheme.mainColor,
color: selectedTheme.backgroundColor,
}
}),
singleValue: (provided) => {
return {
...provided,
color: selectedTheme.mainColor,
}
}
}
const Table = styled.table`
font-family: Roboto, sans-serif;
font-weight: 400;
background: none;
color: ${selectedTheme.mainColor};
`;
const TableRow = styled.tr`
border-bottom: 1px solid ${selectedTheme.mainColor};
`;
const TableCell = styled.td`
background: none;
padding-top: 0.5rem;
`;
const HeadCell = styled.th`
font-weight: 700;
background: none;
`;
const SettingsModal = () => {
const [modalHidden, setModalHidden] = useState(true);
const [newTheme, setNewTheme] = useState();
return (
<>
<ModalButton onClick={() => setModalHidden(!modalHidden)}>
<MaterialIcon icon="settings" color={selectedTheme.mainColor} />
</ModalButton>
<Modal hidden={modalHidden}>
<ExitButton onClick={() => setModalHidden(!modalHidden)}>
<MaterialIcon icon="close" color={selectedTheme.mainColor} />
</ExitButton>
<SelectContainer>
<Headline>Theme:</Headline>
<FormContainer>
<Select options={themeData.themes} defaultValue={selectedTheme} onChange={(e) => {setNewTheme(e)}} styles={SelectorStyle} />
<ApplyButton onClick={() => setTheme(JSON.stringify(newTheme))}>Apply</ApplyButton>
</FormContainer>
</SelectContainer>
<Table>
<TableRow>
<HeadCell>Search Provider</HeadCell>
<HeadCell>Prefix</HeadCell>
</TableRow>
{
searchData.providers.map((provider) => (
<TableRow>
<TableCell>{provider.name}</TableCell>
<TableCell>{provider.prefix}</TableCell>
</TableRow>
))
}
</Table>
</Modal>
</>
)
}
export default SettingsModal;

25
src/components/themeManager.js Normal file
View file

@ -0,0 +1,25 @@
import themeData from './data/themes.json';
const setTheme = (theme) => {
localStorage.setItem("theme", theme);
window.location.reload();
}
const resetTheme = () => {
localStorage.removeItem("theme");
}
const getTheme = () => {
let selectedTheme = themeData.themes[0];
if (localStorage.getItem("theme") && localStorage.getItem("theme") !== undefined) {
selectedTheme = JSON.parse(localStorage.getItem("theme"));
}
return selectedTheme;
}
export { setTheme, resetTheme }
export default getTheme;