Make mega basic sections page

index.html

@@ -8,7 +8,8 @@
 <nav>
   <ul>
     <li><a href="#/">Home</a></li>
-    <li><a href="#/food">Food Planner (demo)</a></li>
+        <li><a href="#/sections">Section Planner (demo)</a></li>
+    <li><a href="#/food">Food Planner (demo)</a></li> 
   </ul>
 </nav>
 <div id="content"></div>

js/Page.js

@@ -1,9 +1,8 @@
 class Page {
   async renderPage() {
     try {
-      if (this.template) {
+
         this.parent.innerHTML = await this.templateContent()
-      }
 
       document.title = this.title
 
@@ -16,7 +15,11 @@ class Page {
   }
 
   async templateContent() {
+  if (this.template) {
     return await fetch(this.template).then((response) => response.text())
+  } else {
+  return ""
+  }
   }
 }
 

js/Router.js

@@ -1,10 +1,11 @@
 import FoodPage from "../pages/food/FoodPage.js"
-
+import SectionsPage from "../pages/sections/SectionsPage.js"
 class Router {
   static routes = {
     404: FoodPage, // NotFoundPage,
     "/": FoodPage, // HomePage,
-    "/food": FoodPage
+    "/food": FoodPage,
+    "/sections": SectionsPage
   }
 
   static parseUrl() {
@@ -53,10 +54,9 @@ class Router {
       const { path, urlParams } = this.parseUrl()
       const page = this.matchRoute(path, urlParams)
 
-      page.render()
+      await page.render()
     } catch (e) {
       console.error(`Error Routing [${window.location.hash}]: ${e.message}`)
-      console.error(e.location)
     }
   }
 

js/index.js

@@ -1,3 +1,29 @@
 import Router from "./Router.js"
+import Food from "./Food.js"
+import Section from "./Section.js"
 
+window.db = new Dexie("planmyhike")
+
+db.version(1).stores({
+  foods: `
+    ++id,
+    name,
+    calories,
+    carbs,
+    protein,
+    fat`,
+  sections: `
+    ++id,
+    name,
+    startMile,
+    endMile,
+    currentMile,
+    caloriesPerDay,
+    milesPerDay
+    `,
+})
+
+db.foods.mapToClass(Food)
+db.sections.mapToClass(Section)
+console.log("db done")
 Router.init()

pages/food/FoodPage.js

@@ -1,37 +1,10 @@
 import Renderer from "../../js/Renderer.js"
-import Section from "../../js/Section.js"
-import Food from "../../js/Food.js"
 import ShowTotals from "../../js/ShowTotals.js"
 import NewFood from "../../js/NewFood.js"
-import EditSection from "../../js/EditSection.js"
 import ShowFood from "../../js/ShowFood.js"
 import BarcodeScannerRenderer from "../../js/BarcodeScannerRenderer.js"
 import Page from "../../js/Page.js"
 
-window.db = new Dexie("planmyhike")
-
-db.version(1).stores({
-  foods: `
-    ++id,
-    name,
-    calories,
-    carbs,
-    protein,
-    fat`,
-  sections: `
-    ++id,
-    name,
-    startMile,
-    endMile,
-    currentMile,
-    caloriesPerDay,
-    milesPerDay
-    `,
-})
-
-db.foods.mapToClass(Food)
-db.sections.mapToClass(Section)
-
 class FoodPage extends Page {
   constructor(parent) {
     super()
@@ -42,17 +15,14 @@ class FoodPage extends Page {
   }
 
   async render() {
-    console.log("render()")
     await this.renderPage()
-    console.log("rendered page")
 
     const quickActions = document.getElementById("quickActions")
 
     ShowTotals.render(document.getElementById("totals"))
     ShowFood.render()
     BarcodeScannerRenderer.renderTrigger(quickActions)
     NewFood.renderTrigger(quickActions)
-    EditSection.renderTrigger(quickActions)
   }
 }
 

js/EditSection.js → pages/sections/AddSection.js

@@ -1,22 +1,22 @@
-import Renderer from "./Renderer.js"
-import Section from "./Section.js"
+import Renderer from "../../js/Renderer.js"
+import Section from "../../js/Section.js"
 
-class EditSection extends Renderer {
+class AddSection extends Renderer {
   constructor(section) {
     super()
     this.section = section
   }
 
   static renderTrigger(parent) {
     const button = document.createElement("button")
-    button.innerText = "🔧"
-    button.addEventListener("click", () => EditSection.render())
+    button.innerText = "➕"
+    button.addEventListener("click", () => AddSection.render())
 
     parent.appendChild(button)
   }
 
   static render(section = new Section()) {
-    return new EditSection(section).render()
+    return new AddSection(section).render()
   }
 
   render() {
@@ -78,4 +78,4 @@ class EditSection extends Renderer {
   }
 }
 
-export default EditSection
+export default AddSection

pages/sections/SectionsPage.js

@@ -0,0 +1,35 @@
+import Page from "../../js/Page.js"
+import AddSection from "./AddSection.js"
+
+class SectionPage extends Page {
+  constructor(parent) {
+    super()
+    this.parent = parent
+    // this.template = "/pages/food/index.html"
+    this.title = "Section Planner"
+    this.description = "plan hike fast"
+  }
+
+  async render() {
+    await this.renderPage()
+
+    const quickActions = document.createElement("div")
+    quickActions.classList.add("quickActions")
+    this.parent.appendChild(quickActions)
+
+    AddSection.renderTrigger(quickActions)
+
+    db.sections
+      .toArray()
+      .then((sections) => sections.forEach((s) => this.renderSection(s)))
+}
+
+renderSection(section) {
+let display = document.createElement("div")
+display.innerText = section.name
+
+this.parent.appendChild(display)
+}
+}
+
+export default SectionPage