Init

2025-06-16 13:37:14 +02:00
parent ac273655e6
commit a8b82208f7
5100 changed files with 737524 additions and 2 deletions
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -0,0 +1,124 @@
+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>
+    );
+}