92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import Vue from "vue";
|
|
import Vuex from "vuex";
|
|
import storage from "store/dist/store.modern";
|
|
import { DEFAULT_SETTINGS, DOZZLE_SETTINGS_KEY } from "./settings";
|
|
import config from "./config";
|
|
|
|
Vue.use(Vuex);
|
|
|
|
const mql = window.matchMedia("(max-width: 770px)");
|
|
|
|
storage.set(DOZZLE_SETTINGS_KEY, { ...DEFAULT_SETTINGS, ...storage.get(DOZZLE_SETTINGS_KEY) });
|
|
|
|
const state = {
|
|
containers: [],
|
|
activeContainers: [],
|
|
searchFilter: null,
|
|
isMobile: mql.matches,
|
|
settings: storage.get(DOZZLE_SETTINGS_KEY),
|
|
};
|
|
|
|
const mutations = {
|
|
SET_CONTAINERS(state, containers) {
|
|
state.containers = containers;
|
|
},
|
|
ADD_ACTIVE_CONTAINERS(state, container) {
|
|
state.activeContainers.push(container);
|
|
},
|
|
REMOVE_ACTIVE_CONTAINER(state, container) {
|
|
state.activeContainers.splice(state.activeContainers.indexOf(container), 1);
|
|
},
|
|
SET_SEARCH(state, filter) {
|
|
state.searchFilter = filter;
|
|
},
|
|
SET_MOBILE_WIDTH(state, value) {
|
|
state.isMobile = value;
|
|
},
|
|
UPDATE_SETTINGS(state, newValues) {
|
|
state.settings = { ...state.settings, ...newValues };
|
|
storage.set(DOZZLE_SETTINGS_KEY, state.settings);
|
|
},
|
|
};
|
|
|
|
const actions = {
|
|
APPEND_ACTIVE_CONTAINER({ commit }, container) {
|
|
commit("ADD_ACTIVE_CONTAINERS", container);
|
|
},
|
|
REMOVE_ACTIVE_CONTAINER({ commit }, container) {
|
|
commit("REMOVE_ACTIVE_CONTAINER", container);
|
|
},
|
|
SET_SEARCH({ commit }, filter) {
|
|
commit("SET_SEARCH", filter);
|
|
},
|
|
async FETCH_CONTAINERS({ commit }) {
|
|
const containers = await (await fetch(`${config.base}/api/containers.json`)).json();
|
|
commit("SET_CONTAINERS", containers);
|
|
},
|
|
UPDATE_SETTING({ commit }, setting) {
|
|
commit("UPDATE_SETTINGS", setting);
|
|
},
|
|
};
|
|
const getters = {
|
|
activeContainersById({ activeContainers }) {
|
|
return activeContainers.reduce((map, obj) => {
|
|
map[obj.id] = obj;
|
|
return map;
|
|
}, {});
|
|
},
|
|
allContainersById({ containers }) {
|
|
return containers.reduce((map, obj) => {
|
|
map[obj.id] = obj;
|
|
return map;
|
|
}, {});
|
|
},
|
|
visibleContainers({ containers, settings: { showAllContainers } }) {
|
|
const filter = showAllContainers ? () => true : (c) => c.state === "running";
|
|
return containers.filter(filter);
|
|
},
|
|
};
|
|
|
|
const es = new EventSource(`${config.base}/api/events/stream`);
|
|
es.addEventListener("containers-changed", (e) => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
|
|
mql.addListener((e) => store.commit("SET_MOBILE_WIDTH", e.matches));
|
|
|
|
const store = new Vuex.Store({
|
|
state,
|
|
getters,
|
|
actions,
|
|
mutations,
|
|
});
|
|
|
|
export default store;
|