43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<template>
|
|
<fieldset>
|
|
<div>
|
|
<label for=measureType>Type</label>
|
|
<span v-if=measureExists>{{value.type}}</span>
|
|
<select
|
|
:disabled=disabled
|
|
name=measureType
|
|
v-if="!measureExists"
|
|
v-model=value.type>
|
|
<option value=simple>Simple</option>
|
|
<option value=text>Text</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for=measureIsVisible>Show by default.</label>
|
|
<input type=checkbox v-model=value.isVisible :disabled=disabled />
|
|
</div>
|
|
<div>
|
|
<label for=timestampDisplayFormat>Timestamp Format</label>
|
|
<select
|
|
v-on:change=formatSelectionChanged
|
|
:disabled=disabled
|
|
v-model=selectedFormat
|
|
name=timestampDisplayFormat>
|
|
<option v-for="fmtStr in formatStrings"
|
|
:value=fmtStr>{{now.format(fmtStr)}}</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
</div>
|
|
<div v-if="selectedFormat === 'custom'">
|
|
<label for=timestampCustomDisplayFormat>
|
|
Custom Timestamp Format
|
|
(<a target="_blank" href="https://momentjs.com/docs/#/displaying/format/">see formatting options</a>)
|
|
</label>
|
|
<input type=text v-model=value.timestampDisplayFormat />
|
|
</div>
|
|
<TextMeasureConfigForm v-model=value v-show="value.type === 'text'" :disabled=disabled />
|
|
</fieldset>
|
|
</template>
|
|
<script lang=ts src=./measure-config-form.ts></script>
|
|
<style lang=scss src=./measure-config-form.scss></style>
|