Add simple cover which lets users create new links

author: stuebinm 2021-03-07 22:04:42 +0100
committer: stuebinm 2021-03-07 22:04:42 +0100
commit: d8925def7fa6a359e11e612527d12a0280f44d84 (patch)
tree: 464d34c36f9789bf1bfcf6cde92529d7056177a0
parent: f5c19d2061e03ef28c45efd839bb211e446b25f6 (diff)
5 files changed, 117 insertions, 5 deletions
diff --git a/picarones-elm/cover.html b/picarones-elm/cover.html
new file mode 100644
index 0000000..d92eba9
--- /dev/null
+++ b/picarones-elm/cover.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Main</title>
+  <script src="Cover.js"></script>
+  <link rel="stylesheet" type="text/css" href="document.css" />
+</head>
+
+<body>
+  <div id="elm"></div>
+  <script>
+    var app = Elm.Cover.init({
+        node: document.getElementById('elm'),
+        flags: "https://picarones.stuebinm.eu"
+    });
+  </script>
+</body>
+</html>
diff --git a/picarones-elm/default.nix b/picarones-elm/default.nix
index d597f70..ed71959 100644
--- a/picarones-elm/default.nix
+++ b/picarones-elm/default.nix
@@ -44,7 +44,7 @@ in mkDerivation {
   
   srcs = ./elm-srcs.nix;
   src = ./.;
-  targets = ["Main"];
+  targets = ["Main" "Cover"];
   srcdir = "./src";
   outputJavaScript = true;
 }
diff --git a/picarones-elm/document.css b/picarones-elm/document.css
index e4379b6..7ec32ce 100644
--- a/picarones-elm/document.css
+++ b/picarones-elm/document.css
@@ -70,9 +70,31 @@ button.pressed {
   color: #eee;
 }
 
+.input-form {
+  max-width: 44em;
+  margin: auto;
+}
 
+.grid {
+  display: grid;
+  grid-column-gap: 2em;
+  grid-template-columns: 40% 60%;
+  text-align: left;
+  margin-top: 3em;
+}
 
+.gridentry {
+  display: inline-grid;
+  align-content: center;
+  text-align: right;
+}
 
+a {
+  color: #fb0;
+}
 
-
-
+.remark {
+  text-align: justify;
+  margin-top: 3em;
+  color: #bbb;
+}
diff --git a/picarones-elm/src/Cover.elm b/picarones-elm/src/Cover.elm
new file mode 100644
index 0000000..5c92e73
--- /dev/null
+++ b/picarones-elm/src/Cover.elm
@@ -0,0 +1,71 @@
+module Cover exposing (..)
+
+import Browser
+import Html exposing (..)
+import Html.Events exposing (onInput, onClick)
+import Html.Attributes exposing (..)
+
+
+main = Browser.document { init = init, update = update, view = view, subscriptions = (\m -> Sub.none)}
+
+
+
+type alias Model = (String, Int, String)
+
+init : String -> (Model, Cmd Msg)
+init baseurl = (("", 10, baseurl), Cmd.none)
+
+type Msg = Change String | SlideInc | SlideDec
+
+update : Msg -> Model -> (Model, Cmd Msg)
+update msg (prefix,m,b) = let model = case msg of
+                                          Change new -> (new, m, b)
+                                          SlideInc -> (prefix, m + 1, b)
+                                          SlideDec -> (prefix, Basics.max (m - 1) 1, b)
+                          in (model, Cmd.none)
+
+
+view : Model -> Browser.Document Msg
+view model = { title = "Picarones"
+             , body = [body model]
+             }
+
+
+body : Model -> Html Msg
+body (prefix, max, baseurl) =
+  div [class "input-form"] [ h1 [] [text "Create new slide session:"], div [] []
+         , div [ class "grid" ]
+             [ divtext "enter slide uri:", input [ placeholder "https://yourdomain.tld/path-to-slides", value prefix, onInput Change ] []
+             , divtext "number of slides:", mkNumberInput max
+             , divtext "your link:", mkLink (prefix, max, baseurl)
+             ]
+         , mkRemark prefix
+         ]
+
+divtext : String -> Html Msg
+divtext str = div [class "gridentry"] [text str]
+
+mkNumberInput : Int -> Html Msg
+mkNumberInput i =
+    span []
+        [ button [onClick SlideDec] [text "-"]
+        , text (String.fromInt i)
+        , button [onClick SlideInc] [text "+"]
+        ]
+
+mkLink : Model -> Html Msg
+mkLink (p, max, baseurl) = case p of
+    "" -> text "(none yet)"
+    prefix -> let link = baseurl ++ "/slide#" ++ prefix ++ "#" ++ (String.fromInt max)
+              in a [ href link ] [ text link ]
+
+
+mkRemark : String -> Html Msg
+mkRemark prefix = let example = case prefix of
+                                    "" -> "https://yourdomain.tld/path-to-slides/01.png"
+                                    _ -> prefix ++ "01.png"
+                  in div [class "remark"] [
+                       text ("""Your slides should be available at the above uri, postfixed with a
+                                double-digit  number and a .png extension, e.g. """ ++ example ++
+                               " should contain an image.")
+                      ]
diff --git a/picarones-elm/src/Main.elm b/picarones-elm/src/Main.elm
index 014d2f4..6e69fe4 100644
--- a/picarones-elm/src/Main.elm
+++ b/picarones-elm/src/Main.elm
@@ -36,7 +36,7 @@ type alias Model = { slide : Int, max : Int, prefix : String }
 
  -- start at the first slide, for now just assume that we have ten slides
 init : (String, Int) -> (Model, Cmd Msg)
-init (url, max) = ( { slide = 0, max = max, prefix = url ++ "/"}, Cmd.none)
+init (url, max) = ( { slide = 0, max = max, prefix = url}, Cmd.none)
 
  -- possible state transitions:
 type Msg = GotMessage String
@@ -102,7 +102,7 @@ padNum l num =
 
 
 view : Model -> Browser.Document Msg
-view model = { title = "Websockets example"
+view model = { title = "Picarones"
              , body = [body model]
              }
author	stuebinm	2021-03-07 22:04:42 +0100
committer	stuebinm	2021-03-07 22:04:42 +0100
commit	d8925def7fa6a359e11e612527d12a0280f44d84 (patch)
tree	464d34c36f9789bf1bfcf6cde92529d7056177a0
parent	f5c19d2061e03ef28c45efd839bb211e446b25f6 (diff)