web: WIP Add new measure creation page.

web/src/router.ts

@@ -3,8 +3,9 @@ import { default as Router, Route } from 'vue-router';
 
 import Login from '@/views/Login.vue';
 import Measures from '@/views/Measures.vue';
-import UserAccount from '@/views/UserAccount.vue';
+import NewMeasure from '@/views/NewMeasure.vue';
 import QuickPanels from '@/views/QuickPanels.vue';
+import UserAccount from '@/views/UserAccount.vue';
 import { authStore } from '@/store';
 import { logService } from '@/services/logging';
 
@@ -43,6 +44,12 @@ const router = new Router({
       name: 'quick-panels',
       component: QuickPanels,
       meta: { requiresAuth: true }
+    },
+    {
+      path: '/new/measure',
+      name: 'new-measure',
+      component: NewMeasure,
+      meta: { requiresAuth: true }
     }
   ]
 });

web/src/views/NewMeasure.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id=new-measure>
+    <div class=header>
+      <h1>New Measure</h1>
+      <h2>What do you want to measure?</h2>
+    </div>
+    <form @submit.prevent=login() class=new-measure-form>
+      <fieldset>
+        <div>
+          <label for=measureName>Display Name</label>
+          <input
+            type=text
+            name=measureName
+            placeholder="what you are measuring"
+            v-model="measure.name" />
+        </div>
+        <div>
+          <label for=measureDescription>Description</label>
+          <input
+            type=text
+            name=measureDescription
+            placeholder="optional description"
+            v-model="measure.description" />
+        </div>
+        <div>
+          <label for=measureSlug>Slug (short-name)</label>
+          <input
+            type=text
+            name=measureDescription
+            :placeholder='slugFromName'
+            v-model="measure.slug" />
+        </div>
+      </fieldset>
+      <MeasureConfigForm :config=measure.config />
+    </form>
+  </div>
+</template>
+<script lang="ts" src="./new-measure.ts"></script>
+<style lang="scss" src="./new-measure.scss"></style>

web/src/views/new-measure.scss

@@ -0,0 +1,29 @@
+@import '~@/styles/vars';
+
+input,
+select {
+//  background-color: $bg-primary;
+
+/*
+  &::placeholder {
+    color: $fg-primary;
+    opacity: 1;
+  }
+*/
+  border: solid thin $color1;
+  border-radius: 4px;
+}
+
+select { background-color: white; }
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  label {
+    display: inline-block;
+    margin: .5rem 0;
+    min-width: 10em;
+  }
+}

web/src/views/new-measure.ts

@@ -0,0 +1,34 @@
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { logService } from '@/services/logging';
+import { userStore } from '@/store';
+import { Measure, MeasureConfig, MeasureType } from '@/models';
+import MeasureConfigForm from '@/components/measure-config/MeasureConfigForm.vue';
+
+const logger = logService.getLogger('/views/new-measure');
+
+@Component({
+  components: { MeasureConfigForm }
+})
+export class NewMeasure extends Vue {
+  private test: string = 'test';
+  private measure: Measure<MeasureConfig> = {
+    id: '',
+    config: {
+      type: 'simple' as MeasureType,
+      isVisible: true
+    },
+    description: '',
+    name: '',
+    slug: '',
+    userId: ''
+  };
+
+  private get slugFromName() {
+    return this.measure.name
+      .toLowerCase()
+      .replace(/[^\w\s]/g, '')
+      .replace(/\s+/g, '-');
+  }
+}
+
+export default NewMeasure;