Add ability to select a different background image

src/App/Settings/Ports.elm

···
+port module Settings.Ports exposing (..)
+
+import Settings.Types exposing (..)
+
+
+-- 💡
+
+
+port storeApplicationSettings : Model -> Cmd msg

src/App/Settings/State.elm

···
+module Settings.State exposing (..)
+
+import Settings.Ports as Ports
+import Settings.Types exposing (..)
+import Types as TopLevel exposing (ProgramFlags)
+
+
+-- 💧
+
+
+initialModel : ProgramFlags -> Model
+initialModel flags =
+    flags.settings.application
+
+
+
+-- 🔥
+
+
+update : Msg -> Model -> ( Model, Cmd TopLevel.Msg )
+update msg model =
+    case msg of
+        SetBackgroundImage filename ->
+            let
+                newModel =
+                    { model | backgroundImage = filename }
+            in
+                (!)
+                    newModel
+                    [ Ports.storeApplicationSettings newModel ]

src/App/Settings/Types.elm

···
+module Settings.Types exposing (..)
+
+-- Messages
+
+
+type Msg
+    = SetBackgroundImage String
+
+
+
+-- Model
+
+
+type alias Model =
+    { backgroundImage : String
+    }

src/App/Settings/View.elm

···
 module Settings.View exposing (..)
 
+import Color
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Html.Events exposing (onInput)
 import Material.Icons.Action as Icons
+import Material.Icons.Navigation as Icons
 import Material.Icons.Image as Icons
 import Navigation.View as Navigation
+import Settings.Types
 import Types exposing (Model, Msg(..))
 import Utils exposing (cssClass)
 import Variables exposing (colorDerivatives)
···
 
 -- Styles
 
+import Form.Styles as FormStyles
 import Styles exposing (Classes(..))
 
 
···
         ------------------------------------
         , div
             [ cssClass ContentBox ]
-            [ h1
-                []
-                [ text "Settings" ]
-            , div
-                [ cssClass EmptyState ]
-                [ Icons.panorama_wide_angle colorDerivatives.text 16
-                , div
-                    []
-                    [ text "Coming soon"
-                    ]
-                ]
+            [ h1 [] [ text "Settings" ]
+            , Html.map SettingsMsg (theForm model)
             ]
         ]
+
+
+theForm : Model -> Html Settings.Types.Msg
+theForm model =
+    Html.form
+        [ style
+            [ ( "max-width", "350px" ) ]
+        ]
+        [ label
+            []
+            [ text "Background image" ]
+        , div
+            [ cssClass FormStyles.SelectBox ]
+            [ select
+                [ onInput Settings.Types.SetBackgroundImage ]
+                (List.map
+                    (\( val, lbl ) ->
+                        option
+                            [ selected (val == model.settings.backgroundImage)
+                            , value val
+                            ]
+                            [ text lbl ]
+                    )
+                    backgroundImages
+                )
+            , Icons.expand_more (Color.greyscale 0.325) 20
+            ]
+        ]
+
+
+backgroundImages : List ( String, String )
+backgroundImages =
+    [ ( "1.jpg", "Option 1" )
+    , ( "2.jpg", "Option 2" )
+    , ( "3.jpg", "Option 3" )
+    , ( "4.jpg", "Option 4 (default)" )
+    , ( "5.jpg", "Option 5" )
+    , ( "6.jpg", "Option 6" )
+    , ( "7.jpg", "Option 7" )
+    ]

src/App/State.elm

···
 import Equalizer.State as Equalizer
 import Queue.State as Queue
 import Routing.State as Routing
+import Settings.State as Settings
 import Sources.State as Sources
 import Tracks.State as Tracks
 
···
     , equalizer = Equalizer.initialModel flags
     , queue = Queue.initialModel flags
     , routing = Routing.initialModel location
+    , settings = Settings.initialModel flags
     , sources = Sources.initialModel flags
     , tracks = Tracks.initialModel flags
     }
···
             Routing.update sub model.routing
                 |> mapModel (\x -> { model | routing = x })
                 |> handleRouteTransitions sub model
+
+        SettingsMsg sub ->
+            Settings.update sub model.settings
+                |> mapModel (\x -> { model | settings = x })
 
         SourcesMsg sub ->
             Sources.update sub model.sources

src/App/Types.elm

···
 import Equalizer.Types as Equalizer
 import Queue.Types as Queue
 import Routing.Types as Routing
+import Settings.Types as Settings
 import Sources.Types as Sources
 import Tracks.Types as Tracks
 
···
     | EqualizerMsg Equalizer.Msg
     | QueueMsg Queue.Msg
     | RoutingMsg Routing.Msg
+    | SettingsMsg Settings.Msg
     | SourcesMsg Sources.Msg
     | TracksMsg Tracks.Msg
       -- Children, Pt. 2
···
     , equalizer : Equalizer.Model
     , queue : Queue.Model
     , routing : Routing.Model
+    , settings : Settings.Model
     , sources : Sources.Model
     , tracks : Tracks.Model
     }
···
 
 
 type alias Settings =
-    { equalizer : Equalizer.Settings
+    { application : Settings.Model
+    , equalizer : Equalizer.Settings
     , queue : Queue.Settings
     , tracks : Tracks.Settings
     }

src/App/View.elm

···
                     style []
             ]
             []
+
+        --
+        -- Background image
+        --
+        , div
+            [ cssClass BackgroundImage
+            , style
+                [ ( "background-image"
+                  , "url(images/Background/" ++ model.settings.backgroundImage ++ ")"
+                  )
+                , case model.settings.backgroundImage of
+                    "1.jpg" ->
+                        ( "background-position", "center 30%" )
+
+                    _ ->
+                        ( "background-position", "center bottom" )
+                ]
+            ]
+            []
         ]
 
 

src/Css/Styles.elm

···
     -- <body>
     ------------------------------------------------------
     , body
-        [ backgroundColor (hex "#000")
+        [ backgroundColor (hex "#02070E")
+        , backgroundImage (url "/images/ep_naturalblack_pattern.jpg")
         , color (cssColor colorDerivatives.text)
         , defaultFont
         , fontSize (Css.rem 1)
···
     -- > Not on the <body> for a reason.
     ------------------------------------------------------
     , class BackgroundImage
-        [ backgroundImage (url "images/Background/4.jpg")
-        , backgroundPosition bottom
+        [ backgroundPosition bottom
         , backgroundSize cover
 
         -- For: 1.jpg

src/Js/elm-loader.js

···
 function initializeFlags(params) {
   return {
     settings: {
+      application: Object.assign(
+        { backgroundImage: "4.jpg" },
+        loadSettings("application")
+      ),
       equalizer: Object.assign(
         { low: 0, mid: 0, high: 0, volume: 1 },
         loadSettings("equalizer")
···
   app.ports.storeTracks.subscribe(v => storeData("tracks", v));
   app.ports.storeFavourites.subscribe(v => storeData("favourites", v));
 
+  app.ports.storeApplicationSettings.subscribe(s => saveSettings("application", s));
   app.ports.storeEqualizerSettings.subscribe(s => saveSettings("equalizer", s));
   app.ports.storeQueueSettings.subscribe(s => saveSettings("queue", s));
   app.ports.storeTracksSettings.subscribe(s => saveSettings("tracks", s));

src/Static/Html/Proxy.html

···
     </noscript>
   </div>
 
-  <div class="BackgroundImage"></div>
-
   <script>
     // insert loader
     document.getElementById("elm-container").innerHTML =