Switched client from submodule to included

openflexure_microscope/api/static/src/components/fieldComponents/checkList.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <label>{{ label }}</label>
+
+    <div class="uk-form-controls">
+      <div v-for="option in options" :key="option">
+        <label>
+          <input
+            class="uk-checkbox"
+            type="checkbox"
+            :value="option"
+            :checked="value && value.includes(option)"
+            v-bind="$attrs"
+            @change="updateValue($event.target)"
+          />
+          {{ option }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckList",
+
+  props: {
+    value: {
+      type: Array,
+      required: false,
+      default: function() {
+        return [];
+      }
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    updateValue(target) {
+      var newSelected = this.value != null ? [...this.value] : []; // Clone value array
+
+      if (target.checked) {
+        if (!newSelected.includes(target.value)) {
+          newSelected.push(target.value);
+        }
+      } else {
+        if (newSelected.includes(target.value)) {
+          newSelected = newSelected.filter(function(value) {
+            return value != target.value;
+          });
+        }
+      }
+      this.$emit("input", newSelected);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/htmlBlock.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p v-html="content"></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HtmlBlock",
+
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    content: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/keyvalList.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <form @submit.prevent="handleMetadataSubmit">
+      <div class="uk-margin-remove uk-flex uk-flex-middle">
+        <div
+          class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand"
+          uk-grid
+        >
+          <div class="uk-margin-remove uk-width-1-2">
+            <input
+              ref="textboxKey"
+              v-model="newMetadata.key"
+              class="uk-input uk-form-width-small uk-form-small"
+              type="text"
+              name="flavor"
+              placeholder="Key"
+            />
+          </div>
+          <div class="uk-margin-remove uk-width-1-2">
+            <input
+              v-model="newMetadata.value"
+              class="uk-input uk-form-width-small uk-form-small"
+              type="text"
+              name="flavor"
+              placeholder="Value"
+              @keyup.enter="handleMetadataSubmit()"
+            />
+          </div>
+        </div>
+
+        <a
+          href="#"
+          class="uk-icon uk-margin-left"
+          @click="handleMetadataSubmit()"
+          ><i class="material-icons">add_circle</i></a
+        >
+      </div>
+    </form>
+
+    <div
+      v-for="(val, key) in value"
+      :key="key"
+      class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle"
+    >
+      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
+        <labelInput
+          :name="key"
+          :label="key"
+          :value="value[key]"
+          @input="value[key] = $event"
+        />
+      </div>
+      <a href="#" class="uk-icon uk-width-auto" @click="delMetadataKey(key)"
+        ><i class="material-icons">delete</i></a
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import labelInput from "../fieldComponents/labelInput";
+
+export default {
+  name: "KeyvalList",
+
+  components: {
+    labelInput
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      newMetadata: {
+        key: "",
+        value: ""
+      }
+    };
+  },
+
+  methods: {
+    handleMetadataSubmit: function() {
+      var newSelected = {};
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value);
+      }
+
+      newSelected[this.newMetadata.key] = this.newMetadata.value;
+      this.newMetadata.key = "";
+      this.newMetadata.value = "";
+
+      this.$emit("input", newSelected);
+
+      // Move focus back to key textbox
+      this.$refs.textboxKey.focus();
+    },
+
+    delMetadataKey: function(key) {
+      var newSelected = {};
+
+      if (this.value != null) {
+        Object.assign(newSelected, this.value);
+      }
+
+      this.$delete(newSelected, key);
+
+      this.$emit("input", newSelected);
+    },
+
+    modifyValue: function(e, v) {
+      console.log(e);
+      console.log(v);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/labelInput.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <label class="uk-form-label uk-text-bold">{{ label }}</label>
+
+    <div
+      uk-tooltip="title: Click to edit value; delay: 250"
+      @click="setEditing(true)"
+    >
+      <div v-show="editing == false">
+        <label> {{ value }} </label>
+      </div>
+
+      <input
+        v-show="editing == true"
+        ref="textinput"
+        class="uk-input uk-form-small"
+        type="text"
+        :name="name"
+        :value="value"
+        autofocus
+        @blur="setEditing(false)"
+        @keyup.enter="setEditing(false)"
+        @input="$emit('input', $event.target.value)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LabelInput",
+
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      editing: false
+    };
+  },
+
+  methods: {
+    setEditing(editing) {
+      this.editing = editing;
+      if (editing == true) {
+        this.$nextTick(() => this.$refs.textinput.focus());
+      }
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/numberInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+
+    <input
+      class="uk-input uk-form-small"
+      type="number"
+      :name="name"
+      :value="value"
+      :placeholder="placeholder"
+      v-bind="$attrs"
+      @input="$emit('input', Number($event.target.value))"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NumberInput",
+
+  props: {
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    placeholder: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/radioList.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <label>{{ label }}</label>
+
+    <div class="uk-form-controls">
+      <div v-for="option in options" :key="option">
+        <label
+          ><input
+            class="uk-radio"
+            type="radio"
+            :name="name"
+            :value="option"
+            :checked="value == option"
+            @input="$emit('input', $event.target.value)"
+          />
+          {{ option }}</label
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RadioList",
+
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/selectList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+
+    <select
+      class="uk-select uk-form-small"
+      :value="value"
+      v-bind="$attrs"
+      @input="$emit('input', $event.target.value)"
+    >
+      <option v-for="option in options" :key="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SelectList",
+
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/tagList.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <form @submit.prevent="handleTagSubmit">
+      <div class="uk-margin-small uk-flex uk-flex-middle">
+        <div class="uk-margin-remove-top uk-width-expand">
+          <div class="uk-inline uk-width-1-1">
+            <span class="uk-form-icon"
+              ><i class="material-icons">label</i></span
+            >
+            <input
+              v-model="newTag"
+              class="uk-input uk-form-small"
+              type="text"
+              name="flavor"
+              placeholder="Tag"
+            />
+          </div>
+        </div>
+
+        <a href="#" class="uk-icon uk-margin-left" @click="handleTagSubmit()"
+          ><i class="material-icons">add_circle</i></a
+        >
+      </div>
+    </form>
+
+    <span
+      v-for="tag in value"
+      :key="tag"
+      class="uk-label uk-margin-small-right deletable-label"
+      @click="delTag(tag)"
+    >
+      {{ tag }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TagList",
+
+  props: {
+    value: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      newTag: ""
+    };
+  },
+
+  methods: {
+    handleTagSubmit: function() {
+      var newSelected = this.value != null ? [...this.value] : []; // Clone value array
+
+      newSelected.push(this.newTag);
+      this.newTag = "";
+
+      this.$emit("input", newSelected);
+    },
+
+    delTag: function(tag) {
+      var newSelected = this.value != null ? [...this.value] : []; // Clone value array
+
+      if (newSelected.includes(tag)) {
+        newSelected = newSelected.filter(function(value) {
+          return value != tag;
+        });
+      }
+
+      this.$emit("input", newSelected);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

openflexure_microscope/api/static/src/components/fieldComponents/textInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <label v-if="label" class="uk-form-label">{{ label }}</label>
+
+    <input
+      class="uk-input uk-form-small"
+      type="text"
+      :name="name"
+      :value="value"
+      :placeholder="placeholder"
+      v-bind="$attrs"
+      @input="$emit('input', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TextInput",
+
+  props: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style scoped></style>