Fixes #12961: Add a success / error message when saving changes

branding/src/main/elm/brandingManagement.html

@@ -5,7 +5,8 @@
 
    <title>Plugin Branding</title>
    <meta charset="utf8" />
-     <link rel="stylesheet" type="text/css" href="/toserve/branding/media.css" media="screen" data-lift="with-cached-resource">
+   <link rel="stylesheet" type="text/css" href="/toserve/branding/toasty.css" media="screen" data-lift="with-cached-resource">
+   <link rel="stylesheet" type="text/css" href="/toserve/branding/media.css"  media="screen" data-lift="with-cached-resource">
    <script src="/toserve/branding/branding.js" data-lift="with-cached-resource"></script>
 
    </head_merge>
@@ -14,8 +15,10 @@
      var main = document.querySelector("main");
      const flags = contextPath;
      var app  = Elm.Branding.embed(main, flags);
-     app.ports.check.subscribe(function(word) {
-       window.print();
+     app.ports.applyCss.subscribe(function(settings) {
+       var [bgColor, txtColor, txt] = settings;
+       $('#headerBar').css('background-color', bgColor).css('color', txtColor);
+       $('#headerBar > span').text(txt);
      });
    </script>
   </div>

branding/src/main/elm/elm-package.json

@@ -12,7 +12,8 @@
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
         "elm-lang/http": "1.0.0 <= v < 2.0.0",
-        "gdotdesign/elm-ui": "1.0.0 <= v < 2.0.0"
-     },
+        "gdotdesign/elm-ui": "1.0.0 <= v < 2.0.0",
+        "pablen/toasty": "1.0.4 <= v < 2.0.0"
+    },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

branding/src/main/elm/sources/Branding.elm

@@ -2,10 +2,12 @@ port module Branding exposing (..)
 
 import Html exposing (..)
 import Html.Events exposing (on, keyCode)
-import Ext.Color exposing(hsvToRgb)
+import Ext.Color exposing(hsvToRgb, toHsv, toCSSRgba)
 import Color
 import Ui.FileInput as FileInput
 import Ui.ColorPicker as ColorPicker
+import Toasty
+import Toasty.Defaults
 import DataTypes exposing (..)
 import View exposing(..)
 import JsonDecoder exposing (..)
@@ -14,7 +16,7 @@ import Json.Decode as Decode
 import ApiCall
 
 --- PORTS ---
-port check : String -> Cmd msg
+port applyCss : (String,String,String) -> Cmd msg
 
 --- MODEL ---
 
@@ -41,9 +43,10 @@ initSettings contextPath =
     (txtColorPicker, _) =
       ColorPicker.init ()
       |> ColorPicker.setValue Color.white
+    toasties = Toasty.initialState
 
     initData = FileData ""  ""  ""  ""
-    model = Model contextPath bgColorPicker txtColorPicker favFileInput wideFileInput squareFileInput loginFileInput defaultSettings initData
+    model = Model contextPath bgColorPicker txtColorPicker favFileInput wideFileInput squareFileInput loginFileInput defaultSettings initData toasties
   in
     model ! [ ApiCall.getSettings model ]
 
@@ -53,7 +56,6 @@ initSettings contextPath =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
   case msg of
-
 {-- Common branding messages --}
     ToggleCustomBar ->
       let
@@ -204,24 +206,37 @@ update msg model =
           let
             (bgColorPicker, _) = ColorPicker.setValue settings.bgColorValue model.bgColorPicker
             (textColorPicker, _) = ColorPicker.setValue settings.labelColorValue model.labelColorPicker
-            newModel = {model
+            newModel =
+              { model
               | settings = settings, bgColorPicker = bgColorPicker, labelColorPicker = textColorPicker
-            }
-        in
-          (newModel, Cmd.none)
+              }
+          in
+            (newModel, Cmd.none)
         Err err  ->
-          -- Need to display an error somehow
           (model, Cmd.none)
+            |> (createErrorNotification "Error while trying to fetch settings." err)
     SaveSettings result ->
       case result of
         Ok settings ->
-          (model, Cmd.none)
+          let
+            settings = model.settings
+            bgColor  = toHsv settings.bgColorValue
+              |> toCSSRgba
+            txtColor = toHsv settings.labelColorValue
+              |> toCSSRgba
+            labelTxt = settings.labelTxt
+          in
+            (model, applyCss (bgColor, txtColor, labelTxt))
+              |> (createSuccessNotification ("Your changes have been saved." ))
         Err err  ->
