Went with old school simple backend templates instead of js api.

features/survey/views.go

@@ -2,10 +2,88 @@ package features_survey
 
 import (
   "github.com/gofiber/fiber/v2"
-  . "MY/webapp/common"
+  // . "MY/webapp/common"
 )
 
+type Question struct {
+  Id int64
+  Question string
+  Answer bool
+  Result int
+}
+
+type Survey struct {
+  Id int64
+  Title string
+  Description string
+  Date string
+  Respondents int
+  State string
+  Questions []Question
+}
+
+func QueryData() Survey {
+  return Survey{
+    Title: "Sample Survey",
+    Description: "The description.",
+    Date: "01/20/26",
+    Respondents: 200,
+    State: "Finished",
+    Questions: []Question{
+      {
+        Id: 1,
+        Question: "Do you like HTML?",
+        Answer: true,
+        // TODO: just for prototyping, needs to be a better model
+        Result: 20,
+      },
+      {
+        Id: 2,
+        Question: "Do you like CSS?",
+        Answer: false,
+        Result: 11,
+      },
+      {
+        Id: 3,
+        Question: "Do you like JavaScript?",
+        Answer: true,
+        Result: 43,
+      },
+      {
+        Id: 4,
+        Question: "Are you a programmer?",
+        Answer: true,
+        Result: 28,
+      },
+    },
+  }
+}
+
+func GetPageIndex(c *fiber.Ctx) error {
+  return c.Render("survey/index", fiber.Map{
+    "Survey": QueryData(),
+  })
+}
+
+func GetPageSubmit(c *fiber.Ctx) error {
+  return c.Render("survey/submit", fiber.Map{
+    "Survey": QueryData(),
+  })
+}
+
+func GetPageFinalize(c *fiber.Ctx) error {
+  return c.Render("survey/finalize", fiber.Map{})
+}
+
+func GetPageResults(c *fiber.Ctx) error {
+  return c.Render("survey/results", fiber.Map{
+    "Survey": QueryData(),
+  })
+}
+
 func SetupViews(app *fiber.App) {
-  err := ConfigViews(app, "views/survey")
-  if err != nil { panic(err) }
+  app.Get("/survey/", GetPageIndex)
+  app.Get("/survey/submit", GetPageSubmit)
+  app.Get("/survey/finalize", GetPageFinalize)
+  app.Get("/survey/results", GetPageResults)
 }

views/survey/index.html

@@ -1,37 +1,4 @@
 <script>
-  const Survey = {
-    "Title": "Sample Survey",
-    "Description": "The description.",
-    "Questions": [
-      {
-        "Id": 1,
-        "Question": "Do you like HTML?"
-      },
-      {
-        "Id": 2,
-        "Question": "Do you like CSS?"
-      },
-      {
-        "Id": 3,
-        "Question": "Do you like JavaScript?"
-      },
-      {
-        "Id": 4,
-        "Question": "Are you a programmer?"
-      },
-    ]
-  };
-
-  $boot(async () => {
-    const items = Survey.Questions;
-    const list = $id('question-list');
-    const tmpl = $id('question-row');
-
-    for(let i in items) {
-      $append(list, $render(tmpl, {i, item: items[i]}));
-    }
-  });
-
   const resetForm = () => {
     $id('survey-form').reset();
   }
@@ -45,16 +12,16 @@
 }
 </style>
 
-<h1>Sample Survey</h1>
+<h1>{{ .Survey.Title }}</h1>
 
-<p>Solarpunk moka pot ceramics jean shorts. Cold-pressed fashion axe normcore four tet bandcamp ascot dad shoes bitters try-hard. Brooklyn slugging marxism XOXO gorpcore granny square humblebrag live-edge, fitzcarraldo mercury retrograde sound bath kickstarter van life freegan. Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</p>
+<p>{{ .Survey.Description }}</p>
 
 <form id="survey-form" action="/survey/submit">
   <grid id="question-list">
-    <template id="question-row">
-      <label for="question-${item.Id}">${item.Question}</label>
-      <input id="question-${item.Id}" type="checkbox" />
-    </template>
+    {{ range .Survey.Questions }}
+      <label for="question-{{ .Id }}">{{ .Question }}</label>
+      <input id="question-{{ .Id }}" type="checkbox" />
+    {{ end }}
   </grid>
 
   <button-group>

