Vue.js

If you would like a headless scalable web app for your business venture or re-do the front-end of your website, Awesome Dude is an excellent partner for your idea. With ES6/7 Bootstrap Vue.js and SCSS a lot of front-end applications are possible.

            
/* eslint-disable no-useless-catch */
/* eslint-disable import/no-cycle */
/* eslint-disable consistent-return */
/* eslint-disable no-shadow */
import authenticateApi from '../../api/authenticate';

const defaultState = {
  JWT_Token: '',
  isAuthenticated: false,
  username: null,
};

const state = JSON.parse(localStorage.getItem('authenticationState')) || defaultState;

const mutations = {
  setSessionToken: (state, sessionToken) => {
    state.JWT_Token = sessionToken;
    localStorage.setItem('authenticationState', JSON.stringify(state));
  },
  setIsAuthenticated(state, isAuthenticated) {
    state.isAuthenticated = isAuthenticated;
    localStorage.setItem('authenticationState', JSON.stringify(state));
  },
  setUsername(state, username) {
    state.username = username;
    localStorage.setItem('authenticationState', JSON.stringify(state));
  },
};

const actions = {
  async login({ commit }, payload) {
    // Reset all errors
    commit('clearAllMessages');
    try {
      const response = await authenticateApi.login(payload);
      if (response.token) {
        commit('setIsAuthenticated', true);
        commit('setSessionToken', response.token);
      }
      if (response.user) {
        const username = `${response.user.firstName} ${response.user.lastName}`;
        commit('setUsername', username);
      }
      return response;
    } catch (error) {
      throw error.response.data;
    }
  },
  clearCache({ commit }) {
    commit('setIsAuthenticated', false);
    commit('setUsername', null);
    commit('setSessionToken', null);
    localStorage.clear();
  },
};

const getters = {
  authUsername: (state) => state.username,
  authSessionToken: (state) => state.JWT_Token,
  authIsAuthenticated: (state) => state.isAuthenticated,
};

export default {
  state,
  mutations,
  actions,
  getters,
};

            
<--template>
  <--div>
    <--div class="faceDetection">
      <--h1 class="titleFaceDetection">Security camera's
      <--div id="videoContainer">
        <--div>
          <--web-cam-feed class="webCamFeedClass" v-for="(feed, f) in cameras" :key="f" :web-cam-nr="f">
        <--/div>
      <--/div>
    <--/div>
  <--/div>
<--/template>

<--script>
import { mapActions } from 'vuex';
import { EventBus } from '../event-bus.js';
import WebCamFeed from './WebCamFeed';
const WEIGHTS_URL = 'http://localhost:8080/weights';

export default {
  name: 'FaceDetection',
  data() {
    return {
      predictedAges: [],
      videoElement: null,
      audioSelect: null,
      videoSelect: null,
      webCamFeeds: [],
      cameras: [],
    };
  },
  components: {
    WebCamFeed,
  },
  methods: {
    ...mapActions(['getAllImagesFromApi']),
    loadCameras() {
      navigator.mediaDevices
        .enumerateDevices()
        .then(deviceInfos => {
          for (let i = 0; i !== deviceInfos.length; ++i) {
            let deviceInfo = deviceInfos[i];
            if (deviceInfo.kind === "videoinput") {
              if (i <= 5) {
                this.cameras.push(deviceInfo);
              }
            }
          }
        })
        .catch(error => this.$emit("notsupported", error));
    },
  },
  created() {
    const self = this;
    self.getAllImagesFromApi();
    self.loadCameras();
  }
}
<--/script>

<--style lang="scss" scoped>
  @import '../styles/main.scss';

  #video {
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: -2;
  }

  #videoContainer {
    position: absolute;
    top: 100px;
    left: 60px;
    z-index: 20;
  }

  .webCamFeedClass {
    float:left;
    width:600px;
    padding:40px;
  }

  .menuFaceDetection {
    position: absolute;
    top: 650px;
    left: 60px;
  }

  .titleFaceDetection {
    position: absolute;
    top: 120px;
    left: 80px;
    z-index: 15;
  }
<--/style>

            
import axios from 'axios';
import store from '../store';
import ServerConfig from '../config.server';
import router from '../router';

const apiUri = ServerConfig.setupURI().api;