-          -- Need to display an error somehow
           (model, Cmd.none)
+            |> (createErrorNotification "Error while trying to save changes." err)
     SendSave ->
       (model, ApiCall.saveSettings model)
 
+    ToastyMsg subMsg ->
+      Toasty.update defaultConfig ToastyMsg subMsg model
+
 
 onKeyDown : (Int -> msg) -> Html.Attribute msg
 onKeyDown tagger =

branding/src/main/elm/sources/DataTypes.elm

@@ -3,6 +3,8 @@ import Ui.FileInput as FileInput
 import Ui.ColorPicker as ColorPicker
 import Http exposing(Error)
 import Color exposing(Color)
+import Toasty
+import Toasty.Defaults
 
 type alias Model =
   { contextPath      : String
@@ -14,6 +16,7 @@ type alias Model =
   , loginLogoFile    : FileInput.Model
   , settings         : Settings
   , fileData         : FileData
+  , toasties         : Toasty.Stack Toasty.Defaults.Toast
   }
 
 type alias FileData = {
@@ -70,4 +73,6 @@ type Msg =
   | GetSettings (Result Error Settings)
   | SaveSettings (Result Error Settings)
   | SendSave
+  -- NOTIFICATIONS
+  | ToastyMsg         (Toasty.Msg Toasty.Defaults.Toast)
   -- TEST

branding/src/main/elm/sources/View.elm

@@ -5,6 +5,9 @@ import Html.Events exposing (onClick,onInput,on, keyCode)
 import DataTypes exposing (..)
 import Ui.FileInput as FileInput
 import Ui.ColorPicker as ColorPicker
+import Toasty
+import Toasty.Defaults
+import Http exposing (Error)
 import Color exposing (Color)
 import Ext.Color exposing (toHsv, toCSSRgba)
 import ApiCall exposing (saveSettings)
@@ -96,7 +99,10 @@ view model =
       [ createPanel "Custom Bar"   "custom-bar"   customBar
       --, createPanel "Custom Logos" "custom-logos" customLogos
       , createPanel "Login Page"   "login-page"   loginPage
-      , div[][button[type_ "button", class "btn btn-success", onClick SendSave][text "Save"]]
+      , div[ class "toolbar"]
+        [ button[type_ "button", class "btn btn-success", onClick SendSave][text "Save"]
+        ]
+      , div[class "toasties"][Toasty.view defaultConfig Toasty.Defaults.view ToastyMsg model.toasties]
       ]
 
 -- HTML HELPERS
@@ -219,4 +225,52 @@ loginPagePreview settings =
           ]
         , div[class "form-foot"][]
       ]
-    ]
+    ]
+
+-- NOTIFICATIONS --
+getErrorMessage : Http.Error -> String
+getErrorMessage e =
+  let
+    errMessage = case e of
+      Http.BadStatus b  ->
+        let
+          status = b.status
+          message = status.message
+        in
+          ("Code "++Basics.toString(status.code)++" : "++message)
+      Http.BadUrl str -> "Invalid API url"
+      Http.Timeout      -> "It took too long to get a response"
+      Http.NetworkError -> "Network error"
+      Http.BadPayload str rstr -> str
+  in
+    errMessage
+
+tempConfig : Toasty.Config Msg
+tempConfig =
+  Toasty.Defaults.config
+    |> Toasty.delay 3000
+
+defaultConfig : Toasty.Config Msg
+defaultConfig =
+  Toasty.Defaults.config
+    |> Toasty.delay 999999999
+
+addTempToast : Toasty.Defaults.Toast -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
+addTempToast toast ( model, cmd ) =
+  Toasty.addToast tempConfig ToastyMsg toast ( model, cmd )
+
+addToast : Toasty.Defaults.Toast -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
+addToast toast ( model, cmd ) =
+  Toasty.addToast defaultConfig ToastyMsg toast ( model, cmd )
+
+createSuccessNotification : String -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
+createSuccessNotification message =
+  addTempToast (Toasty.Defaults.Success "Success!" message)
+
+createErrorNotification : String -> Http.Error -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
+createErrorNotification message e =
+  addToast (Toasty.Defaults.Error "Error..." (message ++ " ("++(getErrorMessage e)++")"))
+
+createDecodeErrorNotification : String -> String -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
+createDecodeErrorNotification message e =
+  addToast (Toasty.Defaults.Error "Error..." (message ++ " ("++(e)++")"))