frontend.src.main.js Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of elepy-admin Show documentation

A Restful API generator and Headless CMS

There is a newer version: 3.0.0-alpha-29

import Vue from 'vue'
import App from './App.vue'
import store from "./store";
import Utils from "./utils"
import router from './router'
import axios from "axios"
import * as Vibrant from 'node-vibrant'


Vue.config.productionTip = false;


if (process.env.NODE_ENV !== 'production') {
    // This is the URL to the instance that gets run from 'develop_frontend.sh'
    axios.defaults.baseURL = 'http://localhost:7331';
}
new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');

Utils.url = "";
store.dispatch('init');


axios.interceptors.request.use(function (config) {

    let uniqueId = Math.random().toString(36).substring(2) + Date.now().toString(36);

    let description = config.description ?? "Communicating with Elepy";

    config.requestInfo = {uniqueId, description}

    store.commit("ADD_LOAD_ITEM", config.requestInfo)
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    store.commit("REMOVE_LOAD_ITEM", response.config.requestInfo.id);
    return response;
}, function (error) {
    store.commit("REMOVE_LOAD_ITEM", error.response.config.requestInfo.id);
    Utils.displayError(error);
    return Promise.reject(error);
});


function adjust(color, amount) {
    return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}

Vibrant.from(store.getters.logo).getPalette()
    .then((palette) => {

        let primary = palette.Vibrant.hex;
        let primaryHover = adjust(palette.Vibrant.hex, -10);
        let primaryDisabled = palette.DarkVibrant.hsl;


        primaryDisabled = "hsla(" + primaryDisabled[0]*360 + ", 75%, 82%, 1)";


        document.documentElement.style
            .setProperty('--primary-color', primary);
        document.documentElement.style
            .setProperty('--primary-hover-color', primaryHover);

        document.documentElement.style
            .setProperty('--primary-disabled-color', primaryDisabled);
    });