feat: update randomizer calls

sogebot · Jan 19, 2023 · 5f0d8f5 · 5f0d8f5
1 parent c746e79
commit 5f0d8f5
Show file tree

Hide file tree

Showing 14 changed files with 198 additions and 258 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,13 +13,11 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
-    "vue/first-attribute-linebreak": ["error", {
-      "singleline": "ignore",
-      "multiline": "below"
-    }],
-    "vue/multi-word-component-names": ["warn", {
-      "ignores": []
+    'vue/first-attribute-linebreak': ['error', {
+      singleline: 'ignore',
+      multiline:  'below',
     }],
+    'vue/multi-word-component-names':       ['warn', { ignores: [] }],
     'func-call-spacing':                    'off',
     '@typescript-eslint/func-call-spacing': ['error'],
     'key-spacing':                          ['error', {

diff --git a/components/randomizer/table.vue b/components/randomizer/table.vue
@@ -87,13 +87,13 @@
 </template>
 
 <script lang="ts">
+import type { Randomizer } from '@entity/randomizer';
 import {
   defineAsyncComponent, defineComponent, onMounted, ref, watch,
 } from '@nuxtjs/composition-api';
 import translate from '@sogebot/ui-helpers/translate';
 import { orderBy } from 'lodash';
 
-import type { RandomizerItemInterface } from '@entity/randomizer';
 import { EventBus } from '~/functions/event-bus';
 import {
   isHexColor, minValue, required,
@@ -102,11 +102,11 @@ import {
 const originalWidths: string[] = [];
 const originalHeight: number[] = []; // needed for grouped elements
 
-function handleDragStart (_e: DragEvent, id: string, items: Required<RandomizerItemInterface>[]) {
+function handleDragStart (_e: DragEvent, id: string, items: Required<Randomizer['items'][number]>[]) {
   EventBus.$emit(`randomizer::dragstart`);
 
   const getChildren = (parentId: string) => {
-    const groupedChildren: Required<RandomizerItemInterface>[] = [];
+    const groupedChildren: Required<Randomizer['items'][number]>[] = [];
 
     const children = items.filter(o => o.groupId === parentId);
     if (children.length === 0) {
@@ -198,13 +198,9 @@ function handleDragStart (_e: DragEvent, id: string, items: Required<RandomizerI
     if (parent2) {
       try {
         const offsetId = parent2.children[0].children[0].id.replace('drag|', '');
-        EventBus.$emit(`randomizer::dragdrop`, {
-          items: [parent, ...children], offsetId,
-        });
+        EventBus.$emit(`randomizer::dragdrop`, { items: [parent, ...children], offsetId });
       } catch {
-        EventBus.$emit(`randomizer::dragdrop`, {
-          items: [parent, ...children],
-        });
+        EventBus.$emit(`randomizer::dragdrop`, { items: [parent, ...children] });
       }
     }
     for (const element of elements) {
@@ -219,15 +215,9 @@ function handleDragStart (_e: DragEvent, id: string, items: Required<RandomizerI
 }
 
 export default defineComponent({
-  props: {
-    value: Array,
-  },
-  components: {
-    color: defineAsyncComponent({
-      loader: () => import('~/components/form/color.vue'),
-    }),
-  },
-  setup (props: { value: RandomizerItemInterface[] }, ctx) {
+  props:      { value: Array },
+  components: { color: defineAsyncComponent({ loader: () => import('~/components/form/color.vue') }) },
+  setup (props: { value: Randomizer['items'][number][] }, ctx) {
     const model = ref(props.value);
     const isDragging = ref(false);
 
@@ -239,27 +229,13 @@ export default defineComponent({
     };
 
     const headers = [
-      {
-        value: 'drag', text: '',
-      },
-      {
-        value: 'name', text: translate('registry.randomizer.form.name'),
-      },
-      {
-        value: 'color', text: translate('registry.randomizer.form.color'),
-      },
-      {
-        value: 'numOfDuplicates', text: translate('registry.randomizer.form.numOfDuplicates'),
-      },
-      {
-        value: 'minimalSpacing', text: translate('registry.randomizer.form.minimalSpacing'),
-      },
-      {
-        value: 'groupBtn', text: '',
-      },
-      {
-        value: 'delBtn', text: '',
-      },
+      { value: 'drag', text: '' },
+      { value: 'name', text: translate('registry.randomizer.form.name') },
+      { value: 'color', text: translate('registry.randomizer.form.color') },
+      { value: 'numOfDuplicates', text: translate('registry.randomizer.form.numOfDuplicates') },
+      { value: 'minimalSpacing', text: translate('registry.randomizer.form.minimalSpacing') },
+      { value: 'groupBtn', text: '' },
+      { value: 'delBtn', text: '' },
     ];
 
     const rmOption = (id: string) => {
@@ -284,7 +260,7 @@ export default defineComponent({
       EventBus.$on(`randomizer::dragstop`, () => {
         isDragging.value = false;
       });
-      EventBus.$on(`randomizer::dragdrop`, (data: {items: RandomizerItemInterface[], offsetId?: string}) => {
+      EventBus.$on(`randomizer::dragdrop`, (data: {items: Randomizer['items'][number][], offsetId?: string}) => {
         // reorder model
         // remove id
         for (const item of data.items) {
@@ -313,9 +289,7 @@ export default defineComponent({
         } else {
           // save as last item
           for (const item of data.items) {
-            model.value.push({
-              ...item, order: model.value.length,
-            });
+            model.value.push({ ...item, order: model.value.length });
           }
         }
         // reorder
@@ -327,9 +301,7 @@ export default defineComponent({
 
     watch(model, (val) => {
       ctx.emit('input', val);
-    }, {
-      deep: true,
-    });
+    }, { deep: true });
 
     return {
       // ref

diff --git a/components/widgets/actions/button/customvariable.vue b/components/widgets/actions/button/customvariable.vue
@@ -105,6 +105,7 @@
 
 <script setup lang="ts">
 import { VariableInterface } from '@entity/variable';
+import { getSocket } from '@sogebot/ui-helpers/socket';
 import gql from 'graphql-tag';
 import { debounce } from 'lodash';
 
@@ -119,21 +120,27 @@ const props = defineProps<{
 const loading = ref(true);
 const customVariable = ref(null as VariableInterface | null);
 const refresh = async () => {
-  customVariable.value = (await $graphql.default.request(gql`
-      query customVariable($name: String!) {
-        customVariable(name: $name) { id currentValue type }
-      }
-    `, { name: props.item.options.customvariable })).customVariable[0];
-  loading.value = false;
-  setTimeout(() => refresh(), 5000);
+  getSocket('/core/customvariables').emit('customvariables::list', (err, items) => {
+    if (err) {
+      return console.error(err);
+    }
+
+    const foundItem = items.find(o => o.variableName === props.item.options.customvariable);
+    setTimeout(() => refresh(), 5000);
+    loading.value = false;
+    if (!foundItem) {
+      return;
+    }
+    customVariable.value = foundItem;
+  });
 };
 
 onMounted(() => {
   refresh();
 });
 
 const selected = ref(props.item.selected);
-const emit = defineEmits(['select', 'unselect', 'update:dialog'])
+const emit = defineEmits(['select', 'unselect', 'update:dialog']);
 watch(selected, (val) => {
   emit(val ? 'select' : 'unselect');
 });
@@ -156,7 +163,7 @@ const trigger = (ev: MouseEvent, value?: string) => {
         mutation quickActionTrigger($id: String!, $value: String!) {
           quickActionTrigger(id: $id, value: $value)
         }`, { id: props.item.id, value: value.trim() });
-      }
+    }
   } else if (customVariable.value && customVariable.value.type === 'number') {
     // determinate which part of button is pushed
     const card = document.getElementById(`quickaction-${props.item.id}`) as HTMLElement;

diff --git a/components/widgets/actions/button/overlayMarathon.vue b/components/widgets/actions/button/overlayMarathon.vue
@@ -55,6 +55,7 @@ import {
   DAY, HOUR, MINUTE, SECOND,
 } from '@sogebot/ui-helpers/constants';
 import { getSocket } from '@sogebot/ui-helpers/socket';
+
 import { error } from '~/functions/error';
 
 const props = defineProps<{
@@ -67,7 +68,7 @@ let interval = 0;
 const selected = ref(props.item.selected);
 const tick = ref(0);
 const newTime = ref(0);
-const emit = defineEmits(['select', 'unselect', 'update:dialog'])
+const emit = defineEmits(['select', 'unselect', 'update:dialog']);
 watch(selected, (val) => {
   emit(val ? 'select' : 'unselect');
 });

diff --git a/components/widgets/actions/button/randomizer.vue b/components/widgets/actions/button/randomizer.vue
@@ -36,13 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import { RandomizerInterface } from '@entity/randomizer';
-import { getSocket } from '@sogebot/ui-helpers/socket';
-import gql from 'graphql-tag';
+import { Randomizer } from '@entity/randomizer';
+import axios from 'axios';
 
-import GET_ONE from '~/queries/randomizer/getOne.gql';
-
-const { $graphql } = useNuxtApp();
 const props = defineProps<{
   item: Record<string, any>,
   dialog: boolean,
@@ -51,14 +47,15 @@ const props = defineProps<{
 }>();
 
 const selected = ref(props.item.selected);
-const emit = defineEmits(['select', 'unselect', 'update:dialog'])
+const emit = defineEmits(['select', 'unselect', 'update:dialog']);
 watch(selected, (val) => {
   emit(val ? 'select' : 'unselect');
 });
 
-const cache = ref([] as RandomizerInterface[]);
+const cache = ref([] as Randomizer[]);
 const refetch = async () => {
-  cache.value = (await $graphql.default.request(GET_ONE, { id: props.item.options.randomizerId })).randomizers;
+  const res = await axios.get('/api/registries/randomizer/' + props.item.options.randomizerId, { headers: { authorization: `Bearer ${localStorage.accessToken}` } });
+  cache.value = [res.data.data];
   setTimeout(() => refetch(), 5000);
 };
 const randomizer = computed(() => {
@@ -102,16 +99,21 @@ const trigger = (ev: MouseEvent) => {
           && (getClassList(ev.target as Element).includes('minus') || mouseOffsetX < ((isText ? text.clientWidth : card.clientWidth) / 2));
 
     if (isDecrement) {
-      $graphql.default.request(gql`mutation randomizerSetVisibility($id: String!, $value: Boolean!) { randomizerSetVisibility(id: $id, value: $value) }`, {
-        id:    randomizer.value.id,
-        value: !randomizer.value.isShown,
-      });
+      randomizer.value.isShown = !randomizer.value.isShown;
+      if (randomizer.value.isShown) {
+        axios.post(`/api/registries/randomizer/${randomizer.value.id}/show`, null, { headers: { authorization: `Bearer ${localStorage.accessToken}` } })
+          .then(refetch);
+      } else {
+        axios.post(`/api/registries/randomizer/hide`, null, { headers: { authorization: `Bearer ${localStorage.accessToken}` } })
+          .then(refetch);
+      }
     } else {
       randomizerSpin.value = true;
-      getSocket('/registries/randomizer').emit('randomizer::startSpin');
-      setTimeout(() => {
-        randomizerSpin.value = false;
-      }, 5000);
+      axios.post(`/api/registries/randomizer/${randomizer.value.id}/spin`, null, { headers: { authorization: `Bearer ${localStorage.accessToken}` } }).then(() => {
+        setTimeout(() => {
+          randomizerSpin.value = false;
+        }, 5000);
+      });
     }
   }
 };

diff --git a/components/widgets/actions/edit/randomizer.vue b/components/widgets/actions/edit/randomizer.vue
@@ -24,23 +24,23 @@
 
 <script setup lang="ts">
 import type { RandomizerItem } from '@entity/dashboard';
-import { RandomizerInterface } from '@entity/randomizer';
+import { Randomizer } from '@entity/randomizer';
+import axios from 'axios';
 import { cloneDeep, pick } from 'lodash';
 
 import { EventBus } from '~/functions/event-bus';
 import { required } from '~/functions/validators';
-import GET_ALL from '~/queries/randomizer/getAll.gql';
 
-const { $graphql } = useNuxtApp();
 const props = defineProps<{
   item: RandomizerItem
 }>();
 const emit = defineEmits(['update:item', 'update:valid']);
 
 const loading = ref(true);
-const randomizers = ref([] as RandomizerInterface[]);
+const randomizers = ref([] as Randomizer[]);
 const refetch = async () => {
-  randomizers.value = (await $graphql.default.request(GET_ALL)).randomizers;
+  const res = await axios.get('/api/registries/randomizer/', { headers: { authorization: `Bearer ${localStorage.accessToken}` } });
+  randomizers.value = res.data;
   loading.value = false;
 };
 

diff --git a/pages/commands/customcommands.vue b/pages/commands/customcommands.vue
@@ -149,13 +149,17 @@ import type { PermissionsInterface } from '@entity/permissions';
 import { ButtonStates } from '@sogebot/ui-helpers/buttonStates';
 import { getSocket } from '@sogebot/ui-helpers/socket';
 import translate from '@sogebot/ui-helpers/translate';
+
+import { addToSelectedItem } from '~/functions/addToSelectedItem';
+
 import axios from 'axios';
+
+import { EventBus } from '~/functions/event-bus';
+
 import {
   capitalize, isEqual, orderBy,
 } from 'lodash';
 
-import { addToSelectedItem } from '~/functions/addToSelectedItem';
-import { EventBus } from '~/functions/event-bus';
 import { getPermissionName } from '~/functions/getPermissionName';
 import {
   minLength, minValue, required, startsWith,
@@ -219,7 +223,7 @@ const refresh = () => {
     permissions.value = res;
     loading.value = false;
   });
-  axios.get(`${localStorage.server}/api/systems/customcommands/groups`, { headers: { authorization: `Bearer ${localStorage.accessToken}` } })
+  axios.get(`/api/systems/customcommands/groups`, { headers: { authorization: `Bearer ${localStorage.accessToken}` } })
     .then(({ data }) => {
       groups.value = data.data;
     });

diff --git a/pages/commands/price.vue b/pages/commands/price.vue
@@ -109,15 +109,21 @@ import {
 import { ButtonStates } from '@sogebot/ui-helpers/buttonStates';
 import { getLocalizedName } from '@sogebot/ui-helpers/getLocalized';
 import { getSocket } from '@sogebot/ui-helpers/socket';
-import translate from '@sogebot/ui-helpers/translate';
-import axios from 'axios';
-import { capitalize, cloneDeep } from 'lodash';
 
 import {
   minLength, minValue, required, startsWith,
 } from '~/functions//validators';
+
+import translate from '@sogebot/ui-helpers/translate';
+
 import { addToSelectedItem } from '~/functions/addToSelectedItem';
+
+import axios from 'axios';
+
 import { error } from '~/functions/error';
+
+import { capitalize, cloneDeep } from 'lodash';
+
 import { EventBus } from '~/functions/event-bus';
 
 export default defineComponent({
@@ -265,10 +271,13 @@ export default defineComponent({
 
         if (isValid) {
           console.log('Updating', merged);
-          getSocket('/admin').emit('systems|price|save', { ...merged }, () => {
-            EventBus.$emit('snack', 'success', 'Data updated.');
-            refresh();
-          });
+          axios.post(`${JSON.parse(localStorage.server)}/api/systems/price`,
+            { ...merged },
+            { headers: { authorization: `Bearer ${localStorage.accessToken}` } },
+          )
+            .then(() => {
+              EventBus.$emit('snack', 'success', 'Data updated.');
+            });
         }
       }
     };