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.

417 lines
12 KiB

4 years ago
<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>