2 files changed, 111 insertions, 43 deletions
diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue
index 61f91e0e..037a4963 100644
--- a/src/views/Control/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLan.vue
@@ -1,55 +1,24 @@
 <template>
   <b-container fluid="xl">
-    <page-title />
+    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
 
-    <page-section :section-title="$t('pageSerialoverLAN.subTitle')">
-      <p>{{ $t('pageSerialoverLAN.subTitleDesc') }}</p>
-
-      <div class="terminal-container">
-        <serial-over-lan-console />
-      </div>
-      <div class="text-right">
-        <b-button
-          variant="link"
-          type="button"
-          class="button-launch"
-          @click="openConsoleWindow()"
-        >
-          <icon-launch />
-
-          {{ $t('pageSerialoverLAN.openNewTab') }}
-        </b-button>
-      </div>
+    <page-section class="mb-0">
+      <serial-over-lan-console :is-full-window="false" />
     </page-section>
   </b-container>
 </template>
 
 <script>
-import IconLaunch from '@carbon/icons-vue/es/launch/32';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import SerialOverLanConsole from './SerialOverLanConsole';
 
 export default {
   name: 'SerialOverLan',
-  components: { IconLaunch, PageSection, PageTitle, SerialOverLanConsole },
-  methods: {
-    openConsoleWindow() {
-      window.open(
-        '#/console/serial-over-lan-console',
-        '_blank',
-        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
-      );
-    }
+  components: {
+    PageSection,
+    PageTitle,
+    SerialOverLanConsole
   }
 };
 </script>
-
-<style scoped>
-.button-launch > svg {
-  height: 25px;
-}
-.terminal-container {
-  width: 100%;
-}
-</style>
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index 69ccf8df..d5e9b214 100644
--- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -1,14 +1,71 @@
 <template>
-  <div id="terminal" ref="panel"></div>
+  <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'">
+    <template>
+      <b-row class="d-flex">
+        <b-col class="d-flex flex-column justify-content-end">
+          <dl class="mb-2" sm="6" md="6">
+            <dt class="d-inline font-weight-bold mr-1">
+              {{ $t('pageSerialOverLan.status') }}:
+            </dt>
+            <dd class="d-inline">
+              <status-icon :status="hostStatusIcon" /> {{ connectionStatus }}
+            </dd>
+          </dl>
+        </b-col>
+
+        <b-col v-if="!isFullWindow" class="d-flex justify-content-end">
+          <b-button
+            variant="link"
+            type="button"
+            class="pr-0 button-launch"
+            @click="openConsoleWindow()"
+          >
+            <icon-launch aria-hidden="true" />
+
+            {{ $t('pageSerialOverLan.openNewTab') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </template>
+    <div id="terminal" ref="panel"></div>
+  </div>
 </template>
 
 <script>
 import { AttachAddon } from 'xterm-addon-attach';
 import { FitAddon } from 'xterm-addon-fit';
 import { Terminal } from 'xterm';
+import IconLaunch from '@carbon/icons-vue/es/launch/20';
+import StatusIcon from '@/components/Global/StatusIcon';
 
 export default {
   name: 'SerialOverLanConsole',
+  components: {
+    IconLaunch,
+    StatusIcon
+  },
+  props: {
+    isFullWindow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    hostStatus() {
+      return this.$store.getters['global/hostStatus'];
+    },
+    hostStatusIcon() {
+      return this.hostStatus === 'on' ? 'success' : 'danger';
+    },
+    connectionStatus() {
+      return this.hostStatus === 'on'
+        ? this.$t('pageSerialOverLan.connected')
+        : this.$t('pageSerialOverLan.disconnected');
+    }
+  },
+  created() {
+    this.$store.dispatch('global/getHostStatus');
+  },
   mounted() {
     this.openTerminal();
   },
@@ -59,16 +116,58 @@ export default {
       } catch (error) {
         console.log(error);
       }
+    },
+    openConsoleWindow() {
+      window.open(
+        '#/console/serial-over-lan-console',
+        '_blank',
+        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
+      );
     }
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 @import '~xterm/css/xterm.css';
 
-#terminal {
-  height: 25em;
-  overflow: hidden;
+.terminal-container {
+  #terminal {
+    overflow: auto;
+  }
+}
+@include media-breakpoint-up(xs) {
+  .terminal-container {
+    width: 100%;
+  }
+}
+@include media-breakpoint-up(sm) {
+  .terminal-container {
+    width: 80%;
+  }
+}
+@include media-breakpoint-up(md) {
+  .terminal-container {
+    width: 65%;
+  }
+}
+@include media-breakpoint-up(lg) {
+  .terminal-container {
+    width: 80%;
+  }
+}
+@include media-breakpoint-up(xl) {
+  .terminal-container {
+    width: 60%;
+  }
+}
+
+.full-window-container {
+  width: 97%;
+  max-width: 960px;
+  margin: 1.5%;
+  #terminal {
+    overflow: auto;
+  }
 }
 </style>