You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
12 KiB
416 lines
12 KiB
<template>
|
|
<div id="app" class="container-fluid">
|
|
|
|
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start">
|
|
<b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
|
|
Swarmlab.io
|
|
</b-navbar-brand>
|
|
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
|
|
<ul class="navbar-nav mx-auto text-md-center text-left">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"
|
|
@click="hybrid('services')"
|
|
>
|
|
Manage_Your_Local_LabInstances</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"
|
|
@click="hybrid('bootstrap')"
|
|
>Containers</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
-
|
|
</a>
|
|
</li>
|
|
<li class="nav-item my-auto">
|
|
<a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
-
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"
|
|
@click="hybrid('connect-server')"
|
|
>Config_hybrid_server</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"
|
|
@click="hybrid('manage_service')"
|
|
>
|
|
Manage_Your_hybrid_LabInstances</a>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
|
|
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
|
|
<b-nav-item > | </b-nav-item>
|
|
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item>
|
|
<b-nav-item > </b-nav-item>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!-- ***************** container items ****************** -->
|
|
<b-row
|
|
v-show="hybridmenou == 'bootstrap'"
|
|
>
|
|
<b-col cols="12" >
|
|
|
|
<network-table
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</network-table>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row
|
|
v-show="hybridmenou == 'services'"
|
|
>
|
|
<b-col cols="12">
|
|
<services-table
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</services-table>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row
|
|
v-show="hybridmenou == 'connect-server'"
|
|
>
|
|
<b-col cols="12">
|
|
<connect-server
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</connect-server>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row
|
|
v-show="hybridmenou == 'manage_service'"
|
|
>
|
|
<b-col cols="12">
|
|
<manage-services
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</manage-services>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="d-flex" id="wrapper">
|
|
|
|
<!-- Sidebar max -->
|
|
<div class=" bg-light border-right" id="sidebar-wrapper"
|
|
v-if="sidemenou == 'max'"
|
|
>
|
|
<div class=" logo simple-text ti-swarmlab text-secondary sidebar-heading"
|
|
@click="onActionMenu('min')"
|
|
>
|
|
Swarmlab.io
|
|
</div>
|
|
<div class="list-group list-group-flush"
|
|
>
|
|
|
|
<!-- Menou Dashboard -->
|
|
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }"> Dashboard</b-list-group-item>
|
|
|
|
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
|
|
<b-list-group-item variant="light" name="dashboard" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Profile</b-list-group-item>
|
|
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
|
|
</b-collapse>
|
|
|
|
<!-- Menou StandAlone -->
|
|
<b-list-group-item v-b-toggle.hybrid-local variant="light" name="Local" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('local','')" style="cursor: pointer;" :class="{ active: isActive('local') }"> Local</b-list-group-item>
|
|
|
|
<b-collapse id="hybrid-local" class="m-subm" accordion="m-sidebar" role="tabpanel">
|
|
<b-list-group-item variant="light" name="local" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_local')" style="cursor: pointer;" :class="{ active: isActiveSub('local_local') }"> Local</b-list-group-item>
|
|
<b-list-group-item variant="light" name="Menou" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_menou')" style="cursor: pointer;" :class="{ active: isActiveSub('local_menou') }"> Menou</b-list-group-item>
|
|
</b-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar min -->
|
|
<div class="bg-light border-right" id="sidebar-wrapper"
|
|
v-if="sidemenou == 'min'"
|
|
>
|
|
<div class=" ti-layout-slider sidebar-heading"
|
|
@click="onActionMenu('max')"
|
|
>
|
|
</div>
|
|
<div class="list-group list-group-flush"
|
|
>
|
|
<a href="#" class="ti-help list-group-item list-group-item-action bg-light"></a>
|
|
<a href="#" class="ti-link list-group-item list-group-item-action bg-light"></a>
|
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
|
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
|
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
|
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
|
|
</div>
|
|
</div>
|
|
<!-- /#sidebar-wrapper -->
|
|
|
|
<!-- Page Content -->
|
|
<div id="page-content-wrapper">
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
|
|
<button class="btn btn-primary" >
|
|
Max Menu
|
|
</button>
|
|
<button class="btn btn-primary" >
|
|
Min Menu
|
|
</button>
|
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Dropdown
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<h1 class="mt-4">Simple Sidebar</h1>
|
|
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
|
|
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /#page-content-wrapper -->
|
|
|
|
</div>
|
|
<!-- /#wrapper -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import "@/assets/css/themify-icons.css";
|
|
|
|
import ConnectServer from "./components/myconnect-server.vue";
|
|
import NetworkTable from "./components/mynetwork.vue";
|
|
import ServicesTable from "./components/myservices.vue";
|
|
import ManageServices from "./components/manageservices.vue";
|
|
|
|
export default {
|
|
name: 'app',
|
|
components: {
|
|
NetworkTable,
|
|
ServicesTable,
|
|
ConnectServer,
|
|
ManageServices
|
|
},
|
|
data() {
|
|
return {
|
|
activeItem: '', // menou
|
|
activeItemSub: '', //submenou
|
|
sidemenou:'max',
|
|
hybridmenou:'bootstrap',
|
|
show: true,
|
|
token: '',
|
|
SwarmabAsciiLabTemplate:''
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
onActionMenu(action){
|
|
if(action == 'max'){
|
|
this.sidemenou = 'max'
|
|
}else if(action == 'min'){
|
|
this.sidemenou = 'min'
|
|
}
|
|
console.log(action)
|
|
},
|
|
hybrid(action) {
|
|
this.hybridmenou = action
|
|
console.log(action)
|
|
if(action == 'bootstrap'){
|
|
this.$root.$emit('hybrid_refresh_dockerservices')
|
|
}else if(action == 'connect-server'){
|
|
this.$root.$emit('hybrid_connect_server')
|
|
}else if(action == 'services'){
|
|
this.$root.$emit('hybrid_refresh_availableservices')
|
|
}else if(action == 'manage_service'){
|
|
//this.$root.$emit('hybrid_manage_service')
|
|
}
|
|
},
|
|
isActive: function (menuItem) {
|
|
console.log('active ' + menuItem);
|
|
return this.activeItem === menuItem
|
|
},
|
|
isActiveSub: function (menuItem) {
|
|
console.log('activesub ' + menuItem);
|
|
return this.activeItemSub === menuItem
|
|
},
|
|
setActive: function (menuItem,menuItemSub) {
|
|
console.log('set ' + menuItem);
|
|
this.activeItem = menuItem // no need for Vue.set()
|
|
this.activeItemSub = menuItemSub // no need for Vue.set()
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.active {
|
|
background-color: #e7e7e7 !important;
|
|
color: #0c5460 !important;
|
|
}
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
|
|
|
|
|
|
body {
|
|
background: #EEF1F4 !important;
|
|
}
|
|
|
|
.nav-background {
|
|
background: #353535;
|
|
}
|
|
|
|
.ti-swarmlab:before {
|
|
position: relative;
|
|
top:-5px;
|
|
right:-8px;
|
|
font-size: 1.5em;
|
|
font-weight: 300;
|
|
content: "\e606";
|
|
color: #222;
|
|
color: #74B3C8;
|
|
border-color: #c60000;
|
|
}
|
|
|
|
.ti-themify-logo:before {
|
|
content: "\e6d1";
|
|
}
|
|
|
|
.menoutext {
|
|
font-family: 'Lato', sans-serif !important;
|
|
}
|
|
|
|
.mycontainer {
|
|
padding-right: 20px !important;
|
|
padding-left: 5px !important;
|
|
margin-right:auto;
|
|
margin-left:auto
|
|
}
|
|
|
|
|
|
.m-subm {
|
|
width: 100%;
|
|
border-left: 4px solid #4b4ba3;;
|
|
background-color: #f0f0f0;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
|
|
}
|
|
.m-subm-card {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
background-color: #f0f0f0;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
margin-bottom: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
.m-subm-listgroup {
|
|
width: 100%;
|
|
//border-left: 4px solid #4b4ba3;
|
|
background-color: #f0f0f0;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
padding-left: 2.25rem;
|
|
}
|
|
|
|
.m-subm-listgroup:hover {
|
|
background-color: #e7e7e7;
|
|
font-weight: 580;
|
|
}
|
|
.m-subm-listgroup:focus {
|
|
background-color: #e7e7e7;
|
|
color:#393982;
|
|
font-weight: 580;
|
|
}
|
|
|
|
|
|
</style>
|
|
|