Add an index to the List struct; use it to give lists text/background colors

src/list.rs

@@ -8,6 +8,7 @@ use std::path::PathBuf;
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct List {
     pub id: String,
+    pub index: i8,
     pub data: String,
     pub name: String,
     path: PathBuf
@@ -21,6 +22,7 @@ impl List {
 
     pub fn load_all() -> Vec<Self> {
         let mut lists : Vec<List> = vec![];
+        let mut index = 0;
         for entry in glob("lists/*.list").unwrap().filter_map(Result::ok) {
             let file_name = entry.file_name().unwrap().to_str().unwrap();
             let name = match file_name.find('.') {
@@ -35,11 +37,13 @@ impl List {
 
             let list = List {
                 id: String::from(name),
+                index : index,
                 data: data,
                 name: String::from(name).to_title_case(),
                 path: entry.clone()
             };
             lists.push(list);
+            index += 1;
         }
         lists
     }

static/js/wishlists.js

@@ -44,8 +44,14 @@ function triggerSelect(listId) {
   }).done(function(list) {
     curList = list;
     $('#listName').text('Lijst van ' + list.name)
-    $('#listUpdatedAt').text('Laaste aanpassing op: FIXME');
     $('#listData').html(list.data);
+    var bg_color   = ["info",  "primary", "danger", "success", "warning", "secondary"][list.index];
+    var text_color = ["light", "light",   "light",  "light",   "dark",    "dark"     ][list.index];
+    $('#listHtml').addClass("border-" + bg_color)
+                  .addClass("bg-" + bg_color)
+                  .addClass("text-" + text_color);
+    $('#listUpdatedAt').text('Laaste aanpassing op: FIXME');
+    $('#editButton').show();
   });
 }
 

templates/index.html.tera

@@ -33,7 +33,7 @@
       <div class="panel-heading">
         <h1 class="panel-title" id="listName"></h1>
       </div>
-      <div class="panel-body" id="listHtml"></div>
+      <div class="panel-body border p-3" id="listHtml"></div>
       <div class="panel-footer">
         <small><i id="listUpdatedAt"></i></small>
       </div>