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

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

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

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

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

Write Preview
Loading…
Cancel
Save