125 lines
3.5 KiB
JavaScript
125 lines
3.5 KiB
JavaScript
import { useState, useEffect } from 'preact/hooks';
|
|
import './style.css';
|
|
|
|
// Components
|
|
|
|
import Cell from '../../components/Cell/Cell.jsx';
|
|
import CellInput from '../../components/Cell/CellInput.jsx';
|
|
import CellOutput from '../../components/Cell/CellOutput.jsx';
|
|
|
|
import StatsChart from '../../components/StatsChart/StatsChart.jsx';
|
|
|
|
import StatusBar from '../../components/StatusBar/StatusBar.jsx';
|
|
import Loading from '../../components/Loading/Loading.jsx';
|
|
import Links from '../../components/Links/Links.jsx';
|
|
|
|
const linksCode = `# Loading Dataframe
|
|
from utils import link_container
|
|
import pandas as pd
|
|
|
|
links = pd.read_csv('ifn_links.csv')
|
|
links.drop_duplicates()
|
|
for index, link in links.iterrows():
|
|
link_container.attach(index, link)
|
|
link_container.show()
|
|
`
|
|
|
|
const statsCode = `# Plotting Statistics
|
|
import matplotlib.pyplot as plt
|
|
import numpy as np
|
|
|
|
plt.title("Stats")
|
|
plt.bar("Links Loaded", len(links))
|
|
for link in links:
|
|
plt.bar(link, np.random.randint(1, len(links) - 1))
|
|
plt.show()
|
|
`
|
|
|
|
const getMockLinks = () => {
|
|
return [
|
|
{
|
|
id: 'jupyterhub',
|
|
config: {
|
|
title: 'Jupyter Hub',
|
|
link: `${window.location.origin}/jupyter`,
|
|
description: 'The main System build on top of Docker',
|
|
tags: ['Teaching', 'Docker']
|
|
},
|
|
icon: 'https://jupyter.org/assets/homepage/main-logo.svg'
|
|
},
|
|
{
|
|
id: 'ifnwebsite',
|
|
config: {
|
|
title: 'IFN Website',
|
|
link: 'https://www.tu-braunschweig.de/ifn',
|
|
description: 'All about the institut',
|
|
tags: ['Info']
|
|
},
|
|
icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
|
|
},
|
|
{
|
|
id: 'course-prog',
|
|
config: {
|
|
title: 'Lehrseite',
|
|
link: 'https://www.tu-braunschweig.de/ifn/edu/ws/einfuehrung-in-die-programmierung-fuer-nicht-informatiker',
|
|
description: 'Useful Stuff about the course',
|
|
tags: ['Info', 'Teaching']
|
|
},
|
|
icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
|
|
},
|
|
];
|
|
};
|
|
|
|
|
|
|
|
export default function Home() {
|
|
const [links, setLinks] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const delay = 500 + Math.random() * 1500;
|
|
const timer = setTimeout(() => {
|
|
setLinks(getMockLinks())
|
|
setLoading(false);
|
|
}, delay)
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div class="notebook-container">
|
|
<div class="notebook-header">
|
|
<div class="header-container">
|
|
<h1 class="notebook-title">Teaching System</h1>
|
|
<img class="notebook-img" src="https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg" />
|
|
</div>
|
|
<div class="notebook-subtitle">
|
|
A linktree of all available systems
|
|
</div>
|
|
</div>
|
|
|
|
<Cell>
|
|
<CellInput>
|
|
{linksCode}
|
|
</CellInput>
|
|
|
|
<CellOutput>
|
|
{loading ? (<Loading />) : (<Links links={links} />)}
|
|
</CellOutput>
|
|
</Cell>
|
|
|
|
<Cell>
|
|
<CellInput>
|
|
{statsCode}
|
|
</CellInput>
|
|
<CellOutput>
|
|
<StatsChart links={links}/>
|
|
</CellOutput>
|
|
</Cell>
|
|
|
|
<StatusBar links={links}/>
|
|
|
|
</div>
|
|
);
|
|
}
|