3 files changed, 131 insertions, 0 deletions
diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue
new file mode 100644
index 00000000..61f91e0e
--- /dev/null
+++ b/src/views/Control/SerialOverLan/SerialOverLan.vue
@@ -0,0 +1,55 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <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>
+  </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'
+      );
+    }
+  }
+};
+</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
new file mode 100644
index 00000000..69ccf8df
--- /dev/null
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -0,0 +1,74 @@
+<template>
+  <div id="terminal" ref="panel"></div>
+</template>
+
+<script>
+import { AttachAddon } from 'xterm-addon-attach';
+import { FitAddon } from 'xterm-addon-fit';
+import { Terminal } from 'xterm';
+
+export default {
+  name: 'SerialOverLanConsole',
+  mounted() {
+    this.openTerminal();
+  },
+  methods: {
+    openTerminal() {
+      const token = this.$store.getters['authentication/token'];
+
+      const ws = new WebSocket(`wss://${window.location.host}/console0`, [
+        token
+      ]);
+
+      // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
+
+      const term = new Terminal({
+        fontSize: 15,
+        fontFamily:
+          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
+      });
+
+      const attachAddon = new AttachAddon(ws);
+      term.loadAddon(attachAddon);
+
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+
+      const SOL_THEME = {
+        background: '#19273c',
+        cursor: 'rgba(83, 146, 255, .5)',
+        scrollbar: 'rgba(83, 146, 255, .5)'
+      };
+      term.setOption('theme', SOL_THEME);
+
+      term.open(this.$refs.panel);
+      fitAddon.fit();
+
+      try {
+        ws.onopen = function() {
+          console.log('websocket console0/ opened');
+        };
+        ws.onclose = function(event) {
+          console.log(
+            'websocket console0/ closed. code: ' +
+              event.code +
+              ' reason: ' +
+              event.reason
+          );
+        };
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+@import '~xterm/css/xterm.css';
+
+#terminal {
+  height: 25em;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/Control/SerialOverLan/index.js b/src/views/Control/SerialOverLan/index.js
new file mode 100644
index 00000000..7c8bc7c0
--- /dev/null
+++ b/src/views/Control/SerialOverLan/index.js
@@ -0,0 +1,2 @@
+import SerialOverLan from './SerialOverLan.vue';
+export default SerialOverLan;