51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<template>
|
|
<div id=new-measure>
|
|
<div class=header>
|
|
<h1>New Measure</h1>
|
|
<h2>What do you want to measure?</h2>
|
|
</div>
|
|
<form @submit.prevent=createMeasure() class=new-measure-form>
|
|
<fieldset>
|
|
<div>
|
|
<label for=measureName>Display Name</label>
|
|
<input
|
|
:disabled=waiting
|
|
type=text
|
|
name=measureName
|
|
placeholder="what you are measuring"
|
|
required
|
|
v-model="measure.name" />
|
|
</div>
|
|
<div>
|
|
<label for=measureDescription>Description</label>
|
|
<textarea
|
|
:disabled=waiting
|
|
name=measureDescription
|
|
placeholder="optional description"
|
|
v-model="measure.description" ></textarea>
|
|
</div>
|
|
<div>
|
|
<label for=measureSlug>Short name (slug)</label>
|
|
<input
|
|
:disabled=waiting
|
|
type=text
|
|
name=measureDescription
|
|
:placeholder='slugFromName + " (default)"'
|
|
:value="measure.slug"
|
|
@input="measure.slug = slugify($event.target.value)"/>
|
|
</div>
|
|
</fieldset>
|
|
<MeasureConfigForm v-model=measure.config :disabled=waiting />
|
|
<div v-if='!waiting' class=form-actions>
|
|
<button class=btn-action>Create </button>
|
|
<a class=btn @click="$router.go(-1)">Cancel</a>
|
|
</div>
|
|
<div v-if='waiting' class=form-waiting>
|
|
<div class=wait-spinner>working <fa-icon icon=sync spin /></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" src="./new-measure.ts"></script>
|
|
<style lang="scss" src="./new-measure.scss"></style>
|