show sync status

src/Database/Sync/Status.elm

@@ -0,0 +1,32 @@
+module Database.Sync.Status exposing (Status(..), decoder)
+
+import Json.Decode as Decode exposing (Decoder)
+
+
+type Status
+    = Active
+    | Idle
+    | Error String
+
+
+decoder : Decoder Status
+decoder =
+    Decode.andThen
+        (\event ->
+            case event of
+                "active" ->
+                    Decode.succeed Active
+
+                "paused" ->
+                    Decode.succeed Idle
+
+                "error" ->
+                    Decode.map Error (Decode.field "message" Decode.string)
+
+                "complete" ->
+                    Decode.succeed Idle
+
+                _ ->
+                    Decode.fail ("I don't know how to deal with a '" ++ event ++ "' event")
+        )
+        (Decode.field "event" Decode.string)

src/Main.elm

@@ -12,6 +12,7 @@ import Css.Reset
 import Database exposing (Database)
 import Database.ID as ID exposing (ID)
 import Database.Sync as Sync exposing (Sync)
+import Database.Sync.Status as SyncStatus
 import Html.Styled as Inaccessible
 import Html.Styled.Attributes as Attrs exposing (css)
 import Html.Styled.Events as Events
@@ -40,6 +41,7 @@ type alias Model key =
     , route : Route
     , currentTime : Posix
     , settings : Settings
+    , syncStatus : SyncStatus.Status
 
     -- view state
     , editing : Maybe Editing
@@ -75,6 +77,7 @@ init flags url key =
                 , route = Route.Root
                 , currentTime = now
                 , settings = settings
+                , syncStatus = SyncStatus.Idle
 
                 -- view state
                 , editing = Nothing
@@ -120,6 +123,7 @@ type Msg
     | UrlChanged Url
     | GotCurrentTime Posix
     | PouchDBPutSuccessfully Value
+    | PouchDBUpdatedSyncStatus Value
     | TimerTriggeredSave
     | TimerTriggeredSyncAll
     | TimerTriggeredCompaction
@@ -228,6 +232,16 @@ update msg model =
                 Err err ->
                     Debug.todo (Debug.toString err)
 
+        PouchDBUpdatedSyncStatus statusValue ->
+            case Decode.decodeValue SyncStatus.decoder statusValue of
+                Ok status ->
+                    ( { model | syncStatus = status }
+                    , NoEffect
+                    )
+
+                Err err ->
+                    Debug.todo (Debug.toString err)
+
         TimerTriggeredSave ->
             let
                 ( rows, database ) =
@@ -653,10 +667,14 @@ port compact : () -> Cmd msg
 port putSuccessfully : (Value -> msg) -> Sub msg
 
 
+port syncStatus : (Value -> msg) -> Sub msg
+
+
 subscriptions : Model key -> Sub Msg
 subscriptions model =
     Sub.batch
         [ putSuccessfully PouchDBPutSuccessfully
+        , syncStatus PouchDBUpdatedSyncStatus
         , Time.every 1000 (\_ -> TimerTriggeredSave)
         , Time.every 60000 (\_ -> TimerTriggeredSyncAll)
         , Time.every 120000 (\_ -> TimerTriggeredCompaction)
@@ -710,7 +728,7 @@ viewApplication model =
             )
             model.currentTime
             (Database.filter Node.isTitle model.database)
-        , viewSync [ css [ Css.property "grid-area" "sync" ] ]
+        , viewSync [ css [ Css.property "grid-area" "sync" ] ] model.syncStatus
         , Html.div [ css [ Css.property "grid-area" "note" ] ]
             [ case model.route of
                 Route.NotFound ->
@@ -777,21 +795,38 @@ viewNav attrs activeId now rows =
         ]
 
 
-viewSync : List (Attribute Never) -> Html Msg
-viewSync attrs =
+viewSync : List (Attribute Never) -> SyncStatus.Status -> Html Msg
+viewSync attrs status =
     Html.div
         (Attrs.css
             [ Css.borderTop3 (Css.px 1) Css.solid (Colors.toCss Colors.greyLight)
             , Css.borderRight3 (Css.px 1) Css.solid (Colors.toCss Colors.greyLight)
-            , Text.text
             ]
             :: attrs
         )
         [ Inaccessible.a
             [ Attrs.href (Route.toString Route.SyncSettings)
             , onClickPreventDefaultForLinkWithHref (UserWantsToNavigate Route.SyncSettings)
+            , Attrs.css
+                [ Text.text
+                , Css.color (Colors.toCss Colors.greenDark)
+                , Css.textDecoration Css.none
+                , Css.padding (Css.px 8)
+                , Css.display Css.block
+                ]
+            ]
+            [ Html.text "Sync" ]
+        , Html.p [ Attrs.css [ Text.text ] ]
+            [ case status of
+                SyncStatus.Active ->
+                    Html.text "Syncing"
+
+                SyncStatus.Idle ->
+                    Html.text ""
+
+                SyncStatus.Error message ->
+                    Html.text ("Error: " ++ message)
             ]
-            [ Html.text "Sync Settings" ]
         ]
 
 

src/index.js

@@ -74,11 +74,15 @@ var db = new PouchDB("notes");
     db.replicate.from(url).on("complete", (info) => {
       db.sync(url, { retry: true })
         .on("change", (info) => console.log("change", info))
-        .on("paused", (err) => console.log("paused", err))
-        .on("active", () => console.log("active"))
-        .on("denied", (err) => console.log("denied", err))
-        .on("complete", () => console.log("complete"))
-        .on("error", (err) => console.log("error", err));
+        .on("active", () => app.ports.syncStatus.send({ event: "active" }))
+        .on("paused", () => app.ports.syncStatus.send({ event: "paused" }))
+        .on("denied", (err) =>
+          app.ports.syncStatus.send({ event: "error", message: err })
+        )
+        .on("error", (err) =>
+          app.ports.syncStatus.send({ event: "error", message: err })
+        )
+        .on("complete", () => app.ports.syncStatus.send({ event: "complete" }));
     });
   });
 })();