live-preview of selected theme on profile-page

src/Handler/Profile.hs

@@ -31,7 +31,7 @@ makeSettingForm template = identForm FIDsettings $ \html -> do
       <$> areq (natFieldI $ MsgNatField "Favoriten") -- TODO: natFieldI not working here
             (fslpI MsgFavoriten "Anzahl Favoriten") (stgMaxFavourties <$> template)
       <*> areq (selectFieldList themeList)
-            (fslI  MsgTheme         ) (stgTheme         <$> template)
+            (fslpI  MsgTheme "theme-select"       ) (stgTheme         <$> template) -- TODO: pass theme-select as id-attribute or similar.
       <*  submitButton
     return (result, widget) -- no validation required here
 
@@ -70,7 +70,7 @@ getProfileR = do
                 E.where_ $ adright ^. UserAdminUser E.==. E.val uid
                 E.on $ adright ^. UserAdminSchool E.==. school ^. SchoolId
                 return (school ^. SchoolShorthand)
-            ) 
+            )
             <*>
             (E.select $ E.from $ \(lecright `E.InnerJoin` school) -> do
                 E.where_ $ lecright ^. UserLecturerUser E.==. E.val uid

src/Model/Types.hs

@@ -185,7 +185,7 @@ termFromRational n = TermIdentifier{..}
     season
       | remainder == 0 = Summer
       | otherwise      = Winter
-  
+
 instance PersistField TermIdentifier where
   toPersistValue = PersistRational . termToRational
   fromPersistValue (PersistRational t) = Right $ termFromRational t
@@ -209,20 +209,20 @@ instance ToJSON TermIdentifier where
 
 instance FromJSON TermIdentifier where
   parseJSON = withText "Term" $ either (fail . Text.unpack) return . termFromText
-  
+
 {- Must be defined in a later module:
 termField :: Field (HandlerT UniWorX IO) TermIdentifier
 termField = checkMMap (return . termFromText) termToText textField
-  -- TODO: this is too simple and inconvenient, use selector and year picker  
+  -- TODO: this is too simple and inconvenient, use selector and year picker
--} 
+-}
 
 
 withinTerm :: Day -> TermIdentifier -> Bool
 time `withinTerm` term = timeYear `mod` 100 == termYear `mod` 100
-  where 
+  where
-    timeYear = fst3 $ toGregorian time      
+    timeYear = fst3 $ toGregorian time
-    termYear = year term 
+    termYear = year term
-      
+
 
 data StudyFieldType = FieldPrimary | FieldSecondary
   deriving (Eq, Ord, Enum, Show, Read, Bounded)
@@ -232,6 +232,7 @@ derivePersistField "StudyFieldType"
 -- Skins / Themes
 data Theme       --Simply add Themes to this type only. CamelCase will be converted to "-lower"
   = Default
+  | Lavender
   | NeutralBlue
   | AberdeenReds
   | MintGreen
@@ -258,5 +259,3 @@ instance Default Theme where
 -}
 
 derivePersistField "Theme"
-
-

templates/profile.julius

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  var themeSelector = document.querySelector('[placeholder="theme-select"]');
+  themeSelector.addEventListener('change', function() {
+    // get rid of old themes on body
+    var options = Array.from(themeSelector.options)
+    .forEach(function (option) {
+      document.body.classList.remove(optionToTheme(option));
+    });
+    // add newly selected theme
+    document.body.classList.add(optionToTheme(themeSelector.options[themeSelector.value - 1]));
+  });
+
+  function optionToTheme(option) {
+    return optionValue = 'theme--' + option.innerText.toLowerCase().trim().replace(/\s/g, '-');
+  }
+});