views/survey/results.html

@@ -1,42 +1,3 @@
-<script>
-  const Survey = {
-    "Title": "Sample Survey",
-    "Description": "The description.",
-    "Questions": [
-      {
-        "Id": 1,
-        "Question": "Do you like HTML?",
-        "Result": 20
-      },
-      {
-        "Id": 2,
-        "Question": "Do you like CSS?",
-        "Result": 33
-      },
-      {
-        "Id": 3,
-        "Question": "Do you like JavaScript?",
-        "Result": 48
-      },
-      {
-        "Id": 4,
-        "Question": "Are you a programmer?",
-        "Result": 2
-      },
-    ]
-  };
-
-  $boot(async () => {
-    const items = Survey.Questions;
-    const list = $id('question-list');
-    const tmpl = $id('question-row');
-
-    for(let i in items) {
-      $append(list, $render(tmpl, {i, item: items[i]}));
-    }
-  });
-</script>
-
 <style>
 #question-list {
     font-size: 1.1em;
@@ -46,23 +7,23 @@
 </style>
 
 
-<h1>Results of Survey "Sample Finished Survey"</h1>
+<h1>Results of Survey "{{ .Survey.Title }}"</h1>
 
 <block>
-  <p>Street art kettlebell burrata offal portra decolonize are.na akerman shabby chic blue bottle post-ironic breathwork. Roof party natural wine bell hooks cold plunge metrograph granny square ugh dad shoes garum before they sold out zines tahini side hustle. Indigo dye pork belly amaro, post-ironic health goth candle making van life hairpin robert walser.</p>
+  <p>{{ .Survey.Description }}</p>
   <bar>
-  <span>01/20/23</span> <span>Finished</span>
-  <span>Respondents: 200</span>
+  <span>{{ .Survey.Date }}</span> <span>{{ .Survey.State }}</span>
+  <span>Respondents: {{ .Survey.Respondents }}</span>
   </bar>
 </block>
 
 <h2>Questions</h2>
 
 <grid id="question-list">
-  <template id="question-row">
-    <label for="${item.Id}">${item.Question}</label>
-    <span>${item.Result}%</span>
-  </template>
+  {{ range .Survey.Questions }}
+    <label for="question-{{ .Id }}">{{ .Question }}</label>
+    <span>{{.Result}}%</span>
+  {{ end }}
 </grid>
 
 <a href="/">View More Surveys</a>

views/survey/submit.html

@@ -1,44 +1,3 @@
-<script>
-  const Survey = {
-    "Title": "Sample Survey",
-    "Description": "The description.",
-    "Questions": [
-      {
-        "Id": 1,
-        "Question": "Do you like HTML?",
-        "Answer": true,
-      },
-      {
-        "Id": 2,
-        "Question": "Do you like CSS?",
-        "Answer": true
-      },
-      {
-        "Id": 3,
-        "Question": "Do you like JavaScript?",
-        "Answer": true
-      },
-      {
-        "Id": 4,
-        "Question": "Are you a programmer?",
-        "Answer": true
-      },
-    ]
-  };
-
-  $boot(async () => {
-    const items = Survey.Questions;
-    const list = $id('question-list');
-    const tmpl = $id('question-row');
-
-    for(let i in items) {
-      const question = items[i];
-      question.Result = question.Answer ? "YES" : "NO";
-      $append(list, $render(tmpl, {i, item: question}));
-    }
-  });
-</script>
-
 <style>
 #question-list {
     font-size: 1.1em;
@@ -52,10 +11,10 @@
 <p>Please verify your answers are what you would like to say on this survey.</p>
 
 <grid id="question-list">
-  <template id="question-row">
-    <label for="${item.Id}">${item.Question}</label>
-    <span>${item.Result}</span>
-  </template>
+  {{ range .Survey.Questions }}
+    <label for="question-{{ .Id }}">{{ .Question }}</label>
+    <span>{{.Answer}}</span>
+  {{ end }}
 </grid>
 
 <button-group>