Initial Commit

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useNavigate, useRoutes } from 'react-router-dom';
+import ServiceRow from '../components/ServiceRow';
+import { Service, update_freq } from '../js/models';
+import { servicelist } from '../js/utils';
+
+
+function HomePage() {
+
+    const [services, setServices] = useState<Service[]>([
+        {
+            id:"ctfe",
+            internal_port:18080,
+            n_packets: 30,
+            n_regex: 40,
+            name:"CTFe",
+            public_port:80,
+            status:"pause"
+        },
+        {
+            id:"saas",
+            internal_port:18080,
+            n_packets: 30,
+            n_regex: 40,
+            name:"SaaS",
+            public_port:5000,
+            status:"active"
+        }
+    ]);
+    const navigator = useNavigate()
+    
+    const updateInfo = () => {
+    servicelist().then(res => {
+        setServices(res)
+        setTimeout(updateInfo, update_freq)
+    }).catch(
+        err =>{
+        setTimeout(updateInfo, update_freq)}
+    )
+    }
+
+    useEffect(updateInfo,[]);
+
+    return <div id="service-list" className="center-flex-row">
+        {services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+            navigator("/"+srv.id)
+        }} />)}
+    </div>
+}
+
+export default HomePage;

frontend/src/pages/Service.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+function Service() {
+    const {srv_id} = useParams()
+    return <div>
+        Service: {srv_id}
+    </div>
+}
+
+export default Service;