206 lines
No EOL
10 KiB
HTML
Executable file
206 lines
No EOL
10 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>App</title>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css">
|
|
|
|
<script defer src="https://unpkg.com/vue-material"></script>
|
|
<script defer src="/socket.io/socket.io.js"></script>
|
|
<script defer src="./resources/js/app.js"></script>
|
|
|
|
<style>
|
|
.md-card {
|
|
width: 312px;
|
|
margin: 4px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.message-card {
|
|
width: 95%;
|
|
margin: 4px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chat-bar {
|
|
position: fixed !important;
|
|
left: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 98% !important;
|
|
margin-left: 1% !important;
|
|
}
|
|
|
|
.as-console-wrapper {
|
|
display: none !important;
|
|
}
|
|
|
|
.posts-container {
|
|
overflow-y: auto;
|
|
height: calc(90vh - 100px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="appContainer" v-if="showApp">
|
|
<md-dialog id="debug-dialog" :md-active.sync="dialog.show.debug">
|
|
<md-dialog-title>Debug info and shit</md-dialog-title>
|
|
|
|
<md-dialog-content>
|
|
<p>gateway.isConnected: {{ gateway.isConnected }}</p>
|
|
<p v-if="gateway.socket.id">gateway.socket.id: {{ gateway.socket.id }}</p>
|
|
<p v-if="gateway.debugInfo">gateway.debugInfo: {{ JSON.stringify(gateway.debugInfo) }}</p>
|
|
<p v-if="loggedInUser._id">userLoggedIn: true</p>
|
|
<p v-if="!loggedInUser._id">userLoggedIn: false</p>
|
|
<div id="debug-logged-in-data" v-if="loggedInUser">
|
|
<p>loggedInUser.username: {{ loggedInUser.username }}</p>
|
|
<p>loggedInUser._id: {{ loggedInUser._id }}</p>
|
|
<p>loggedInUser.permissionLevel: {{ loggedInUser.permissionLevel }}</p>
|
|
<p>loggedInUser.role: {{ loggedInUser.role }}</p>
|
|
</div>
|
|
|
|
<md-dialog-actions>
|
|
<md-button @click="debugDump()">Dump</md-button>
|
|
<md-button @click="dialog.show.debug = false">Close</md-button>
|
|
</md-dialog-actions>
|
|
</md-dialog-content>
|
|
</md-dialog>
|
|
|
|
<md-dialog id="create-category-dialog" :md-active.sync="dialog.show.createCategory">
|
|
<md-dialog-title>Create category</md-dialog-title>
|
|
|
|
<md-dialog-content>
|
|
<md-field>
|
|
<label>Title</label>
|
|
<md-input v-model="dialog.text.createCategory.title"></md-input>
|
|
</md-field>
|
|
|
|
<md-dialog-actions>
|
|
<md-button @click="dialog.show.createCategory = false">Close</md-button>
|
|
<md-button class="md-primary" @click="createCategory()">Create</md-button>
|
|
</md-dialog-actions>
|
|
</md-dialog-content>
|
|
</md-dialog>
|
|
|
|
<md-dialog id="create-post-dialog" :md-active.sync="dialog.show.createPost">
|
|
<md-dialog-title>Create post for <strong>{{ selection.category.title }}</strong></md-dialog-title>
|
|
|
|
<md-dialog-content>
|
|
<md-field>
|
|
<label>Title</label>
|
|
<md-input v-model="dialog.text.createPost.title"></md-input>
|
|
</md-field>
|
|
|
|
<md-field>
|
|
<label>Content</label>
|
|
<md-textarea v-model="dialog.text.createPost.body" md-counter="1000"></md-textarea>
|
|
</md-field>
|
|
|
|
<md-dialog-actions>
|
|
<md-button @click="dialog.show.createPost = false">Close</md-button>
|
|
<md-button class="md-primary" @click="createPost()">Create</md-button>
|
|
</md-dialog-actions>
|
|
</md-dialog-content>
|
|
</md-dialog>
|
|
|
|
<md-dialog id="user-info-dialog" :md-active.sync="viewingProfile.show">
|
|
<md-dialog-title><strong>{{ viewingProfile.username }}</strong></md-dialog-title>
|
|
|
|
<md-dialog-content>
|
|
<p>Role: {{ viewingProfile.role }}</p>
|
|
|
|
<md-dialog-actions>
|
|
<md-button @click="viewingProfile.show = false">Close</md-button>
|
|
</md-dialog-actions>
|
|
</md-dialog-content>
|
|
</md-dialog>
|
|
|
|
<md-toolbar class="md-accent" md-elevation="5">
|
|
<h3 class="md-title" style="flex: 1">Brainlet</h3>
|
|
<md-menu md-size="small">
|
|
<md-button md-menu-trigger>{{ loggedInUser.username }}</md-button>
|
|
<md-menu-content>
|
|
<md-menu-item @click="navigateToAccountManager()"><span>Manage account</span><md-icon>person</md-icon></md-menu-item>
|
|
<md-menu-item @click="toggleDebugDialog()"><span>Debug info and shit</span><md-icon>code</md-icon></md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
</md-toolbar>
|
|
|
|
<md-toolbar v-show="selection.category.browsing" class="md-dense" md-elevation="5">
|
|
<h3 v-if="selection.category.isCategory && !selection.category.isChatContext" class="md-title" style="flex: 1">Browsing category: {{ selection.category.title }}</h3>
|
|
<h3 v-if="!selection.category.isCategory && !selection.category.isChatContext" class="md-title" style="flex: 1">Browsing {{ selection.category.title }}</h3>
|
|
<h3 v-if="!selection.category.isCategory && selection.category.isChatContext" class="md-title" style="flex: 1">
|
|
Browsing {{ selection.category.title }} with
|
|
<a v-for="user in userLists[selection.category._id]" class="md-dense cursor" v-on:click="viewProfile(user.user._id)" v-bind:style="{ 'color': user.user.color }">{{ user.user.username }} </a>
|
|
</h3>
|
|
<md-button @click="browseCategories()" v-if="selection.category.isCategory || selection.category.isChatContext"><md-icon>arrow_back</md-icon></md-button>
|
|
<md-button @click="refresh()" v-if="!selection.category.isChatContext"><md-icon>refresh</md-icon></md-button>
|
|
</md-toolbar>
|
|
|
|
<div id="posts-container" class="posts-container" v-if="selection.category.browsing">
|
|
<md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
|
|
<md-card-header>
|
|
<div class="md-title" v-html="post.title"></div>
|
|
<span>by <a class="md-dense cursor" v-on:click="viewProfile(post.creator._id)" v-bind:style="{ 'color': post.creator.color}">{{ post.creator.username }}</a></span>
|
|
</md-card-header>
|
|
|
|
<md-card-content style="white-space: break-spaces !important;" v-html="post.body"></md-card-content>
|
|
|
|
<md-card-actions>
|
|
<md-button v-for="button in cardButtons" v-bind:key="button.text" @click="button.click(post)"><md-icon>{{ button.text }}</md-icon></md-button>
|
|
</md-card-actions>
|
|
</md-card>
|
|
<div v-for="post,k in messages[selection.category._id]" v-if="selection.category.isChatContext" :key="post._id + post.author._id">
|
|
<md-card class="message-card">
|
|
<md-card-header>
|
|
<a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)" v-bind:style="{ 'color': post.author.color}"><span>{{ post.author.username }}</span></a>
|
|
</md-card-header>
|
|
|
|
<md-card-content style="white-space: break-spaces !important;">{{ post.content }}</md-card-content>
|
|
</md-card>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;" v-show="!selection.category.isChatContext">
|
|
<md-speed-dial-target>
|
|
<md-icon class="md-morph-initial">add</md-icon>
|
|
<md-icon class="md-morph-final">edit</md-icon>
|
|
</md-speed-dial-target>
|
|
|
|
<md-speed-dial-content>
|
|
<md-button v-show="selection.category.isCategory" class="md-icon-button" @click="showCreatePostDialog()">
|
|
<md-icon>add</md-icon>
|
|
<md-tooltip md-direction="left">Create a new post</md-tooltip>
|
|
</md-button>
|
|
|
|
<md-button class="md-icon-button" @click="dialog.show.createCategory = true">
|
|
<md-icon>category</md-icon>
|
|
<md-tooltip md-direction="left">Create a new category</md-tooltip>
|
|
</md-button>
|
|
</md-speed-dial-content>
|
|
</md-speed-dial>
|
|
|
|
<md-field md-inline class="chat-bar" v-show="selection.category.isChatContext">
|
|
<label>Write something interesting, go on!</label>
|
|
<md-input v-model="message.typed" v-on:keyup.enter="sendCurrentMessage()"></md-input>
|
|
</md-field>
|
|
</div>
|
|
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
|
|
<span>{{ snackbarNotification }}</span>
|
|
<md-button class="md-primary" @click="snackbarButtonClick()">{{ snackbarButtonText }}</md-button>
|
|
</md-snackbar>
|
|
</div>
|
|
</body>
|
|
</html> |