/**
 * Class to manage api requests to the Stock Analysis API endpoint
 *
 * class="" Stock Analysis API
 */

class AxiosController {
  config() {
    this.token = {
      headers: {
        'x-auth': store.getters.authSessionToken,
      },
    };
    return this.token;
  }

  get(controller, parameters) {
    store.dispatch('setGlobalLoaderBusy', true);
    return new Promise((resolve, reject) => {
      axios
        .get(
          `${apiUri}/${controller}/${parameters}`,
          this.config(),
        )
        .then((res) => {
          const result = res.data;
          store.dispatch('setGlobalLoaderBusy', false);
          resolve(result);
        })
        .catch((error) => {
          reject(this.errorInterceptor(error));
        });
    });
  }

  getWithURIWithoutCredentials(uri, parameters) {
    return new Promise((resolve, reject) => {
      axios
        .get(
          `${uri}/${parameters}`,
        )
        .then((res) => {
          const result = res.data;
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  post(controller, data) {
    store.dispatch('setGlobalLoaderBusy', true);
    return new Promise((resolve, reject) => {
      axios
        .post(
          `${apiUri}/${controller}`,
          data,
          this.config(),
        )
        .then((res) => {
          const result = res.data;
          store.dispatch('setGlobalLoaderBusy', false);
          resolve(result);
        })
        .catch((e) => {
          reject(this.errorInterceptor(e));
        });
    });
  }

  postWithoutCredentials(controller, data) {
    store.dispatch('setGlobalLoaderBusy', true);
    this.data = data;
    return new Promise((resolve, reject) => {
      axios.post(
        `${apiUri}/${controller}`,
        this.data,
      ).then((res) => {
        const result = res.data;
        store.dispatch('setGlobalLoaderBusy', false);
        resolve(result);
      })
        .catch((e) => {
          reject(this.errorInterceptor(e));
        });
    });
  }

  query(controller, query) {
    store.dispatch('setGlobalLoaderBusy', true);
    return new Promise((resolve, reject) => {
      axios
        .get(
          `${apiUri}/${controller}?${query}`,
          this.config(),
        )
        .then((res) => {
          const result = res.data;
          store.dispatch('setGlobalLoaderBusy', false);
          resolve(result);
        })
        .catch((e) => {
          reject(this.errorInterceptor(e));
        });
    });
  }

  put(controller, id, data) {
    store.dispatch('setGlobalLoaderBusy', true);
    return new Promise((resolve, reject) => {
      axios
        .put(
          `${apiUri}/${controller}/${id}`,
          data,
          this.config(),
        )
        .then((res) => {
          const result = res.data;
          store.dispatch('setGlobalLoaderBusy', false);
          resolve(result);
        })
        .catch((e) => {
          reject(this.errorInterceptor(e));
        });
    });
  }

  delete(controller, id) {
    store.dispatch('setGlobalLoaderBusy', true);
    return new Promise((resolve, reject) => {
      axios
        .delete(`${apiUri}/${controller}/${id}`, this.config())
        .then((res) => {
          const result = res.data;
          store.dispatch('setGlobalLoaderBusy', false);
          resolve(result);
        })
        .catch((e) => {
          reject(this.errorInterceptor(e));
        });
    });
  }

  errorInterceptor(error) {
    this.error = error;
    let message;
    let status;
    let redirectToLogin = false;
    store.dispatch('setGlobalLoaderBusy', false);
    if (!error.response) {
      message = 'Error: The connection to the server is lost. Are you connected to the internet?';
    } else {
      const { data } = error.response;
      status = error.response.status;
      switch (status) {
        case 500:
          message = 'Error: Server error';
          break;
        case 400:
          message = data.message;
          break;
        case 401:
          redirectToLogin = true;
          message = data.message;
          break;
        case 403:
          if (data.errorCode === 'EC-G-02') {
            redirectToLogin = true;
          }
          message = data.message;
          break;
        case 404:
          message = data.message;
          break;
        case 503:
          message = data.message;
          break;
        default:
          message = 'Oops, something went wrong!';
      }
    }
    if (message) {
      store.commit('addErrorMessage', {
        message,
        type: 'error',
        status: status !== undefined ? status : 418,
      });
    }
    if (redirectToLogin) {
      store.dispatch('clearCache');
      router.push('/');
    }
    return error;
  }
}

export default new AxiosController();