@vue-skuilder/edit-ui 0.1.1

package/src/components/ViewableDataInputForm/FieldInput.types.ts

@@ -0,0 +1,33 @@
+import { CourseElo, ValidatingFunction, ValidationResult } from '@vue-skuilder/common';
+import { ComponentPublicInstance } from 'vue';
+
+export interface FieldInputInterface {
+  $refs: {
+    inputField: HTMLInputElement;
+  };
+  validationStatus: ValidationResult;
+  validators: ValidatingFunction[];
+  focus: () => void;
+  userInput: () => unknown;
+  setData: (data: unknown) => void;
+  clearData: () => void;
+  vuetifyRules: () => Array<(value: unknown) => boolean | string>;
+  generateTags: () => string[];
+  generateELO: () => CourseElo | undefined;
+  validate: () => ValidationResult;
+}
+
+// Type guard
+export function isFieldInput(component: unknown): component is FieldInputInstance {
+  return (
+    component !== null &&
+    typeof component === 'object' &&
+    'clearData' in component &&
+    'validate' in component &&
+    typeof (component as Record<string, unknown>).clearData === 'function' &&
+    typeof (component as Record<string, unknown>).validate === 'function'
+  );
+}
+
+// This combines the Vue component instance type with our interface
+export type FieldInputInstance = ComponentPublicInstance & FieldInputInterface;

package/src/components/ViewableDataInputForm/FieldInputs/AudioInput.vue

