2022-02-08 04:04:45 +00:00
|
|
|
|
<template>
|
2022-02-12 06:23:07 +00:00
|
|
|
|
<div :class="{dashboard: true, 'edit-mode': editMode}">
|
2022-02-12 06:41:51 +00:00
|
|
|
|
<div @click="vade_click" class="vade">vade</div>
|
2022-02-08 04:04:45 +00:00
|
|
|
|
<div class="editmode-tiles">
|
|
|
|
|
<new-item-tile title="New Application" v-if="editMode" @click="openNewApp" />
|
|
|
|
|
<new-item-tile title="New App Category" v-if="editMode" @click="openNewAppCat" />
|
|
|
|
|
<new-item-tile title="New Bookmark" v-if="editMode" @click="openNewBookmark" />
|
|
|
|
|
<new-item-tile title="New Bookmark Category" v-if="editMode" @click="openNewBookmarkCat" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container" v-if="appsForCategory(null).length > 0 || editMode">
|
|
|
|
|
<h1>APPLICATIONS</h1>
|
|
|
|
|
<div class="app-tiles">
|
|
|
|
|
<application-tile
|
|
|
|
|
@clicked="appTileClicked"
|
|
|
|
|
v-for="app in appsForCategory(null)"
|
|
|
|
|
:appData="app"
|
|
|
|
|
:key="app.id"
|
|
|
|
|
/>
|
|
|
|
|
<application-modal
|
|
|
|
|
:open="appOpen"
|
|
|
|
|
:data="editApp"
|
|
|
|
|
:categories="applicationCategories"
|
|
|
|
|
@close="closeNewApp"
|
|
|
|
|
@update="reload"
|
|
|
|
|
/>
|
|
|
|
|
<application-category-modal
|
|
|
|
|
:open="appCatOpen"
|
|
|
|
|
:data="editAppCat"
|
|
|
|
|
@close="closeNewAppCat"
|
|
|
|
|
@update="reload"
|
|
|
|
|
/>
|
|
|
|
|
<bookmark-modal
|
|
|
|
|
:open="bookmarkOpen"
|
|
|
|
|
:data="editBookmark"
|
|
|
|
|
:categories="bookmarkCategories"
|
|
|
|
|
@close="closeBookmark"
|
|
|
|
|
@update="reload"
|
|
|
|
|
/>
|
|
|
|
|
<bookmark-category-modal
|
|
|
|
|
:open="bookmarkCatOpen"
|
|
|
|
|
:data="editBookmarkCat"
|
|
|
|
|
@close="closeNewBookmarkCat"
|
|
|
|
|
@update="reload"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container" v-for="cat in applicationCategories" :key="cat.id">
|
2022-02-12 06:23:07 +00:00
|
|
|
|
<h1 @click="appCatClicked(cat)" class="editable">
|
2022-02-08 04:04:45 +00:00
|
|
|
|
<font-awesome-icon v-if="cat.glyph" :icon="cat.glyph" />
|
|
|
|
|
{{cat.categoryName}}
|
|
|
|
|
</h1>
|
|
|
|
|
<div class="app-tiles">
|
|
|
|
|
<application-tile
|
|
|
|
|
@clicked="appTileClicked"
|
|
|
|
|
v-for="app in appsForCategory(cat.id)"
|
|
|
|
|
:appData="app"
|
|
|
|
|
:key="app.id"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-02-12 06:23:07 +00:00
|
|
|
|
<div class="container" v-if="bookmarks.length">
|
2022-02-08 04:04:45 +00:00
|
|
|
|
<h1 class="bookmark">BOOKMARKS</h1>
|
|
|
|
|
<div class="bookmark-container">
|
|
|
|
|
<div class="bookmark-category">
|
|
|
|
|
<h2>UNCATEGORZED</h2>
|
|
|
|
|
<bookmark-tile
|
|
|
|
|
v-for="bm in bookmarksForCategory(null)"
|
|
|
|
|
:key="bm.id"
|
|
|
|
|
:bookmark="bm"
|
|
|
|
|
@clicked="bookmarkClicked"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bookmark-category" v-for="cat in bookmarkCategories" :key="cat.id">
|
2022-02-12 06:23:07 +00:00
|
|
|
|
<h2 @click="bookmarkCatClicked(cat)" class="editable">
|
2022-02-08 04:04:45 +00:00
|
|
|
|
<font-awesome-icon v-if="cat.glyph" :icon="cat.glyph" />
|
|
|
|
|
{{cat.categoryName}}
|
|
|
|
|
</h2>
|
|
|
|
|
<bookmark-tile
|
|
|
|
|
@clicked="bookmarkClicked"
|
|
|
|
|
v-for="bm in bookmarksForCategory(cat.id)"
|
|
|
|
|
:key="bm.id"
|
|
|
|
|
:bookmark="bm"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<edit-mode-button :editMode="editMode" @click="toggleEdit" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import ApplicationTile from "../components/ApplicationTile.vue";
|
|
|
|
|
import ApplicationModal from "../components/ApplicationModal.vue";
|
|
|
|
|
import ApplicationCategoryModal from "../components/ApplicationCategoryModal.vue";
|
|
|
|
|
import EditModeButton from "../components/EditModeButton.vue";
|
|
|
|
|
import NewItemTile from "../components/NewItemTile.vue";
|
|
|
|
|
import BookmarkModal from "../components/BookmarkModal.vue";
|
|
|
|
|
import BookmarkTile from "../components/BookmarkTile.vue";
|
|
|
|
|
import BookmarkCategoryModal from "../components/BookmarkCategoryModal.vue";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Dashboard",
|
2022-02-12 06:23:07 +00:00
|
|
|
|
unmounted() {
|
|
|
|
|
this.connection = null;
|
|
|
|
|
},
|
2022-02-08 04:04:45 +00:00
|
|
|
|
methods: {
|
2022-02-12 06:41:51 +00:00
|
|
|
|
vade_click() {
|
|
|
|
|
window.open('https://vade.5σ.com/');
|
|
|
|
|
},
|
2022-02-12 06:23:07 +00:00
|
|
|
|
connect_ws() {
|
|
|
|
|
const token = localStorage.getItem("token")
|
|
|
|
|
this.connection = new WebSocket("ws://localhost:8088/events/" + encodeURIComponent(token));
|
|
|
|
|
this.connection.onmessage = (event) => {
|
|
|
|
|
const data = JSON.parse(event.data);
|
|
|
|
|
const { app_id, alive } = data.HealthcheckChange;
|
|
|
|
|
const idx = this.applications.findIndex((app) => app.id == app_id);
|
|
|
|
|
this.applications[idx].healthcheckStatus = alive;
|
|
|
|
|
}
|
|
|
|
|
this.connection.onclose = () => {
|
|
|
|
|
setTimeout(() => this.connect_ws(), 1000);
|
|
|
|
|
};
|
|
|
|
|
},
|
2022-02-08 04:04:45 +00:00
|
|
|
|
appsForCategory(catId) {
|
|
|
|
|
return this.applications.filter((i) => i.applicationCategoryId === catId);
|
|
|
|
|
},
|
|
|
|
|
bookmarksForCategory(catId) {
|
|
|
|
|
return this.bookmarks.filter((i) => i.bookmarkCategoryId === catId);
|
|
|
|
|
},
|
|
|
|
|
openNewApp() {
|
|
|
|
|
this.editApp = {};
|
|
|
|
|
this.appOpen = true;
|
|
|
|
|
},
|
|
|
|
|
openNewBookmark() {
|
|
|
|
|
this.bookmarkOpen = true;
|
|
|
|
|
},
|
|
|
|
|
closeNewApp() {
|
|
|
|
|
this.editApp = {};
|
|
|
|
|
this.appOpen = false;
|
|
|
|
|
},
|
|
|
|
|
closeBookmark() {
|
|
|
|
|
this.editBookmark = {};
|
|
|
|
|
this.bookmarkOpen = false;
|
|
|
|
|
},
|
|
|
|
|
openNewAppCat() {
|
|
|
|
|
this.appCatOpen = true;
|
|
|
|
|
this.editAppCat = {};
|
|
|
|
|
},
|
|
|
|
|
closeNewAppCat() {
|
|
|
|
|
this.editAppCat = {};
|
|
|
|
|
this.appCatOpen = false;
|
|
|
|
|
},
|
|
|
|
|
openNewBookmarkCat() {
|
|
|
|
|
this.bookmarkCatOpen = true;
|
|
|
|
|
},
|
|
|
|
|
closeNewBookmarkCat() {
|
|
|
|
|
this.editBookmarkCat = {};
|
|
|
|
|
this.bookmarkCatOpen = false;
|
|
|
|
|
},
|
|
|
|
|
toggleEdit() {
|
|
|
|
|
this.editMode = !this.editMode;
|
|
|
|
|
},
|
|
|
|
|
appTileClicked(e, app) {
|
|
|
|
|
if (this.editMode) {
|
|
|
|
|
this.editApp = app;
|
|
|
|
|
this.appOpen = true;
|
|
|
|
|
} else {
|
|
|
|
|
window.open(app.url);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
appCatClicked(cat) {
|
|
|
|
|
if (this.editMode) {
|
|
|
|
|
this.editAppCat = cat;
|
|
|
|
|
this.appCatOpen = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
bookmarkCatClicked(cat) {
|
|
|
|
|
if (this.editMode) {
|
|
|
|
|
this.editBookmarkCat = cat;
|
|
|
|
|
this.bookmarkCatOpen = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
bookmarkClicked(bm) {
|
|
|
|
|
if (this.editMode) {
|
|
|
|
|
this.editBookmark = bm;
|
|
|
|
|
this.bookmarkOpen = true;
|
|
|
|
|
} else {
|
|
|
|
|
window.open(bm.url);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async reload() {
|
2022-02-12 08:03:27 +00:00
|
|
|
|
this.applications = (await axios.get("/api/applications")).data.items || [];
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.applicationCategories = (
|
|
|
|
|
await axios.get("/api/application_categories")
|
2022-02-12 08:03:27 +00:00
|
|
|
|
).data.items || [];
|
|
|
|
|
this.bookmarks = (await axios.get("/api/bookmarks")).data.items || [];
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.bookmarkCategories = (
|
|
|
|
|
await axios.get("/api/bookmark_categories")
|
2022-02-12 08:03:27 +00:00
|
|
|
|
).data.items || [];
|
2022-02-12 06:23:07 +00:00
|
|
|
|
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.editApp = {};
|
2022-02-12 06:23:07 +00:00
|
|
|
|
this.editAppCat = {};
|
|
|
|
|
this.appOpen = false;
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.appCatOpen = false;
|
2022-02-12 06:23:07 +00:00
|
|
|
|
|
|
|
|
|
this.editBookmark = {};
|
|
|
|
|
this.editBookmarkCat = {};
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.bookmarkCatOpen = false;
|
|
|
|
|
this.bookmarkOpen = false;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
ApplicationTile,
|
|
|
|
|
ApplicationModal,
|
|
|
|
|
ApplicationCategoryModal,
|
|
|
|
|
EditModeButton,
|
|
|
|
|
NewItemTile,
|
|
|
|
|
BookmarkModal,
|
|
|
|
|
BookmarkTile,
|
|
|
|
|
BookmarkCategoryModal,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
editMode: false,
|
|
|
|
|
applications: [],
|
|
|
|
|
applicationCategories: [],
|
|
|
|
|
appOpen: false,
|
|
|
|
|
appCatOpen: false,
|
|
|
|
|
bookmarkOpen: false,
|
|
|
|
|
bookmarkCatOpen: false,
|
|
|
|
|
editApp: {},
|
|
|
|
|
editAppCat: {},
|
|
|
|
|
editBookmark: {},
|
|
|
|
|
editBookmarkCat: {},
|
|
|
|
|
bookmarks: [],
|
|
|
|
|
bookmarkCategories: [],
|
2022-02-12 06:23:07 +00:00
|
|
|
|
connection: null,
|
2022-02-08 04:04:45 +00:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
async mounted() {
|
2022-02-12 06:23:07 +00:00
|
|
|
|
this.connect_ws();
|
2022-02-08 04:04:45 +00:00
|
|
|
|
this.reload();
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scope>
|
|
|
|
|
h1 {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
2022-02-12 06:23:07 +00:00
|
|
|
|
.edit-mode .editable {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-08 04:04:45 +00:00
|
|
|
|
h2 svg {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.app-tiles {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, 25%);
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
padding: 10px 50px;
|
|
|
|
|
width: 1000px;
|
|
|
|
|
margin: auto auto;
|
|
|
|
|
}
|
|
|
|
|
.dashboard {
|
|
|
|
|
margin-top: 150px;
|
|
|
|
|
}
|
|
|
|
|
.editmode-tiles {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 10px 50px;
|
|
|
|
|
width: 1000px;
|
|
|
|
|
margin: 15px auto;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.bookmark-container {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
}
|
2022-02-12 06:41:51 +00:00
|
|
|
|
.vade {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
color: #252525;
|
|
|
|
|
text-shadow: 1px 1px rgba(0,0,0,0.15);
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
left: 40px;
|
|
|
|
|
}
|
2022-02-08 04:04:45 +00:00
|
|
|
|
</style>
|