Viewing income can now show/hide archived items.

src/views/css/createAllowance.css

@@ -1,48 +1,3 @@
 #CreateAllowance h2{
     text-align: center;
 }
-
-#CreateAllowance .switch{
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 28px;
-}
-
-#CreateAllowance .switch input{
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-#CreateAllowance .slider{
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--textMuted, #ccc);
-  transition: 0.15s;
-  border-radius: 34px;
-}
-
-#CreateAllowance .slider::before{
-  position: absolute;
-  content: "";
-  height: 20px;
-  width: 20px;
-  left: 4px;
-  top: 4px;
-  background-color: white;
-  transition: 0.15s;
-  border-radius: 50%;
-}
-
-#CreateAllowance .switch input:checked + .slider{
-  background-color: var(--accent, #D4AF37);
-}
-
-#CreateAllowance .switch input:checked + .slider::before{
-  transform: translateX(22px);
-}

src/views/css/index.css

@@ -186,3 +186,48 @@ body{
 .notifier.success{
     background: var(--success);
 }
+
+.switch{
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+}
+
+.switch input{
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider{
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--textMuted, #ccc);
+  transition: 0.15s;
+  border-radius: 34px;
+}
+
+.slider::before{
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 4px;
+  top: 4px;
+  background-color: white;
+  transition: 0.15s;
+  border-radius: 50%;
+}
+
+.switch input:checked + .slider{
+  background-color: var(--accent, #D4AF37);
+}
+
+.switch input:checked + .slider::before{
+  transform: translateX(22px);
+}

src/views/css/viewCategory.css

@@ -7,6 +7,20 @@
     min-height: 100%;
 }
 
+#ViewIncome .switch{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 35px;
+    margin: 35px 0 15px 0;
+}
+
+#ViewIncome .switch p{
+    position: absolute;
+    width: 100px;
+    top: -20px;
+}
+
 .categoryContainer{
     display: flex;
     flex-direction: column;
@@ -34,3 +48,7 @@
 .categoryItemSpent{
     font-weight: bold;
 }
+
+#ViewIncome .strike{
+    text-decoration: line-through;
+}

src/views/js/Elem.js

@@ -32,6 +32,11 @@ export default class Elem {
         return this;
     }
 
+    checked(v){
+        this.elem.checked = v;
+        return this;
+    }
+
     type(v){
         this.elem.type = v;
         return this;

src/views/js/pages/EditIncome.js

@@ -20,6 +20,7 @@ export default class EditIncome extends Page{
 
     archive(income){
         income.active = !income.active;
+        user.account.save();
         new Elem(this.container.querySelector(".archive"))
             .text(income.active ? "Archive" : "Restore");
         changePage("viewIncome");

src/views/js/pages/ViewIncome.js

@@ -6,7 +6,7 @@ export default class ViewIncome extends Page{
     constructor(){
         super("ViewIncome", ["home", "back-viewMenu", "logout"]);
 
-        this.render();
+        this.render(false);
     }
 
     generateColor(spent, amount){
@@ -26,17 +26,20 @@ export default class ViewIncome extends Page{
         return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
     }
 
-    render(){
-        new Elem("h1")
-            .text(`${user.account.name} income`)
-            .appendTo(this.container);
+    toggleActive(){
+        const showArchived = this.container.querySelector(".archiveCheckbox").checked;
+        this.renderItems(showArchived);
+    }
 
-        const incomeContainer = new Elem("div")
-            .addClass("categoryContainer")
-            .appendTo(this.container);
+    renderItems(showArchived){
+        const container = this.container.querySelector(".categoryContainer");
+        while(container.children.length > 0){
+            container.removeChild(container.lastChild);
+        }
 
         const income = user.account.income;
         for(let i = 0; i < income.length; i++){
+            if(!showArchived && !income[i].active) continue;
             const spent = user.account.categorySpent(income[i]);
             const spentAsCurrency = Format.currency(user.account.categorySpent(income[i]));
             const amount = income[i].amount;
@@ -47,6 +50,7 @@ export default class ViewIncome extends Page{
                 .onclick(()=>{changePage("editIncome", income[i])})
                 .append(new Elem("p")
                     .text(income[i].name)
+                    .addClass(income[i].active ? "none" : "strike")
                 )
                 .append(new Elem("p")
                     .addClass("categoryItemSpent")
@@ -62,7 +66,35 @@ export default class ViewIncome extends Page{
                         .addStyle("color", "hsl(120, 50%, 28%)")
                     )
                 )
-                .appendTo(incomeContainer);
+                .appendTo(container);
         }
     }
+
+    render(showArchived){
+        new Elem("h1")
+            .text(`${user.account.name} income`)
+            .appendTo(this.container);
+
+        new Elem("label")
+            .addClass("switch")
+            .append(new Elem("p")
+                .text("Show Archived")
+            )
+            .append(new Elem("input")
+                .type("checkbox")
+                .addClass("archiveCheckbox")
+                .checked(false)
+                .onchange(this.toggleActive.bind(this))
+            )
+            .append(new Elem("span")
+                .addClass("slider")
+            )
+            .appendTo(this.container);
+
+        new Elem("div")
+            .addClass("categoryContainer")
+            .appendTo(this.container);
+
+        this.renderItems(showArchived);
+    }
 }