Lefteris
/
playground-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

layout fix

master
lefteris 4 years ago
parent
8668b3cb7a
commit
f34cb4f897
4 changed files with 241 additions and 204 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      gitpush.sh
  2. 271
      src/components/DocLive.vue
  3. 143
      src/components/doclive/AdhocView.vue
  4. 28
      src/components/doclive/runLlo.vue

3
gitpush.sh
View File

@ -0,0 +1,3 @@
git add .
git commit -m "layout fix"
git push origin

271
src/components/DocLive.vue
View File

@ -1,75 +1,73 @@
<template>
<div>
<div>
<!-- menou -->
<div class="row"
v-show="showmenou == 1"
>
<div class="col-3">
<div class="input-group-append">
<button type="button"
round
v-if="columnviewdefault == '0'"
class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
@click="fullscreen('max')">
Max-Notebook View </button>
<button type="button"
round
v-if="columnviewdefault == '1'"
class="ti-layout-sidebar-right btn btn-outline-info btn-sm"
@click="fullscreen('min')">
Min-Notebook View</button>
</div>
</div>
<div class="col-6">
<span></span>
</div>
<div class="col-3">
<div class="input-group-prepend">
<button type="button"
round
v-if="columncodedefault == '0'"
class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
style="float: right;"
@click="fullscreen('codemax')">
Max-Code View </button>
<button type="button"
round
v-if="columncodedefault == '1'"
style="float: right;"
class="ti-layout-sidebar-left btn btn-outline-info btn-sm"
@click="fullscreen('codemin')">
Min-Code View</button>
</div>
</div>
<div class="row" v-show="showmenou == 1">
<div class="col-3">
<div class="input-group-append">
<button
type="button"
round
v-if="columnviewdefault == '0'"
class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
@click="fullscreen('max')"
>
Max-Notebook View
</button>
<button
type="button"
round
v-if="columnviewdefault == '1'"
class="ti-layout-sidebar-right btn btn-outline-info btn-sm"
@click="fullscreen('min')"
>
Min-Notebook View
</button>
</div>
</div>
<div class="col-6">
<span></span>
</div>
<div class="col-3">
<div class="input-group-prepend">
<button
type="button"
round
v-if="columncodedefault == '0'"
class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
style="float: right;"
@click="fullscreen('codemax')"
>
Max-Code View
</button>
<button
type="button"
round
v-if="columncodedefault == '1'"
style="float: right;"
class="ti-layout-sidebar-left btn btn-outline-info btn-sm"
@click="fullscreen('codemin')"
>
Min-Code View
</button>
</div>
</div>
</div>
<!-- menou -->
<div class="row">
<div :class="columnview">
<ad-hoc style="background-color: #f8f9fa"> </ad-hoc>
</div>
<div class="row" >
<div :class="columnview">
<ad-hoc
style="background-color: #f8f9fa"
>
</ad-hoc>
</div>
<div :class="columncode">
<run-llo
style="background-color: #f8f9fa"
>
</run-llo>
</div>
<div :class="columncode">
<run-llo style="background-color: #f8f9fa"> </run-llo>
</div>
</div>
</div>
</div>
</template>
<script>
@ -77,86 +75,85 @@ import RunLlo from "./doclive/runLlo.vue";
import AdHoc from "./doclive/AdhocView.vue";
export default {
name: 'DocLive',
props: {
},
name: "DocLive",
props: {},
components: {
RunLlo,
AdHoc
AdHoc,
},
data() {
return {
loading: false,
showhistory: 0,
productIndex: 1,
showmenou: 1,
columnviewdefault: 0,
columncodedefault: 0,
columnview: "col-7 order-first",
columncode: "col-5 order-last",
tutorMenou: "student",
};
},
data () {
return {
loading: false,
showhistory : 0,
productIndex: 1,
showmenou: 1,
columnviewdefault : 0,
columncodedefault : 0,
columnview : 'col-7 order-first',
columncode : 'col-5 order-last',
tutorMenou: 'student'
created: function() {},
mounted() {
this.$root.$on("LLOshowmenounotebooks", () => {
this.showmenou = 1;
}),
this.$root.$on("lloshowchallengehistory", (llo, active) => {
this.showhistory = 1;
});
},
beforeDestroy() {
this.$root.$off("LLOshowmenounotebooks"),
this.$root.$off("lloshowchallengehistory"); // working
},
methods: {
fullscreen(action) {
if (action == "max") {
this.columnview = "col-11 order-first";
this.columncode = "col-1 order-last";
this.columnviewdefault = 1;
this.columncodedefault = 0;
//set height iframe
this.$root.$emit("LLOresizemenounotebooks", "max");
console.log(this.columnview);
} else if (action == "min") {
this.columnview = "col-7 order-first";
this.columncode = "col-5 order-last";
this.columnviewdefault = 0;
this.columncodedefault = 1;
//set height iframe
this.$root.$emit("LLOresizemenounotebooks", "min");
console.log(this.columnview);
} else if (action == "codemax") {
this.columnview = "col-1 order-first";
this.columncode = "col-11 order-last";
this.columnviewdefault = 0;
this.columncodedefault = 1;
console.log(this.columnview);
} else if (action == "codemin") {
this.columnview = "col-7 order-first";
this.columncode = "col-5 order-last";
this.columnviewdefault = 1;
this.columncodedefault = 0;
this.$root.$emit("LLOresizemenounotebooks", "min");
console.log(this.columnview);
}
},
created: function () {
async onAction(action) {
this.tutorMenou = "tutor";
//this.tutorMenou='student'
},
mounted() {
this.$root.$on('LLOshowmenounotebooks', () => {
this.showmenou = 1
}),
this.$root.$on('lloshowchallengehistory', (llo,active) => {
this.showhistory = 1
})
},
beforeDestroy () {
this.$root.$off('LLOshowmenounotebooks'),
this.$root.$off('lloshowchallengehistory') // working
},
methods: {
fullscreen(action){
if(action == 'max'){
this.columnview = 'col-11 order-first'
this.columncode = 'col-1 order-last'
this.columnviewdefault = 1
this.columncodedefault = 0
//set height iframe
this.$root.$emit('LLOresizemenounotebooks','max')
console.log(this.columnview)
}
else if(action == 'min'){
this.columnview = 'col-7 order-first'
this.columncode = 'col-5 order-last'
this.columnviewdefault = 0
this.columncodedefault = 1
//set height iframe
this.$root.$emit('LLOresizemenounotebooks','min')
console.log(this.columnview)
}
else if(action == 'codemax'){
this.columnview = 'col-1 order-first'
this.columncode = 'col-11 order-last'
this.columnviewdefault = 0
this.columncodedefault = 1
console.log(this.columnview)
}
else if(action == 'codemin'){
this.columnview = 'col-7 order-first'
this.columncode = 'col-5 order-last'
this.columnviewdefault = 1
this.columncodedefault = 0
this.$root.$emit('LLOresizemenounotebooks','min')
console.log(this.columnview)
}
},
async onAction (action) {
this.tutorMenou='tutor'
//this.tutorMenou='student'
}
}
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.col-7 {
max-width: 48%;
}
.col-5 {
max-width: 50%;
}
</style>

143
src/components/doclive/AdhocView.vue
View File

@ -4,32 +4,10 @@
<b-col cols="12" sm="12" md="12">
<b-row>
<b-col cols="4">
<div class="input-group input-group-sm sm-3">
<!--
<select
class="custom-select custom-select-sm "
@change="setKeymap"
v-model="selected">
<option
v-for="option in options"
v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<div class="input-group-append">
<button type="button"
round
class="btn btn-outline-info btn-sm"
v-if="cmOptions.keyMap == 'sublime'"
@click="infoFilter">
i</button>
</div>
-->
</div>
</b-col>
<b-col cols="3">
<div class="input-group input-group-sm sm-3">
<div
class="input-group input-group-sm sm-3"
style="padding-top: 10px;"
>
<button
type="button"
round
@ -51,6 +29,16 @@
>
{{ this.alllogs }}
</button>
<button
type="button"
round
disable
class="btn btn-outline-info btn-sm"
v-if="socketonline"
@click="showChart"
>
{{ this.chartbut }}
</button>
</div>
<button
type="button"
@ -64,6 +52,10 @@
</div>
</b-col>
<b-col cols="3">
<div class="input-group input-group-sm sm-3"></div>
</b-col>
<b-col cols="5">
<div
class="input-group input-group-sm d-flex justify-content-end"
@ -86,6 +78,7 @@
<div class="codemirror">
<div v-if="history" class="table2">
<h2>History of all app logs</h2>
<vuetable
ref="vuetable"
:api-url="api_url"
@ -107,29 +100,34 @@
>
</vuetable>
</div>
<div v-if="history" class="vuetable-pagination ui basic segment grid">
<vuetable-pagination-info
ref="paginationInfo"
:css="css.paginationInfo"
>
</vuetable-pagination-info>
<vuetable-pagination
:css="css.pagination"
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
<br />
<div class="pagi">
<div
v-if="history"
class="vuetable-pagination ui basic segment grid"
>
</vuetable-pagination>
<vuetable-pagination-info
ref="paginationInfo"
:css="css.paginationInfo"
>
</vuetable-pagination-info>
<vuetable-pagination
:css="css.pagination"
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
>
</vuetable-pagination>
</div>
</div>
<div class="highch" v-if="history">
<transition name="bounce" appear>
<highcharts
class="hc"
:options="chartOptions"
:callback="callback"
ref="chart"
></highcharts>
</transition>
<div class="highch" v-show="chartstatus">
<h2>HighChart with log sum Data</h2>
<highcharts
class="hc"
:options="chartOptions"
:callback="callback"
ref="chart"
></highcharts>
</div>
</div>
</b-col>
@ -200,6 +198,8 @@ export default {
},
data() {
return {
chartstatus: false,
chartbut: "Show HighChart",
chartOptions: {
title: {
text: "Length of logs chart",
@ -213,11 +213,11 @@ export default {
type: "column",
},
xAxis: {
categories: ["JobjLogs", "jobj_console"],
categories: ["Out Logs", "Error Logs"],
},
yAxis: {
title: {
text: "Count",
text: "Counter",
},
},
series: [],
@ -302,7 +302,7 @@ export default {
},
},
],
alllogs: "Show all logs",
alllogs: "Show app logs",
socketonline: false,
tryConsole: false,
history: false,
@ -423,14 +423,16 @@ export default {
//this.console = store.getters["statsmodule/getCountConsole"];
// var JobjLogs = store.getters["statsmodule/getCountLogs"];
// var jobj_console = store.getters["statsmodule/getCountConsole"];
var one = 1;
var two = 2;
this.chartOptions.series.push(
{
name: "swarm-app-Stats",
data: ["1", "2"],
name: "Readmongo service",
data: [one, two],
},
{
name: "swarm-app-Stats2",
data: ["1", "2"],
name: "MongoDB",
data: [one, two],
}
);
},
@ -438,12 +440,21 @@ export default {
// send to runLLO
this.$root.$emit("SERVER_socket_connect");
},
showChart() {
if (this.chartstatus == false) {
this.chartstatus = true;
this.chartbut = "Hide HighChart";
} else {
this.chartstatus = false;
this.chartbut = "Show HighChart";
}
},
showHistory() {
if (this.history == false) {
this.history = true;
this.alllogs = "Hide all logs";
this.alllogs = "Hide app logs";
} else {
this.alllogs = "Show all logs";
this.alllogs = "Show app logs";
this.history = false;
}
},
@ -701,18 +712,38 @@ export default {
</script>
<style scoped>
h2 {
background-color: dimgray;
padding: 10px;
color: white;
margin-top: 20px;
border-radius: 5px;
}
.highch {
padding-top: 50px;
max-width: 900px;
}
.table2 {
min-height: 320px;
max-width: 900px;
overflow: auto;
}
.CodeMirror {
font-family: monospace;
height: 550px;
max-width: 900px;
min-height: 500px;
}
.codemirror {
min-height: 500px;
}
.orange {
color: rgb(167, 110, 6);
}
.pagi {
max-width: 900px;
}
.btn {
padding: 10px;
margin: 10px;
}
</style>

28
src/components/doclive/runLlo.vue
View File

@ -182,8 +182,8 @@
</b-row>
</div>
<!-- col -->
<h2 v-if="onEvent">ON-event logs for all apps (Simplified)</h2>
<div v-if="onEvent" class="table2">
<h1>App Logs - Simplified (ON EVENT)</h1>
<vuetable
ref="vuetable"
:api-mode="false"
@ -192,10 +192,10 @@
:css="css.table"
>
</vuetable>
<hr />
</div>
<h2 v-if="onEvent">ON-event logs for MongoDB (RAW)</h2>
<div v-if="onEvent" class="table2">
<h1>Mongo Logs - RAW (More details - ON EVENT)</h1>
<vuetable
ref="vuetable"
:api-mode="false"
@ -234,7 +234,9 @@ export default {
{
name: "message",
title: "Log",
width: "10%",
visible: true,
dataClass: "center aligned",
},
{
name: "timestamp",
@ -278,7 +280,7 @@ export default {
},
{
name: "id",
visible: true,
visible: false,
},
{
name: "ctx",
@ -563,7 +565,7 @@ export default {
created() {
//var logintoken = new URL(location.href).searchParams.get("token");
var logintoken = new URL(
"https://api-client.swarmlab.io:8088/?token=741662728073939963b63bb0b90da41e706333e6"
"https://api-client.swarmlab.io:8088/?token=5b39802077f68ac7499066391067e10535a7053a"
).searchParams.get("token");
this.logintoken = logintoken;
// === We get the user + check for the token if exists
@ -851,19 +853,23 @@ export default {
</script>
<style scoped>
.table {
min-height: 0px;
max-width: 600px;
}
.table2 {
overflow: auto;
max-height: 400px;
min-width: 100%;
}
h2 {
background-color: dimgray;
padding: 10px;
color: white;
margin-top: 20px;
border-radius: 5px;
width: 100%;
}
.CodeMirror {
font-family: monospace;
height: 750px;
}
.rowlog {
display: flex; /* equal height of the children */
height: 470px;
}
</style>

Write Preview
Loading…
Cancel
Save