@@ -0,0 +1,188 @@
+<!--
+
+image and audio inputs are semi deprecated - not in use right now -
+     superceded by the generic fillIn type that allows images and audio from the
+     general mediaDragDropUploader
+
+<template>
+  <div>
+    <label class="text-h5" :for="field.name">{{ title }}: </label>
+
+    <div>
+      <v-btn-toggle mandatory multiple elevation-5>
+        <v-btn variant="flat">
+          <v-icon :color="recording ? 'red' : null" @click="record">mic</v-icon>
+        </v-btn>
+        <v-btn variant="flat">
+          <v-icon @click="stop">stop</v-icon>
+        </v-btn>
+        <v-btn variant="flat">
+          <v-icon @click="play">play_arrow</v-icon>
+        </v-btn>
+
+        <v-btn variant="flat"
+          ><label>
+            <input
+              :id="blobInputID"
+              ref="inputField"
+              :name="field.name"
+              type="file"
+              :class="validationStatus.status"
+              @change="processInput"
+            />
+            <span>Upload</span><v-icon>folder</v-icon>
+          </label>
+        </v-btn>
+      </v-btn-toggle>
+      <div :id="waveSurferId"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { ValidatingFunction } from '@vue-skuilder/common';
+import WaveSurfer from 'wavesurfer.js';
+import FieldInput from '../OptionsFieldInput';
+import MediaStreamRecorder from 'msr';
+import { FieldDefinition } from '../../../../base-course/Interfaces/FieldDefinition';
+
+export default defineComponent({
+  extends: FieldInput,
+  props: {
+    field: {
+      type: Object as PropType<FieldDefinition>,
+      required: true,
+    },
+    store: {
+      type: Object as PropType<object>,
+      required: true,
+    },
+    uiValidationFunction: {
+      type: Function as PropType<() => boolean>,
+      required: true,
+    },
+    autofocus: Boolean,
+  },
+  data() {
+    return {
+      recording: false as boolean,
+      blob: null as Blob | null,
+      blobURL: 'f' as string,
+      mediaRecorder: null as any,
+      wavesurfer: null as WaveSurfer | null,
+    };
+  },
+  computed: {
+    title(): string {
+      return this.field.name;
+    },
+    blobInputID(): string {
+      return 'blobInput' + this.field.name;
+    },
+    waveSurferId(): string {
+      return `ws-${this.field.name}`;
+    },
+    blobInputElement(): HTMLInputElement {
+      return document.getElementById(this.blobInputID) as HTMLInputElement;
+    },
+  },
+  methods: {
+    getValidators(): ValidatingFunction[] {
+      if (this.field.validator) {
+        return [this.field.validator.test];
+      } else {
+        return [];
+      }
+    },
+    async processInput() {
+      if (this.blobInputElement.files) {
+        const file = this.blobInputElement.files[0];
+        console.log(`
+Processing input file:
+Filename: ${file.name}
+File size: ${file.size}
+File type: ${file.type}
+`);
+        this.setData({
+          content_type: file.type,
+          data: file.slice(),
+        } as PouchDB.Core.FullAttachment);
+        this.validate();
+      }
+    },
+    blobHandler(blob: Blob | null): void {
+      if (blob === null) {
+        alert('nullBlob');
+      } else {
+        this.store[this.field.name] = {
+          content_type: 'image/png',
+          data: blob,
+        };
+        this.validate();
+      }
+    },
+    play() {
+      console.log(this.blobURL);
+      this.wavesurfer?.playPause();
+    },
+    stop() {
+      if (this.mediaRecorder) {
+        this.mediaRecorder.stop();
+        this.recording = false;
+
+        setTimeout(() => {
+          this.setData({
+            content_type: 'audio',
+            data: this.blob,
+          } as PouchDB.Core.FullAttachment);
+        }, 100);
+        this.validate();
+      }
+    },
+    reset() {
+      this.wavesurfer?.destroy();
+    },
+    record() {
+      this.recording = true;
+      this.wavesurfer = WaveSurfer.create({
+        container: `#${this.waveSurferId}`,
+        barWidth: 2,
+        barHeight: 1,
+        barGap: 0,
+      });
+
+      const mediaConstraints = {
+        audio: true,
+      };
+
+      navigator.mediaDevices
+        .getUserMedia(mediaConstraints)
+        .then((stream) => {
+          console.log(`stream ${JSON.stringify(stream)} found...`);
+          this.mediaRecorder = new MediaStreamRecorder(stream);
+          this.mediaRecorder.mimeType = 'audio/webm';
+          this.mediaRecorder.ondataavailable = (blob: Blob) => {
+            this.blob = blob;
+            this.blobURL = URL.createObjectURL(blob);
+            this.wavesurfer?.load(this.blobURL);
+          };
+          this.mediaRecorder.start(0);
+        })
+        .catch((e) => {
+          console.error('media error', e);
+        });
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './FieldInput.css';
+
+input[type='file'] {
+  display: none;
+}
+</style>
+
+-->

package/src/components/ViewableDataInputForm/FieldInputs/ChessPuzzleInput.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-text-field
+    ref="inputField"
+    v-model="modelValue"
+    variant="filled"
+    :name="field.name"
+    :label="field.name"
+    :rules="vuetifyRules()"
+    :autofocus="autofocus"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FieldInput from './OptionsFieldInput';
+import { CourseElo } from '@vue-skuilder/common';
+// import { FieldDefinition } from '../../../../base-course/Interfaces/FieldDefinition';
+
+export default defineComponent({
+  name: 'ChessPuzzleInput',
+  extends: FieldInput,
+
+  setup(props, ctx) {
+    // Get all the setup logic from parent
+    const parentSetup = FieldInput.setup?.(props, ctx);
+
+    const generateELO = () => {
+      if (!parentSetup) {
+        return;
+      }
+
+      const split = (parentSetup.modelValue.value as string).split(',');
+      const elo = parseInt(split[3]);
+      const count = parseInt(split[6]);
+
+      const crsElo: CourseElo = {
+        global: {
+          score: elo,
+          count,
+        },
+        tags: {},
+        misc: {},
+      };
+
+      const tags = generateTags();
+      tags.forEach((t) => {
+        crsElo.tags[t] = {
+          score: elo,
+          count,
+        };
+      });
+
+      console.log('generateELO', JSON.stringify(crsElo));
+
+      return crsElo;
+    };
+
+    const generateTags = () => {
+      if (!parentSetup) {
+        return [];
+      }
+
+      console.log(`CPI.generateTags: modelValue: ${parentSetup.modelValue.value}`);
+
+      const split = (parentSetup.modelValue.value as string).split(',');
+      const themes = split[7].split(' ');
+      const openingTags = split[9].split(' ');
+
+      return themes.map((t) => `theme-${t}`).concat(openingTags.map((t) => `opening-${t}`));
+    };
+
+    return {
+      ...parentSetup,
+      generateELO,
+      generateTags,
+    };
+  },
+});
+</script>

package/src/components/ViewableDataInputForm/FieldInputs/FieldInput.css

@@ -0,0 +1,12 @@
+.ok {
+  box-shadow: 2px 2px 2px #383;
+}
+.warn {
+  box-shadow: 2px 2px 2px yellow;
+}
+.error {
+  box-shadow: 2px 2px 2px red;
+}
+input {
+  margin: 3px;
+}

package/src/components/ViewableDataInputForm/FieldInputs/ImageInput.vue

@@ -0,0 +1,231 @@
+<!--
+
+image and audio inputs are semi deprecated - not in use right now -
+     superceded by the generic fillIn type that allows images and audio from the
+     general mediaDragDropUploader
+
+<template>
+  <div>
+    <label :for="field.name">{{ field.name }}: </label>
+    <div
+      class="drop-zone"
+      :class="{ 'drop-zone--over': isDragging }"
+      @drop="dropHandler"
+      @dragover.prevent="dragOverHandler"
+      @dragenter.prevent="dragEnterHandler"
+      @dragleave.prevent="dragLeaveHandler"
+    >
+      <template v-if="!thumbnailUrl">
+        Drop a file here...
+        <input
+          :id="blobInputID"
+          ref="inputField"
+          :name="field.name"
+          type="file"
+          :class="validationStatus.status"
+          accept="image/*"
+          @change="processInput"
+          @click.stop
+        />
+      </template>
+      <template v-else>
+        <img :src="thumbnailUrl" alt="Uploaded image thumbnail" class="thumbnail" />
+        <button @click="clearImage">Clear Image</button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ValidatingFunction } from '@vue-skuilder/common';
+import FieldInput from '../OptionsFieldInput';
+
+// [ ] delete this file ? (Jan 6, 2025)
+
+export default defineComponent({
+  name: 'ImageInput',
+  extends: FieldInput,
+
+  data() {
+    return {
+      isDragging: false,
+      dragCounter: 0,
+      thumbnailUrl: null as string | null,
+    };
+  },
+
+  computed: {
+    blobInputID(): string {
+      return 'blobInput' + this.field.name;
+    },
+
+    blobInputElement(): HTMLInputElement {
+      return document.getElementById(this.blobInputID) as HTMLInputElement;
+    },
+  },
+
+  methods: {
+    dragOverHandler(ev: DragEvent) {
+      ev.preventDefault();
+    },
+
+    dragEnterHandler(ev: DragEvent) {
+      ev.preventDefault();
+      this.dragCounter++;
+      this.isDragging = true;
+    },
+
+    dragLeaveHandler(ev: DragEvent) {
+      ev.preventDefault();
+      this.dragCounter--;
+      if (this.dragCounter === 0) {
+        this.isDragging = false;
+      }
+    },
+
+    dropHandler(ev: DragEvent) {
+      if (ev) {
+        ev.preventDefault();
+
+        this.isDragging = false;
+        this.dragCounter = 0;
+
+        if (ev.dataTransfer?.files.length) {
+          const file = ev.dataTransfer.files[0];
+          this.processDroppedFile(file);
+        } else if (ev.dataTransfer?.types.includes('text/plain') || ev.dataTransfer?.types.includes('text/uri-list')) {
+          const imgURL = ev.dataTransfer.getData('text');
+          this.fetchImg(imgURL);
+          console.log(`Dropped URL: ${imgURL}`);
+        } else {
+          console.error('Unsupported drop type');
+        }
+      } else {
+        console.error('dropHandler triggered with no event');
+      }
+    },
+
+    processDroppedFile(file: File) {
+      console.log(`
+Processing dropped file:
+
+Filename: ${file.name}
+File size: ${file.size}
+File type: ${file.type}
+`);
+      this.setData({
+        content_type: file.type,
+        data: file.slice(),
+      } as PouchDB.Core.FullAttachment);
+      this.createThumbnail(file);
+      this.validate();
+    },
+
+    async fetchImg(url: string) {
+      try {
+        const img = await fetch(url, {
+          mode: 'no-cors',
+          'content-type': 'image',
+        } as any);
+        const blob = await (img.body as any).blob();
+
+        const file = new File([blob], 'dropped_image', { type: blob.type });
+        this.setData({
+          content_type: file.type,
+          data: file.slice(),
+        });
+        this.createThumbnail(file);
+        this.validate();
+      } catch (error) {
+        console.error('Error fetching image:', error);
+      }
+    },
+
+    dragHandler(ev: DragEvent) {
+      console.log(`Dragging... ${JSON.stringify(ev)}`);
+    },
+
+    getValidators(): ValidatingFunction[] {
+      if (this.field.validator) {
+        return [this.field.validator.test];
+      } else {
+        return [];
+      }
+    },
+
+    removeDragData(ev: DragEvent) {
+      if (ev.dataTransfer!.items) {
+        ev.dataTransfer!.items.clear();
+      } else {
+        ev.dataTransfer!.clearData();
+      }
+    },
+
+    async processInput() {
+      if (this.blobInputElement.files) {
+        const file = this.blobInputElement.files[0];
+        console.log(`
+Processing input file:
+
+Filename: ${file.name}
+File size: ${file.size}
+File type: ${file.type}
+`);
+        this.setData({
+          content_type: file.type,
+          data: file.slice(),
+        } as PouchDB.Core.FullAttachment);
+        this.createThumbnail(file);
+        this.validate();
+      }
+    },
+
+    createThumbnail(file: File) {
+      const reader = new FileReader();
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        this.thumbnailUrl = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    },
+
+    clearImage() {
+      this.thumbnailUrl = null;
+      this.setData(null);
+      this.validate();
+      if (this.$refs.inputField) {
+        (this.$refs.inputField as HTMLInputElement).value = '';
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './FieldInput.css';
+
+.drop-zone {
+  border: 2px dashed #ccc;
+  border-radius: 4px;
+  padding: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+input[type='file'] {
+  box-shadow: none !important; /* uncertain where this is coming from */
+}
+
+.drop-zone--over {
+  border-color: #000;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail {
+  max-width: 100%;
+  max-height: 200px;
+  margin-bottom: 10px;
+}
+</style>
+
+-->

package/src/components/ViewableDataInputForm/FieldInputs/IntegerInput.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-text-field
+    ref="inputField"
+    v-model="modelValue"
+    variant="filled"
+    type="number"
+    :name="field.name"
+    :label="field.name"
+    :rules="vuetifyRules()"
+    :hint="validationStatus.msg"
+    :autofocus="autofocus"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { integerValidator } from './typeValidators';
+import FieldInput from './OptionsFieldInput';
+import { ValidatingFunction } from '@vue-skuilder/common';
+
+export default defineComponent({
+  name: 'IntegerInput',
+  extends: FieldInput,
+
+  setup(props, ctx) {
+    // Get all the setup logic from parent
+    const parentSetup = FieldInput.setup?.(props, ctx);
+
+    const validators = computed<ValidatingFunction[]>(() => {
+      const baseValidators = FieldInput.validators.call(this);
+
+      if (props.field.validator?.test) {
+        baseValidators.push(props.field.validator.test);
+      }
+
+      if (baseValidators) {
+        return [integerValidator, ...baseValidators];
+      } else {
+        return [integerValidator];
+      }
+    });
+
+    return {
+      ...parentSetup,
+      validators,
+    };
+  },
+});
+</script>

package/src/components/ViewableDataInputForm/FieldInputs/MarkdownInput.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-textarea
+    ref="inputField"
+    v-model="modelValue"
+    variant="filled"
+    :name="field.name"
+    :label="field.name"
+    :rules="vuetifyRules()"
+    :hint="validationStatus.msg"
+    :autofocus="autofocus"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FieldInput from './OptionsFieldInput';
+
+export default defineComponent({
+  name: 'MarkdownInput',
+  extends: FieldInput,
+  setup(props, ctx) {
+    // Get all the setup logic from parent
+    const parentSetup = FieldInput.setup?.(props, ctx);
+
+    return {
+      ...parentSetup,
+    };
+  },
+});
+</script>
+
+<style scoped>
+/* @import url('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css'); */
+</style>