Time Annotations and Custom UI integration (#204)

* adds time annotations

* custom ui and button integration

* linting/updating

* update lock

* adding action buttons

* action buttons

* url history preserve

* formatting

* remove logging

* text-alignment

* enable either keyboard shortcut or buttons

* update AttributeShortcut type specification for optional key

Author: BryonLewis

client/dive-common/components/ActionEditors/ActionShortcuts.vue

@@ -13,13 +13,15 @@ import {
 import ActionEditor from './ActionEditor.vue';
 import GetShortcut from './GetShortcut.vue';
 import TrackFilter from './TrackFilter.vue';
+import ButtonShortcutEditor from '../CustomUI/ButtonShortcutEditor.vue';
 
 export default defineComponent({
   name: 'ActionShortcuts',
   components: {
     TrackFilter,
     GetShortcut,
     ActionEditor,
+    ButtonShortcutEditor,
   },
   props: {
     disabled: {
@@ -349,6 +351,12 @@ export default defineComponent({
               />
             </div>
           </div>
+          <div v-if="editingShortcut">
+            <button-shortcut-editor
+              v-model="editingShortcut.button"
+              :attribute="false"
+            />
+          </div>
           <v-row
             v-if="editingShortcut !== null"
             dense

client/dive-common/components/Attributes/AttributeEditor.vue

@@ -34,6 +34,7 @@ export default defineComponent({
     const { prompt } = usePrompt();
     const trackStyleManager = useTrackStyleManager();
     const name: Ref<string> = ref(props.selectedAttribute.name);
+    const description: Ref<string> = ref(props.selectedAttribute.description || '');
     const belongs: Ref<Attribute['belongs']> = ref(props.selectedAttribute.belongs);
     const datatype: Ref<Attribute['datatype']> = ref(props.selectedAttribute.datatype);
     const attributeColors:
@@ -66,11 +67,13 @@ export default defineComponent({
       },
 
     });
+    const lockedValues = ref(!!props.selectedAttribute.lockedValues);
     const attributeRendering = ref(!!props.selectedAttribute.render);
     const renderingVals = ref(props.selectedAttribute.render);
 
     function setDefaultValue() {
       name.value = '';
+      description.value = '';
       belongs.value = 'track';
       datatype.value = 'number';
       values = [];
@@ -90,6 +93,7 @@ export default defineComponent({
 
       const data: Attribute = {
         name: name.value,
+        description: description.value || undefined,
         belongs: belongs.value,
         datatype: datatype.value,
         values: datatype.value === 'text' && values ? values : [],
@@ -100,6 +104,7 @@ export default defineComponent({
         shortcuts: shortcuts.value,
         user: user.value ? true : undefined,
         render: renderingVals.value,
+        lockedValues: lockedValues.value,
       };
       if (valueOrder) {
         data.valueOrder = valueOrder;
@@ -222,6 +227,7 @@ export default defineComponent({
     };
     return {
       name,
+      description,
       belongs,
       color,
       colorEditor,
@@ -235,6 +241,7 @@ export default defineComponent({
       renderingVals,
       currentTab,
       attributeColors,
+      lockedValues,
       //computed
       textValues,
       shortcuts,
@@ -293,6 +300,10 @@ export default defineComponent({
                   || 'No spaces', v => v !== 'userAttributes' || 'Reserved Name']"
                 required
               />
+              <v-text-field
+                v-model="description"
+                label="Description"
+              />
               <v-select
                 :value="datatype"
                 :items="[
@@ -320,14 +331,24 @@ export default defineComponent({
                   />
                 </v-radio-group>
               </div>
-              <div>
+              <v-row dense>
                 <v-checkbox
                   v-model="user"
                   label="User Attribute"
                   hint="Attribute data is saved per user instead of globally."
                   persistent-hint
+                  class="py-2 mx-2"
                 />
-              </div>
+                <v-spacer />
+                <v-checkbox
+                  v-if="textValues.length && datatype === 'text'"
+                  v-model="lockedValues"
+                  label="Lock Values"
+                  hint="Lock Values to only predefined Values"
+                  persistent-hint
+                  class="py-2 mx-2"
+                />
+              </v-row>
               <div v-if="datatype === 'number' && editor && editor.type === 'slider'">
                 <v-row class="pt-2">
                   <v-text-field

client/dive-common/components/Attributes/AttributeInput.vue

@@ -38,6 +38,10 @@ export default defineComponent({
       type: Object as PropType<null | NumericAttributeEditorOptions | StringAttributeEditorOptions>,
       default: null,
     },
+    lockedValue: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, { emit }) {
     const tempVal = ref(props.value as null | boolean | number | string);
@@ -133,9 +137,8 @@ export default defineComponent({
         {{ type }}
       </option>
     </datalist>
-
     <input
-      v-if="datatype === 'text'"
+      v-if="datatype === 'text' && !lockedValue"
       ref="inputBoxRef"
       v-model="tempVal"
       type="text"
@@ -146,6 +149,13 @@ export default defineComponent({
       @focus="onFocus"
       @keydown="onInputKeyEvent"
     >
+    <v-select
+      v-else-if="datatype === 'text' && lockedValue"
+      v-model="tempVal"
+      :items="values"
+      class="input-box"
+      dense
+    />
     <input
       v-else-if="datatype === 'number' && (!typeSettings || typeSettings.type === 'combo')"
       ref="inputBoxRef"

client/dive-common/components/Attributes/AttributeShortcutToggle.vue

@@ -114,6 +114,7 @@ export default defineComponent({
         dataType: 'number' | 'text' | 'boolean';
         description: string; belongs: 'track' | 'detection'; name: string;
         list?: string[];
+        lockedValues?: boolean;
       }[] = [];
       attributes.value.forEach((attribute) => {
         if (attribute.shortcuts && attribute.shortcuts.length > 0) {
@@ -133,6 +134,7 @@ export default defineComponent({
               dataType: attribute.datatype,
               name: attribute.name,
               list: attribute.values,
+              lockedValues: !!attribute.lockedValues,
             });
           });
         }
@@ -169,7 +171,7 @@ export default defineComponent({
       const index = actionShortcuts.value.findIndex((item) => item.shortcut === shortcut);
       if (index !== -1) {
         actionShortcuts.value[index].actions.forEach((action) => {
-          systemHandler.processAction(action, true, { frame: frameRef.value });
+          systemHandler.processAction(action, true, { frame: frameRef.value }, store.state.User.user?.login);
         });
       }
     };
@@ -183,7 +185,7 @@ export default defineComponent({
       });
       if (index !== -1) {
         diveActionShortcuts.value[index].actions.forEach((action) => {
-          systemHandler.processAction(action, true, { frame: frameRef.value });
+          systemHandler.processAction(action, true, { frame: frameRef.value }, store.state.User.user?.login);
         });
       }
     };
@@ -251,6 +253,7 @@ export default defineComponent({
               confirm: true,
               valueType: shortcut.dataType,
               valueList: shortcut.list,
+              lockedValueList: !!shortcut.lockedValues,
             });
             if (val !== null) {
               updateAttribute({