Skip to content

Enkel valgomat for Studentparlamentet på UiB laget av friByte.

License

Notifications You must be signed in to change notification settings

fribyte-code/valgomat

Repository files navigation

Studentparlamentet Valgomat

Enkel valgomat for studenparlamentet på UiB laget av friByte.

Grunnlag

Studentparlamentet på UiB ønsker å utvikle en valgomat for å øke interessen rundt studentvalget som foregår hvert år.

Valgomaten er basert på NRK valgomat sin matematikk som ligger åpen tilgjengelig på Github https://github.com/nrkno/valg-valgomat-algoritme. For å lese mer om hvordan NRK har implementert sin valgomat se https://nrkbeta.no/2019/07/03/slik-snekret-vi-en-valgomat-for-hele-landet/.

Krav

  • Infoboks om valgomaten
  • Kunne deploye valgomaten inni for eksempel en wordpress side
  • Lett kunne bytte ut spørsmål og svar på valgomaten neste år
  • Vise en lett oversikt over hvor enig man er med hver liste
  • Fungere med keyboard
  • Støtte flere ulike påstander hvert år som bestemmes med url parameter
  • Støtte for å definere url hvor påstander skal hentes fra istedenfor å måtte bygge koden på nytt hvert år man har nye påstander

Deploy ny versjon:

  1. Legg inn csv fil med påstander i /src/data/ mappen på samme form som fiktive-statements.csv:
Spørsmål;Beskrivelse;ListeA;ListeB
UiB er best;Saken dreier seg om den evige krigen mellom UiB og HVL;-2;2
Bergen er best;Trenger ingen forklaring;1;2
  • Hvor første kolonne inneholder spørsmål, andre inneholder en lengre beskrivelse av saken og resten av kolonnene inneholder hvor enig eller uenig hver liste er på en skala fra -2 til 2.
  1. Rediger /src/App.vue og importer den nye csv filen på liknende vis som de andre. Og legg den til en case i switch operasjonen slik at om url parameteren er for eksempel 2023lister så vil den nye csv filen bli brukt.
  2. Bygg vue prosjektet (Dette gjøres i dag automatisk i GitHub actions)
  3. Deploy prosjektet til https://valgomat.fribyte.no (dette må i dag gjøres manuelt. Ved å slette containeren som kjører på pengebingen hos friByte, kjøre docker pull fribyte/valgomat:latest -> starte container igjen med env variabler som trengs.) sudo docker pull fribyte/valgomat:latest; sudo docker rm -f valgomat; sudo docker run --detach --name valgomat --env "VIRTUAL_PORT=3000" --env "VIRTUAL_HOST=valgomat.fribyte.no" --env "LETSENCRYPT_HOST=valgomat.fribyte.no" fribyte/valgomat:latest

Integrer valgomat i en nettside

Integrer https://valgomat.fribyte.no?pastander=2023lister som en iframe i nettsider som skal vise valgomaten med følgende kode:

<iframe src="https://valgomat.fribyte.no?pastander=2023lister&tema=studvest" height="600px" />
  • Det som står bak ?pastander= er en url parameter som bestemmer hvilke påstander som skal vises i valgomaten.

Følgende påstander eksisterer så langt, flere kommer med tiden:

2022lister
2023lister
  • Legger du til &tema=studvest i url vil du få en mer nøytral bakgrunn istedenfor studentparlamentet sin oransje farge.
  • Vi anbefaler minimum 600px høyde, bredde settes automatisk til full bredde, men kan og defineres selv med for eksempel width="90%".

Demo (utdatert)

Demo over valgomaten i bruk

Utvikling

Tekniske krav

Hvordan utvikle lokalt

  1. Innstaller node modules: npm install
  2. Kjør utviklingskommando: npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test

Lint with ESLint

npm run lint

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.