Add navigation to the server view
This commit is contained in:
parent
349ec7da38
commit
0bf4764bfb
1 changed files with 42 additions and 38 deletions
|
@ -1,53 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto p-2 flex flex-no-shrink rounded">
|
<div>
|
||||||
<div class="sidebar border-grey-lighter flex-no-shrink w-1/4">
|
<navigation></navigation>
|
||||||
<div class="pt-6 px-6 pb-4 text-center">
|
<div class="container mx-auto p-2 flex flex-no-shrink rounded">
|
||||||
<h3 class="mb-2 text-blue">Pterodactylcraft</h3>
|
<div class="sidebar border-grey-lighter flex-no-shrink w-1/4">
|
||||||
<span class="text-grey-dark">Minecraft / Vanilla</span>
|
<div class="pt-6 px-6 pb-4 text-center">
|
||||||
<div class="text-lg my-4"><span class="text-green">●</span> Running</div>
|
<h3 class="mb-2 text-blue">Pterodactylcraft</h3>
|
||||||
<div>
|
<span class="text-grey-dark">Minecraft / Vanilla</span>
|
||||||
<button class="btn btn-red">Stop</button>
|
<div class="text-lg my-4"><span class="text-green">●</span> Running</div>
|
||||||
<button class="btn btn-blue">Restart</button>
|
<div>
|
||||||
<button class="btn btn-red">Kill</button>
|
<button class="btn btn-red">Stop</button>
|
||||||
</div>
|
<button class="btn btn-blue">Restart</button>
|
||||||
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-lighter usage">
|
<button class="btn btn-red">Kill</button>
|
||||||
<span class="indicator-title">CPU - 2 Cores</span>
|
</div>
|
||||||
<div class="rounded border-grey-lighter border mt-3 h-4">
|
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-lighter usage">
|
||||||
<div class="rounded bg-blue h-4 w-1/6"></div>
|
<span class="indicator-title">CPU - 2 Cores</span>
|
||||||
|
<div class="rounded border-grey-lighter border mt-3 h-4">
|
||||||
|
<div class="rounded bg-blue h-4 w-1/6"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="my-6 text-grey-dark border-t border-grey-lighter usage">
|
||||||
|
<span class="indicator-title">RAM - 4 GB</span>
|
||||||
|
<div class="rounded border-grey-lighter border mt-3 h-4">
|
||||||
|
<div class="rounded bg-blue h-4 w-2/3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="my-6 text-grey-dark border-t border-grey-lighter usage">
|
||||||
|
<span class="indicator-title">Disk - 20 GB</span>
|
||||||
|
<div class="rounded border-grey-lighter border mt-3 h-4">
|
||||||
|
<div class="rounded bg-blue h-4 w-1/3"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-6 text-grey-dark border-t border-grey-lighter usage">
|
<div class="sidenav">
|
||||||
<span class="indicator-title">RAM - 4 GB</span>
|
<router-link :to="{ name: 'server' }"><font-awesome-icon class="mr-2" fixed-with icon="terminal" />Console</router-link>
|
||||||
<div class="rounded border-grey-lighter border mt-3 h-4">
|
<router-link :to="{ name: 'server-files' }"><font-awesome-icon class="mr-2" fixed-with icon="folder-open" />Files</router-link>
|
||||||
<div class="rounded bg-blue h-4 w-2/3"></div>
|
<router-link :to="{ name: 'server-subusers' }"><font-awesome-icon class="mr-2" fixed-with icon="users" />Subusers</router-link>
|
||||||
</div>
|
<router-link :to="{ name: 'server-schedules' }"><font-awesome-icon class="mr-2" fixed-with icon="calendar-alt" />Schedules</router-link>
|
||||||
</div>
|
<router-link :to="{ name: 'server-databases' }"><font-awesome-icon class="mr-2" fixed-with icon="database" />Databases</router-link>
|
||||||
<div class="my-6 text-grey-dark border-t border-grey-lighter usage">
|
<router-link :to="{ name: 'server-allocations' }"><font-awesome-icon class="mr-2" fixed-with icon="globe" />Allocations</router-link>
|
||||||
<span class="indicator-title">Disk - 20 GB</span>
|
<router-link :to="{ name: 'server-settings' }"><font-awesome-icon class="mr-2" fixed-with icon="cog" />Settings</router-link>
|
||||||
<div class="rounded border-grey-lighter border mt-3 h-4">
|
|
||||||
<div class="rounded bg-blue h-4 w-1/3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidenav">
|
<div class="main bg-white p-6 rounded border border-grey-lighter flex-grow"><!--h1.text-blue.mb-6 Server Console-->
|
||||||
<router-link :to="{ name: 'server' }"><font-awesome-icon class="mr-2" fixed-with icon="terminal" />Console</router-link>
|
<router-view></router-view>
|
||||||
<router-link :to="{ name: 'server-files' }"><font-awesome-icon class="mr-2" fixed-with icon="folder-open" />Files</router-link>
|
|
||||||
<router-link :to="{ name: 'server-subusers' }"><font-awesome-icon class="mr-2" fixed-with icon="users" />Subusers</router-link>
|
|
||||||
<router-link :to="{ name: 'server-schedules' }"><font-awesome-icon class="mr-2" fixed-with icon="calendar-alt" />Schedules</router-link>
|
|
||||||
<router-link :to="{ name: 'server-databases' }"><font-awesome-icon class="mr-2" fixed-with icon="database" />Databases</router-link>
|
|
||||||
<router-link :to="{ name: 'server-allocations' }"><font-awesome-icon class="mr-2" fixed-with icon="globe" />Allocations</router-link>
|
|
||||||
<router-link :to="{ name: 'server-settings' }"><font-awesome-icon class="mr-2" fixed-with icon="cog" />Settings</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main bg-white p-6 rounded border border-grey-lighter flex-grow"><!--h1.text-blue.mb-6 Server Console-->
|
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ServerConsole from "./ServerConsole";
|
import ServerConsole from "./ServerConsole";
|
||||||
|
import Navigation from '../core/Navigation';
|
||||||
export default {
|
export default {
|
||||||
components: {ServerConsole}
|
components: { Navigation, ServerConsole}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue