Du skal utvikla eit nettverksdashbord med Python og Flask.

Eit dashbord er ei nettside som visar informasjon på ein oversiktleis måte. Oppgåva din er å motta dømedata om ulike enhetar i eit nettverk, og bruka Flask og Jinja for å presentera desse opplýsingane.

Malet ikkje er å laga eitt verkeleg overvakningssystem no. Du skal fyrst og framast øva på:

• Flask
• ruter
• mallar
• å senda informasjon frå Python til HTML
• if-kontrollar og for-løkker i Jinja
• å laga ei ordna og brukarvenleg nettside

Data som du kan bruke ✅

devices = [
    {
        "name": "Hovudrutere",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Ruter",
        "status": "online",
        "response_time": 12,
        "location": "Tjenarom",
        "last_checked": "14:32:10",
        "uptime": "12 dagar",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Hovudrutar for nettverket"
    },
    {
        "name": "Netttennar",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Tenar",
        "status": "online",
        "response_time": 34,
        "location": "Tjenarom",
        "last_checked": "14:32:12",
        "uptime": "4 dagar",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Køyrer intern nettside"
    },
    {
        "name": "Printer",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Printer",
        "status": "offline",
        "response_time": None,
        "location": "Klasserom 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Ukjend",
        "notes": "Svarte ikkje på siste sjekk"
    },
    {
        "name": "Lærar-PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Datamaskin",
        "status": "online",
        "response_time": 18,
        "location": "Klasserom 204",
        "last_checked": "14:32:16",
        "uptime": "6 timar",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Lagrings_tenar",
        "status": "warning",
        "response_time": 87,
        "location": "Tjenarom",
        "last_checked": "14:32:18",
        "uptime": "38 dagar",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Høg responstid"
    }
]

Du treng ikkje vise all informasjonen. Vel sjølv kva som passar for dashbordet ditt. Du kan òg endre, leggje til eller fjerne data om du ønskjer det, eller dersom du meiner noko av datamengda er upresis (t.d.: må kanskje oppetid vere angitt i sekund? 🤔).

Opgåva

1. Lag eit dashboard

Lag ei nettside som viser informasjon om einingane i nettverket.

Korleis dashboaret skal sjå ut, står heilt på deg.

Du kan til dømes bruke:

• kort for kvar eining
• tabellar
• statusindikatorar
  -isjonar
• ikon
• fargar
• statistikk eller oppsummaringar

Dashboaret skal vere lett å skjøne nokre opnar sida.

2. Bruke Flask og ruter

Applikasjonen må bruke Flask.

Du må ha minst:

• éin rute som viser hovudsidan/dashbordet
• éin ekstra rute med ein annan funksjon

Korleis den ekstraprutene blir brukt, avgjer sjølv.

Ho kan for dømet:

• visa opplysningar om eitt visst apparat
• visa berre apparatar som er utanfor linja
• visa ei eigen statusside
• visa meir detaljerte opplysningar
• visa ei enkelt «about»-side

3. Bruk maler

HTML-sidene skal liggje i ein mappe som heiter templates.

Databasa skal sendast frå Python-koden til malen ved hjelp av Flask. Du skal bruke Jinja for å vise informasjonen dynamisk.

Løysinga skal bruke:

• variablar
• ei for-løkke
• ein if-sjekk

Du skal altså ikkje skriva informasjonen om alle einingane manuelt inn i HTML-koden.

4. Vis status på ein tydeleg måte

Dashbordet skal gjere det enkelt å sjå statusen til enhetane.

Til dømes:

• 🟢 Oppkopla
• 🟡 Varsel
• 🔴 Frakopla

Du kan bruke tekst, CSS, ikonar eller andre visuelle løysingar.

5. Gjer dashbordet til eige

Det finst ikkje éin rett veg for å løyse denne oppgåva.

Tenk gjennom:

• Kva informasjon er viktigast?
• Kvifor skal brukaren sjå fyrst?
• Kva treng ikkje bli vist?
• Korleis kan status visas tydeleg?
• Korleis kan sida vere auke sjølv om det finst mange einingar?
• Du kan bruka CSS og eventuelle JavaScript dersom du ønskjer det.

Krev

Løysinga må:

• bruke Python og Flask
• bruke minst to rutar
• bruke minst éin HTML-mal
• sende data frå Python til mala
• bruke Jinja
• bruke minst éin for-løype
• bruke minst éin if-test
• vise fleire element i datasetset
• ha ein tydeleg måte å vise status på

Ferdig?

Leveranse