Inicio Explorar Ayuda
Registro Iniciar sesión
lee
/
suma
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

Create the 'viewMenu' page.

Lee Morgan hace 11 meses
padre
9d9e3abc46
commit
c53080c831
Se han modificado 6 ficheros con 47 adiciones y 10 borrados
Dividir vista Mostrar estadísticas de diff
  1. 6 3
      src/views/css/addMenu.css
  2. 1 1
      src/views/index.html
  3. 2 0
      src/views/js/index.js
  4. 4 4
      src/views/js/pages/AddMenu.js
  5. 8 2
      src/views/js/pages/Home.js
  6. 26 0
      src/views/js/pages/ViewMenu.js

+ 6 - 3
src/views/css/addMenu.css
Ver fichero 

@@ -1,15 +1,18 @@
 
-#AddMenu{
 
+#AddMenu
 
+#ViewMenu{
 
     background: var(--surface);
 
     border: 5px solid var(--secondary);
 
 }
 
 
-#AddMenu .button{
 
+#AddMenu .button,
 
+#ViewMenu .button{
 
     width: 100%;
 
     max-width: 750px;
 
     padding: 15px;
 
 }
 
 
-#AddMenu .circleButton{
 
+#AddMenu .circleButton,
 
+#ViewMenu .circleButton{
 
     position: absolute;
 
     top: 15px;
 
     right: 15px;

+ 1 - 1
src/views/index.html
Ver fichero 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
 <head>
 
     <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width,width,initial-scale=1">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="theme-color" content="#6e4b3a">
 
     <meta name="description" content="Personal finance application">
 
     <link rel="icon" href="/logo.svg" type="image/svg+xml">

+ 2 - 0
src/views/js/index.js
Ver fichero 

@@ -10,6 +10,7 @@ import CreateIncome from "./pages/CreateIncome.js";
 
 import CreateBill from "./pages/CreateBill.js";
 
 import CreateAllowance from "./pages/CreateAllowance.js";
 
 import CreateTransaction from "./pages/CreateTransaction.js";
 
+import ViewMenu from "./pages/ViewMenu.js";
 
 
 const pages = document.querySelector(".page");
 
 let currentPage;
 
@@ -28,6 +29,7 @@ window.changePage = (page, data)=>{
 
         case "createBill": currentPage = new CreateBill(); break;
 
         case "createAllowance": currentPage = new CreateAllowance(); break;
 
         case "createTransaction": currentPage = new CreateTransaction(); break;
 
+        case "viewMenu": currentPage = new ViewMenu(); break;
 
     }
 
     console.timeEnd("change page");
 
 }

+ 4 - 4
src/views/js/pages/AddMenu.js
Ver fichero 

@@ -4,14 +4,14 @@ import Elem from "../Elem.js";
 
 export default class AddMenu extends Page{
 
     constructor(){
 
         super("AddMenu");
 
-        const logoutSvg = '<?xml version="1.0" encoding="UTF-8"?><svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
 
+        const closeSvg= '<?xml version="1.0" encoding="UTF-8"?><svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
 
-        this.render(logoutSvg);
 
+        this.render(closeSvg);
 
     }
 
 
-    render(logoutSvg){
 
+    render(closeSvg){
 
         new Elem("button")
 
-            .innerHtml(logoutSvg)
 
+            .innerHtml(closeSvg)
 
             .addClass("circleButton")
 
             .onclick(()=>{changePage("home")})
 
             .appendTo(this.container);

+ 8 - 2
src/views/js/pages/Home.js
Ver fichero 

@@ -10,6 +10,7 @@ export default class Home extends Page{
 
         const date = new Date();
 
         const month = date.toLocaleString("en-US", {month: "long"});
 
         let logoutSvg = '<svg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M12 12H19M19 12L16 15M19 12L16 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
+        let viewSvg = '<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M3 13C6.6 5 17.4 5 21 13" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
 
         if(!user.account.isPopulated){
 
             let from = new Date();
 
@@ -27,7 +28,7 @@ export default class Home extends Page{
 
                     new Notifier("error", "Unable to retrieve transactions");
 
                 });
 
         }
 
-        this.render(month, logoutSvg);
 
+        this.render(month, logoutSvg, viewSvg);
 
     }
 
 
     async logout(){
 
@@ -46,7 +47,7 @@ export default class Home extends Page{
 
         changePage("login");
 
     }
 
 
-    render(month, logoutSvg){
 
+    render(month, logoutSvg, viewSvg){
 
         new Elem("div")
 
             .addClass("buttonBox")
 
             .append(new Elem("button")
 
@@ -54,6 +55,11 @@ export default class Home extends Page{
 
                 .addClass("circleButton")
 
                 .onclick(()=>{changePage("addMenu")})
 
             )
 
+            .append(new Elem("button")
 
+                .innerHtml(viewSvg)
 
+                .addClass("circleButton")
 
+                .onclick(()=>{changePage("viewMenu")})
 
+            )
 
             .append(new Elem("button")
 
                 .innerHtml(logoutSvg)
 
                 .addClass("circleButton")

+ 26 - 0
src/views/js/pages/ViewMenu.js
Ver fichero 

@@ -0,0 +1,26 @@
 
+import Page from "./Page.js";
 
+import Elem from "../Elem.js";
 
+
 
+export default class ViewMenu extends Page{
 
+    constructor(){
 
+        super("ViewMenu");
 
+        const closeSvg = '<svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
+
 
+        this.render(closeSvg);
 
+    }
 
+
 
+    render(closeSvg){
 
+        new Elem("button")
 
+            .innerHtml(closeSvg)
 
+            .addClass("circleButton")
 
+            .onclick(()=>{changePage("home")})
 
+            .appendTo(this.container);
 
+
 
+        new Elem("button")
 
+            .text("Transactions")
 
+            .addClass("button")
 
+            .onclick(()=>{changePage("viewTransactions")})
 
+            .focus()
 
+            .appendTo(this.container);
 
+    }
 
+}