Add the main tab

Author: HadrienMP

public/index.html

@@ -39,6 +39,11 @@
                 alarm.pause();
                 alarm.src = '';
                 break;
+            case 'CopyInPasteBin':
+                navigator.clipboard
+                    .writeText(command.value)
+                    .finally(() => app.ports.events.send({name: 'Copied', value: ""}))
+                break;
         }
     });
     alarm.addEventListener("ended", () => {

src/elm/Footer.elm

@@ -0,0 +1,20 @@
+module Footer exposing (..)
+
+import Html exposing (Html, a, footer, i, text)
+import Html.Attributes exposing (class, href, id, target)
+import Lib.Icons
+
+
+view : Html msg
+view =
+    footer
+        []
+        [ a
+            [ href "https://github.com/HadrienMP/mob-time-elm"
+            , id "git"
+            , target "blank"
+            ]
+            [ Lib.Icons.github
+            , text "Fork me on github!"
+            ]
+        ]

src/elm/Js/Commands.elm

@@ -11,6 +11,7 @@ type Command
     = SoundAlarm
     | SetAlarm Sound.Library.Sound
     | StopAlarm
+    | CopyInPasteBin String
 
 
 type alias OutCommand =
@@ -23,6 +24,9 @@ send : Command -> Cmd msg
 send command =
     commands <|
         case command of
+            CopyInPasteBin toCopy ->
+                OutCommand "CopyInPasteBin" <| Json.Encode.string toCopy
+
             SoundAlarm ->
                 OutCommand "SoundAlarm" Json.Encode.null
 
@@ -31,5 +35,3 @@ send command =
 
             StopAlarm ->
                 OutCommand "StopAlarm" Json.Encode.null
-
-

src/elm/Lib/BatchMsg.elm

@@ -0,0 +1,22 @@
+module Lib.BatchMsg exposing (update)
+
+type alias UpdateFunction msg model = msg -> model -> ( model, Cmd msg)
+
+update : List msg -> model -> UpdateFunction msg model -> ( model, Cmd msg)
+update msg model updateF =
+    update_ msg model [] updateF
+    |> Tuple.mapSecond Cmd.batch
+
+
+update_ : List msg -> model -> List (Cmd msg) -> UpdateFunction msg model -> ( model, List (Cmd msg) )
+update_ msg model commandAcc updateF =
+    case msg of
+        first :: other ->
+            let
+                ( updated, command ) =
+                    updateF first model
+            in
+            update_ other updated (command :: commandAcc) updateF
+
+        _ ->
+            ( model, commandAcc )

src/elm/Lib/Icons.elm

@@ -4,8 +4,13 @@ import Html exposing (i)
 import Html.Attributes exposing (class)
 import Ionicon
 import Ionicon.Android
+import Ionicon.Social
 import Svg exposing (Svg)
 
+github : Svg msg
+github =
+    display Ionicon.Social.github
+
 info : Svg msg
 info =
     display Ionicon.informationCircled

src/elm/Lib/Toaster.elm

@@ -3,8 +3,10 @@ module Lib.Toaster exposing (..)
 import Html exposing (Html, div, i, section, span, text)
 import Html.Attributes exposing (class, id)
 import Html.Events exposing (onClick)
+import Js.EventsMapping as EventsMapping exposing (EventsMapping)
 import Lib.Delay
 import Lib.Icons
+import Js.Events
 
 
 
@@ -64,6 +66,16 @@ add toAdd model =
 
 
 
+-- EVENTS SUBSCRIPTIONS
+
+
+eventsMapping : EventsMapping Msg
+eventsMapping =
+    [ Js.Events.EventMessage "Copied" (\_ -> Add <| Toast Success "The text has been copied to your clipboard!") ]
+        |> EventsMapping.create
+
+
+
 -- VIEW
 
 

src/elm/Main.elm

@@ -5,16 +5,19 @@ import Browser.Navigation as Nav
 import Circle
 import Clock.Model exposing (ClockState(..))
 import Html exposing (..)
-import Html.Attributes exposing (class, id)
+import Html.Attributes exposing (class, classList, id)
 import Html.Events exposing (onClick)
 import Js.Commands
 import Js.Events
+import Js.EventsMapping as EventsMapping exposing (EventsMapping)
 import Json.Decode
 import Json.Encode
+import Lib.BatchMsg
 import Lib.Duration as Duration exposing (Duration)
 import Lib.Icons as Icons
 import Lib.Ratio
 import Lib.Toaster exposing (Toasts)
+import Mob.Tabs.Home
 import Mobbers.Settings
 import Random
 import Shared
@@ -59,22 +62,36 @@ type AlarmState
     | Standby
 
 
+type Tab
+    = Main
+    | Mobbers
+    | Clock
+    | Sound
+    | Share
+
+
 type alias Model =
-    { shared : Shared.State
+    { key : Nav.Key
+    , url : Url.Url
+    , shared : Shared.State
     , mobbersSettings : Mobbers.Settings.Model
     , alarm : AlarmState
     , now : Time.Posix
     , toasts : Toasts
+    , tab : Tab
     }
 
 
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
-init _ _ _ =
-    ( { shared = Shared.init
+init _ url key =
+    ( { key = key
+      , url = url
+      , shared = Shared.init
       , mobbersSettings = Mobbers.Settings.init
       , alarm = Standby
       , now = Time.millisToPosix 0
       , toasts = []
+      , tab = Main
       }
     , Task.perform TimePassed Time.now
     )
@@ -96,8 +113,11 @@ type Msg
     | StopSound
     | AlarmEnded
     | UnknownEvent
+    | GotMainTabMsg Mob.Tabs.Home.Msg
     | GotMobbersSettingsMsg Mobbers.Settings.Msg
     | GotToastMsg Lib.Toaster.Msg
+    | SwitchTab Tab
+    | Batch (List Msg)
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -176,6 +196,9 @@ update msg model =
         UnknownEvent ->
             ( model, Cmd.none )
 
+        GotMainTabMsg subMsg ->
+            ( model, Mob.Tabs.Home.update subMsg |> Cmd.map GotMainTabMsg )
+
         GotMobbersSettingsMsg subMsg ->
             let
                 mobbersResult =
@@ -199,6 +222,12 @@ update msg model =
                     (\toasts -> { model | toasts = toasts })
                     (Cmd.map GotToastMsg)
 
+        SwitchTab tab ->
+            ( { model | tab = tab }, Cmd.none )
+
+        Batch messages ->
+            Lib.BatchMsg.update messages model update
+
 
 
 -- SUBSCRIPTIONS
@@ -221,7 +250,10 @@ toMsg event =
             AlarmEnded
 
         _ ->
-            UnknownEvent
+            Lib.Toaster.eventsMapping
+            |> EventsMapping.map GotToastMsg
+            |> EventsMapping.dispatch event
+            |> Batch
 
 
 
@@ -273,14 +305,29 @@ view model =
                     ]
                 ]
             , nav []
-                [ button [] [ Icons.home ]
-                , button [] [ Icons.clock ]
-                , button [] [ Icons.people ]
-                , button [] [ Icons.sound ]
-                , button [] [ Icons.share ]
+                [ button [ onClick <| SwitchTab Main, classList [ ( "active", model.tab == Main ) ] ] [ Icons.home ]
+                , button [ onClick <| SwitchTab Clock, classList [ ( "active", model.tab == Clock ) ] ] [ Icons.clock ]
+                , button [ onClick <| SwitchTab Mobbers, classList [ ( "active", model.tab == Mobbers ) ] ] [ Icons.people ]
+                , button [ onClick <| SwitchTab Sound, classList [ ( "active", model.tab == Sound ) ] ] [ Icons.sound ]
+                , button [ onClick <| SwitchTab Share, classList [ ( "active", model.tab == Share ) ] ] [ Icons.share ]
                 ]
-            , Mobbers.Settings.view model.shared.mobbers model.mobbersSettings
-                |> Html.map GotMobbersSettingsMsg
+            , case model.tab of
+                Main ->
+                    Mob.Tabs.Home.view "Awesome" model.url model.shared.mobbers
+                        |> Html.map GotMainTabMsg
+
+                Clock ->
+                    div [] []
+
+                Mobbers ->
+                    Mobbers.Settings.view model.shared.mobbers model.mobbersSettings
+                        |> Html.map GotMobbersSettingsMsg
+
+                Sound ->
+                    div [] []
+
+                Share ->
+                    div [] []
             , Lib.Toaster.view model.toasts |> Html.map GotToastMsg
             ]
         ]

src/elm/Mob/Tabs/Home.elm

@@ -0,0 +1,79 @@
+module Mob.Tabs.Home exposing (..)
+
+import Footer
+import Html exposing (Html, button, div, i, li, span, strong, text, ul)
+import Html.Attributes exposing (class, id, title)
+import Html.Events exposing (onClick)
+import Js.Commands
+import Lib.Icons
+import Mobbers.Model exposing (Mobber, Mobbers)
+import Mobbers.Settings
+import Url
+
+
+type Msg
+    = PutLinkInPasteBin Url.Url
+
+
+update : Msg -> Cmd Msg
+update msg =
+    case msg of
+        PutLinkInPasteBin url ->
+            Url.toString url
+                |> Js.Commands.CopyInPasteBin
+                |> Js.Commands.send
+
+
+view : String -> Url.Url -> Mobbers -> Html Msg
+view mobName url mobbers =
+    div
+        [ id "home", class "tab" ]
+        [ shareButton mobName url
+        , roles mobbers
+        , Footer.view
+        ]
+
+
+shareButton : String -> Url.Url -> Html Msg
+shareButton mob url =
+    button
+        [ onClick <| PutLinkInPasteBin url
+        , id "share-link"
+        , title "Copy this mob's link in your clipboard"
+        ]
+        [ shareText mob
+        , Lib.Icons.share
+        ]
+
+
+shareText : String -> Html Msg
+shareText mob =
+    span []
+        [ text "You are in the "
+        , strong [] [ text mob ]
+        , text " mob"
+        ]
+
+
+roles : Mobbers -> Html msg
+roles mobbers =
+    Mobbers.Settings.assignRoles mobbers
+        |> List.filter (\(_, mobber) -> mobber /= Nothing)
+        |> List.take 2
+        |> List.map roleView
+        |> (\list ->
+                case list of
+                    [] ->
+                        div [] []
+
+                    _ ->
+                        ul [ class "mobber-roles" ] list
+           )
+
+
+roleView : ( Maybe String, Maybe Mobber ) -> Html msg
+roleView (role, mobber) =
+    li [ class "mobber-role" ]
+        [ span [ class "role" ] [ role |> Maybe.withDefault "Wut ?" |> text ]
+        , span [ class "mobber" ] [ mobber |> Maybe.map .name |> Maybe.withDefault "Wut ?" |> text ]
+        ]

src/elm/Mobbers/Settings.elm

@@ -116,14 +116,16 @@ view mobbers model =
                 ]
             ]
         , ul []
-            (mobbers
-                |> assign [ "Driver", "Navigator" ]
+            (assignRoles mobbers
                 |> List.map mobberView
                 |> List.filter ((/=) Nothing)
                 |> List.map (Maybe.withDefault (li [] []))
             )
         ]
 
+assignRoles : Mobbers -> List ( Maybe String, Maybe Mobber )
+assignRoles mobbers =
+    assign [ "Driver", "Navigator" ] mobbers
 
 textFieldConfig : String -> (String -> msg) -> Field.String.ViewConfig msg
 textFieldConfig title toMsg =

src/sass/main.scss

@@ -59,6 +59,8 @@ a, button {
   cursor: pointer;
 }
 
+@include icon(1.2em, black);
+
 button {
   border-radius: 0;
   border: none;
@@ -147,6 +149,7 @@ hr {
     font-size: 1em;
     align-items: center;
     width: 100%;
+    @include icon(1.4em, black);
 
     span {
       flex: 1 1;
@@ -172,10 +175,12 @@ footer {
     &:hover {
       background: $dark-button-color;
       color: white;
+      @include icon(1.2em, white);
     }
 
     i {
       padding-right: 10px;
+      vertical-align: sub;
     }
   }
 }