app/src/ui/views/Dashboard.vue

308 lines
8.0 KiB
Vue
Raw Normal View History

<template>
<div :class="{dashboard: true, 'edit-mode': editMode}">
2022-02-12 06:41:51 +00:00
<div @click="vade_click" class="vade">vade</div>
<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">
<h1 @click="appCatClicked(cat)" class="editable">
<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>
<div class="container" v-if="bookmarks.length">
<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">
<h2 @click="bookmarkCatClicked(cat)" class="editable">
<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",
unmounted() {
this.connection = null;
},
methods: {
2022-02-12 06:41:51 +00:00
vade_click() {
window.open('https://vade.5σ.com/');
},
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);
};
},
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 || [];
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 || [];
this.bookmarkCategories = (
await axios.get("/api/bookmark_categories")
2022-02-12 08:03:27 +00:00
).data.items || [];
this.editApp = {};
this.editAppCat = {};
this.appOpen = false;
this.appCatOpen = false;
this.editBookmark = {};
this.editBookmarkCat = {};
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: [],
connection: null,
};
},
async mounted() {
this.connect_ws();
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;
}
.edit-mode .editable {
cursor: pointer;
}
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;
}
</style>