Initial frontend

4 files changed, 152 insertions, 28 deletions

diff --git a/TJLaskuri.Web/Modules/Index.fs b/TJLaskuri.Web/Modules/Index.fs
new file mode 100644
index 0000000..7623779
--- /dev/null
+++ b/TJLaskuri.Web/Modules/Index.fs
@@ -0,0 +1,31 @@
+module TJLaskuri.Web.Modules.Index
+
+open System
+open Falco
+open TJLaskuri.Core
+
+[<AutoOpen>]
+module Views =
+    open TJLaskuri.Core.Views
+
+    type Model = {
+        Counter : Main.Model
+    }
+
+    let view model = 
+        Main.view model.Counter
+        |> Document.view
+
+let get : HttpHandler =
+    fun ctx ->
+        let time = DateTime.Now
+        let kontingent = kontingent 2 2025
+        let timeLeft = Domain.getTimeLeft kontingent ThreeFourSeven time |> Option.get
+        let completed = Domain.getTimeCompleted kontingent time |> Option.get
+
+        view {
+            Counter = {
+                TimeLeft = timeLeft
+                TimeCompleted = completed
+            }
+        } |> Response.ofHtml <| ctx
diff --git a/TJLaskuri.Web/Program.fs b/TJLaskuri.Web/Program.fs
index fb776e0..831d8a8 100644
--- a/TJLaskuri.Web/Program.fs
+++ b/TJLaskuri.Web/Program.fs
@@ -1,15 +1,23 @@
-open System

-open Microsoft.AspNetCore.Builder

-open Microsoft.Extensions.Hosting

-

-[<EntryPoint>]

-let main args =

-    let builder = WebApplication.CreateBuilder(args)

-    let app = builder.Build()

-

-    app.MapGet("/", Func<string>(fun () -> "Hello World!")) |> ignore

-

-    app.Run()

-

-    0 // Exit code

-

+open Microsoft.AspNetCore.Builder
+open Microsoft.Extensions.Hosting
+open Falco
+open Falco.Routing
+open TJLaskuri.Web.Modules
+
+let endpoints = [
+        get "/" Index.get
+    ]
+
+[<EntryPoint>]
+let main args =
+    let builder = WebApplication.CreateBuilder(args)
+    let app = builder.Build()
+
+    app.MapStaticAssets() |> ignore
+
+    app
+        .UseRouting()
+        .UseFalco(endpoints)
+        .Run()
+
+    0 // Exit code
diff --git a/TJLaskuri.Web/TJLaskuri.Web.fsproj b/TJLaskuri.Web/TJLaskuri.Web.fsproj
index 6ddf66a..6cd0654 100644
--- a/TJLaskuri.Web/TJLaskuri.Web.fsproj
+++ b/TJLaskuri.Web/TJLaskuri.Web.fsproj
@@ -1,15 +1,28 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">

-

-  <PropertyGroup>

-    <TargetFramework>net9.0</TargetFramework>

-  </PropertyGroup>

-

-  <ItemGroup>

-    <Compile Include="Program.fs" />

-  </ItemGroup>

-

+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Include="Modules/Index.fs" />
+    <Compile Include="Program.fs" />
+  </ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\TJLaskuri.Core\TJLaskuri.Core.fsproj" />
-  </ItemGroup>

-

-</Project>

+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Falco" Version="5.0.2" />
+  </ItemGroup>
+
+  <Target Name="CopyStaticAssets" BeforeTargets="Build">
+    <Message Text="Copying static assets" />
+    <Copy
+      SourceFiles="../TJLaskuri.Frontend/dist/index.js"
+      DestinationFiles="wwwroot/js/app.js"
+    />
+  </Target>
+
+</Project>
diff --git a/TJLaskuri.Web/wwwroot/styles.css b/TJLaskuri.Web/wwwroot/styles.css
new file mode 100644
index 0000000..66a6ef5
--- /dev/null
+++ b/TJLaskuri.Web/wwwroot/styles.css
@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+    max-width: none;
+}
+
+html {
+    font-size: 100%;
+}
+
+@font-face {
+    font-family: 'Cooper Black';
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+    src:
+         local('Cooper Black'),
+         url('https://cdn.jsdelivr.net/npm/fonts-archive-cooper-black/CooperBlack-Regular.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/npm/fonts-archive-cooper-black/CooperBlack-Regular.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/npm/fonts-archive-cooper-black/CooperBlack-Regular.otf') format('opentype'),
+         url('https://cdn.jsdelivr.net/npm/fonts-archive-cooper-black/CooperBlack-Regular.ttf') format('truetype');
+}
+
+body {
+    font-family: "Cooper Black", serif;
+    font-weight: bold;
+    max-width: 50rem;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.counter {
+    padding: 2rem;
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 900;
+}
+
+.counter_title {
+    display: block;
+    font-size: 1.2em;
+}
+
+.counter_value {
+    display: block;
+    margin: 0;
+    font-weight: 900;
+    font-size: 2.5em;
+}
+
+.counter_mornings {
+    display: block;
+}
+
+.progress-bar {
+    height: 25px;
+    border-radius: 5px;
+    border: 1px solid black;
+    background-color: lightgrey;
+}
+
+.progress-bar_value {
+    color: white;
+    height: 100%;
+    display: flex;
+    padding: 0 10px;
+    justify-content: flex-end;
+    align-items: center;
+    white-space: nowrap;
+    text-align: center;
+    border-radius: 5px;
+    min-width: 0;
+}