move frontend to /web

2023-11-18 12:51:24 +01:00 · 2023-11-18 12:51:24 +01:00 · dd75c2b0d6
commit dd75c2b0d6
parent 9747c08bab
36 changed files with 0 additions and 0 deletions
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@ -0,0 +1,149 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import AxiosBootstrap from 'axios';
+import config from '../config';
+import * as _ from 'lodash/fp';
+import router from '../router';
+
+import * as base64 from 'base-64';
+import * as utf8 from 'utf8';
+
+Vue.use(Vuex);
+const axios = AxiosBootstrap.create({
+  baseURL: config.service.url,
+  auth: config.service.auth
+});
+
+axios.interceptors.response.use(response => response, error => {
+  console.log('error interceptor fired');
+  console.error(error); // todo: toast error
+  console.log(Object.entries(error));
+
+  if (error.isAxiosError) {
+    const message = `
+      <h3>A HTTP ${error.config.method} request failed.</h3>
+      <p>
+          url: ${error.config.url}
+          <br>
+          timeout: ${!!error.request.timeout}
+          <br>
+          response-body: ${error.response && error.response.body}
+      </p>
+    `;
+    store.commit('createToast', {title: 'Error: HTTP', message, color: 'danger'});
+  } else {
+    store.commit('createToast', {title: 'Error: Unknown', message: error.toString(), color: 'danger'});
+  }
+  return Promise.reject(error);
+});
+
+const store = new Vuex.Store({
+  state: {
+    keyIncrement: 0,
+    events: [],
+    layout: 'cards',
+    loadedItems: [],
+    loadedBoxes: [],
+    toasts: [],
+    lastUsed: localStorage.getItem('lf_lastUsed') || {},
+  },
+  getters: {
+    getEventSlug: state => state.route && state.route.params.event? state.route.params.event : state.events.length ? state.events[0].slug : '36C3',
+    getActiveView: state => state.route.name || 'items',
+    getFilters: state => state.route.query,
+    getBoxes: state => state.loadedBoxes
+  },
+  mutations: {
+    updateLastUsed(state, diff) {
+      state.lastUsed = _.extend(state.lastUsed, diff);
+      localStorage.setItem('lf_lastUsed', state.lastUsed);
+    },
+    replaceEvents(state, events) {
+      state.events = events;
+    },
+    changeView(state, {view, slug}) {
+      router.push({path: `/${slug}/${view}`});
+    },
+    replaceLoadedItems(state, newItems) {
+      state.loadedItems = newItems;
+    },
+    setLayout(state, layout) {
+      state.layout = layout;
+    },
+    replaceBoxes(state, loadedBoxes) {
+      state.loadedBoxes = loadedBoxes;
+    },
+    updateItem(state, updatedItem) {
+      const item = state.loadedItems.filter(({ uid }) => uid === updatedItem.uid)[0];
+      Object.assign(item, updatedItem);
+    },
+    removeItem(state, item) {
+      state.loadedItems = state.loadedItems.filter(it => it !== item );
+    },
+    appendItem(state, item) {
+      state.loadedItems.push(item);
+    },
+    createToast(state, { title, message, color }) {
+      state.toasts.push({ title, message, color, key: state.keyIncrement });
+      state.keyIncrement += 1;
+    },
+    removeToast(state, key) {
+      state.toasts = state.toasts.filter(toast => toast.key !== key);
+    }
+  },
+  actions: {
+    async loadEvents({ commit }) {
+      const { data } = await axios.get('/1/events');
+      commit('replaceEvents', data);
+    },
+    changeEvent({ dispatch, getters}, eventName) {
+      router.push({path: `/${eventName.slug}/${getters.getActiveView}`});
+      dispatch('loadEventItems');
+    },
+    changeView({ getters }, link) {
+      router.push({path: `/${getters.getEventSlug}/${link.path}`});
+    },
+    showBoxContent({ getters }, box) {
+      router.push({path: `/${getters.getEventSlug}/items`, query: {box}});
+    },
+    async loadEventItems({ commit, getters }) {
+      const { data } = await axios.get(`/1/${getters.getEventSlug}/items`);
+      commit('replaceLoadedItems', data);
+    },
+    async searchEventItems({ commit, getters }, query) {
+      const foo = utf8.encode(query);
+      const bar = base64.encode(foo);
+
+      const {data} = await axios.get(`/1/${getters.getEventSlug}/items/${bar}`);
+      commit('replaceLoadedItems', data);
+    },
+    async loadBoxes({ commit }) {
+      const { data } = await axios.get('/1/boxes');
+      commit('replaceBoxes', data);
+    },
+    async updateItem({ commit, getters }, item) {
+      const { data } = await axios.put(`/1/${getters.getEventSlug}/item/${item.uid}`, item);
+      commit('updateItem', data);
+    },
+    async markItemReturned({ commit, getters }, item) {
+      await axios.put(`/1/${getters.getEventSlug}/item/${item.uid}`, {returned: true});
+      commit('removeItem', item);
+    },
+    async deleteItem({ commit, getters }, item) {
+      await axios.delete(`/1/${getters.getEventSlug}/item/${item.uid}`, item);
+      commit('removeItem',item);
+    },
+    async postItem({ commit, getters }, item) {
+      commit('updateLastUsed',{box: item.box, cid: item.cid});
+      const { data } = await axios.post(`/1/${getters.getEventSlug}/item`, item);
+      commit('appendItem', data);
+    }
+  }
+});
+
+export default store;
+
+store.dispatch('loadEvents').then(() =>{
+  store.dispatch('loadEventItems');
+  store.dispatch('loadBoxes');
+});