diff --git a/src/Main.elm b/src/Main.elm
index 9b45a3222b9974c737443cff3e15b4fb881f5ab7..20f07d701aeb0beb7797bf224936c6e58ddd4d58 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -182,34 +182,139 @@ viewNav ( global, _ ) =
]
+viewHome : Global -> Html Msg
+viewHome global =
+ case global.progress of
+ Loading ->
+ Html.div [ Html.Attributes.style "margin" "auto" ]
+ [ Html.div [ Html.Attributes.class "loader" ] []
+ , Html.div
+ [ Html.Attributes.style "position" "relative"
+ , Html.Attributes.style "left" "1.5rem"
+ , Html.Attributes.style "bottom" "5rem"
+ ]
+ [ Html.text "Loading Data..." ]
+ ]
+
+ Failure msg ->
+ Html.text (msg |> (++) "Error while loading data. ")
+
+ Success ->
+ div []
+ [ Html.h2 []
+ [ text "Willkommen!" ]
+ , Html.p []
+ [ text "Herzlich Willkommen zu unserem Projekt im Rahmen des Moduls "
+ , Html.b [] [ text "Informationsvisualisierung" ]
+ , text " im Sommersemester 2024 an der Martin-Luther-Universität Halle-Wittenberg!"
+ ]
+ , Html.p []
+ [ text "In unserem Projekt geht es um die Aufbereitung und Visualisierung von Statistiken zu "
+ , Html.b [] [ text "Schengen Visa" ]
+ , text " für die Jahre 2014-2023."
+ , Html.br [] []
+ , text "Im Fokus steht dabei die Analyse der "
+ , Html.b [] [ text "Visafreundlichkeit" ]
+ , text " der Länder im Schengenraum, also die "
+ , Html.b [] [ text "a-priori Chance auf ein Visa" ]
+ , text " bei Antragstellung in der jeweiligen Auslandsvertretung (Konsulat)."
+ ]
+ , Html.p []
+ [ text "Ãœber die Icons in der Navigationsleiste kannst du zwischen den Visualisierungen wechseln." ]
+ , Html.p []
+ [ text "Das Icon "
+ , MapView.icon
+ , text " führt dich zur "
+ , Html.b [] [ text "Weltkarte" ]
+ , text " auf welcher du die Visafreundlichkeit der Schengenländer (grün) mittels "
+ , Html.b [] [ text "Chernoff Gesichtern" ]
+ , text " vergleichen kannst."
+ , text " Durch "
+ , Html.b [] [ text "Klick auf ein Drittland"]
+ , text " und ggf. anschließende Auswahl eines "
+ , Html.b [] [ text "Konsulats" ]
+ , text " kannst du die zur Berechnung der Gesichter verwendeten Daten filtern."
+ ]
+ , Html.p []
+ [ text "Mit dem Icon "
+ , ForceDirectedGraphView.icon
+ , text " kommst du zur "
+ , Html.b [] [ text "Force" ]
+ , text " Visualisierung der Beziehungen zwischen Schengen- und Drittländern."
+ , text " Auf der Legende kannst du ein "
+ , Html.b [] [ text "Schengenland selektieren" ]
+ , text ", sodass die zugehörigen Kanten in der Visualisierung rot markiert werden."
+ , text " Zusätzlich kann der Force-Graph mittels verschiedener Kräfte berechnet werden, was du durch "
+ , Html.b [] [ text "Klick der Version-Buttons" ]
+ , text " auswählen kannst."
+ , text " Die Größe der Schengenländer-Labels wird in der Visualisierung durch die"
+ , text " Beliebtheit, bzw. Anzahl erhaltener Visa-Anfragen, bestimmt."
+ , text " Durch "
+ , Html.b [] [ text "Auswahl eines Jahres" ]
+ , text " können die zur Berechnung zugrundegelegten Daten gefiltert werden."
+ , Html.br [] []
+ , Html.i [ Html.Attributes.style "font-size" "14px" ]
+ [ text "Bitte beachte, dass die Berechnung dieser Visualisierung bei unserer Datenmenge einige Zeit dauert." ]
+ ]
+ , Html.p []
+ [ text "Mit dem Icon "
+ , BarPlotView.icon
+ , text " kommst du zum "
+ , Html.b [] [ text "BarPlot" ]
+ , text ", in welchem du die "
+ , Html.b [] [ text "Anzahl beantragter und bewilligter Visa pro Schengenland" ]
+ , text " approximativ ablesen kannst."
+ , text " Das Auswahlfeld ermöglicht dir einen "
+ , Html.b [] [ text "Wechsel zwischen bewilligt/beantragten Visa" ]
+ , text " im Diagramm."
+ , text " Außerdem kannst du eine "
+ , Html.b [] [ text "obere Grenze der Werte angeben" ]
+ , text " um ggf. kleinere Balken in den Fokus zu rücken."
+ ]
+ , Html.p []
+ [ text "Mit dem Icon "
+ , LinePlotView.icon
+ , text " kommst du zum "
+ , Html.b [] [ text "LinePlot" ]
+ , text ", in welchem du eine "
+ , Html.b [] [ text "Zeitreihe der beantragten und bewilligten Visa" ]
+ , text " bzgl. eines Schengenlandes findest."
+ , text " Du kannst optional ein "
+ , Html.b [] [ text "Drittland auswählen" ]
+ , text " und die Einträge im Datensatz nach diesem filtern."
+ , text " Durch "
+ , Html.b [] [ text "Bewegung der Maus über die Grafik" ]
+ , text " kannst du die exakten Werte für ein konkretes Jahr ablesen."
+ ]
+ , Html.p []
+ [ text "Letztlich wechselst du mit dem Icon "
+ , DataTableView.icon
+ , text " zur "
+ , Html.b [] [ text "Datentabelle" ]
+ , text ", in welcher du den von uns verwendeten Datensatz durchsuchen kannst."
+ , text " Durch "
+ , Html.b [] [ text "Eingabe in die Suchleiste" ]
+ , text " filterst du nach dem Namen des Schengenlandes, Drittlandes oder Konsulats."
+ , text " Außerdem kannst du den "
+ , Html.b [] [ text "Index eines Eintrags angeben" ]
+ , text " zu welchem du springen möchtest."
+ ]
+ , Html.p []
+ [ text "Wir wünschen dir viel Spaß beim Ausprobieren und Analysieren!" ]
+ , Html.i [ Html.Attributes.style "font-size" "14px" ]
+ [ text "Hinweis: In manchen Visualisierungen tauchen Flaggen Icons auf."
+ , text " Abhängig vom Browser und Betriebssystem werden diese ggf. nicht als Flaggen,"
+ , text " sondern mit zwei Buchstaben angezeigt."
+ ]
+ ]
+
+
viewContent : Model -> Html Msg
viewContent ( global, local ) =
- let
- message =
- Html.div
- [ Html.Attributes.style "margin" "auto" ]
- (case global.progress of
- Loading ->
- [ Html.div [ Html.Attributes.class "loader" ] []
- , Html.div
- [ Html.Attributes.style "position" "relative"
- , Html.Attributes.style "left" "1.5rem"
- , Html.Attributes.style "bottom" "5rem"
- ]
- [ Html.text "Loading Data..." ]
- ]
-
- Failure msg ->
- [ Html.text (msg |> (++) "Error while loading data. ") ]
-
- Success ->
- [ Html.text "Data was loaded successfully!" ]
- )
- in
case global.view of
Home ->
div [ Html.Attributes.class "content" ]
- [ message ]
+ [ viewHome global ]
MapView ->
div [ Html.Attributes.class "content" ]