Test

.env.development

+VUE_APP_I18N_LOCALE=tr
+VUE_APP_I18N_FALLBACK_LOCALE=tr
+VUE_APP_PROTOCOL=oyunparki-dev

.env.production

+VUE_APP_I18N_LOCALE=tr
+VUE_APP_I18N_FALLBACK_LOCALE=tr
+VUE_APP_PROTOCOL=oyunparki

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <section v-bind:class="$style['section']">
+      <div v-bind:class="[$style['container'], $style['is-fluid']]">
+        <div v-bind:class="$style['columns']">
+          <div v-bind:class="[$style['column'], $style['is-one-quarter']]">
+            <aside v-bind:class="$style['menu']">
+              <p v-bind:class="$style['menu-label']">
+                General
+              </p>
+              <ul v-bind:class="$style['menu-list']">
+                <li>
+                  <router-link
+                    v-bind:to="{ name: 'Containers' }"
+                    v-text="$t('menu.containers')"
+                  />
+                </li>
+                <li>
+                  <router-link
+                    v-bind:to="{ name: 'Images' }"
+                    v-text="$t('menu.images')"
+                  />
+                </li>
+              </ul>
+              <p v-bind:class="$style['menu-label']">
+                Administration
+              </p>
+            </aside>
+          </div>
+          <div v-bind:class="$style['column']">
+            <router-view />
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 

src/assets/scss/main.module.scss

 @import "bulma/bulma.sass";
+
+.icon-border {
+  border-radius: 50%;
+  border: 1px solid blue;
+  padding: 10px;
+  height: 1.25em;
+}

src/locales/tr.json

 {
+  "containers": {
+    "new": "Yeni Park Oluştur"
+  },
   "menu": {
     "containers": "Konteynerler",
     "images": "Imajlar"
   }
-}
+}
\ No newline at end of file

src/main.js

@@ -9,6 +9,7 @@ Vue.prototype.$style = style;
 
 Vue.prototype.$http = axios;
 Vue.prototype.$http.defaults.baseURL = "http://localhost:3000";
+Vue.prototype.$protocol = process.env.VUE_APP_PROTOCOL;
 
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";

src/views/Containers.vue

 <template>
-  <h1>Containers</h1>
+  <div>
+    <h1>Containers</h1>
+    <a href="#" v-on:click="create" v-text="$t('containers.new')" />
+    <article
+      v-bind:class="$style['box']"
+      v-for="container in containers"
+      v-bind:key="`container-${container.Id}`"
+    >
+      <div v-bind:class="$style['columns']">
+        <div v-bind:class="[$style['column'], $style['is-one-third']]">
+          <div
+            v-bind:class="[
+              $style['columns'],
+              $style['is-gapless'],
+              $style['is-multiline']
+            ]"
+          >
+            <div v-bind:class="[$style['columns']]">
+              <div v-bind:class="$style['column']">
+                <span v-text="container.Names[0]" />
+              </div>
+              <div v-bind:class="$style['column']">
+                <span v-text="container.Image" />
+              </div>
+            </div>
+            <div v-bind:class="[$style['columns']]">
+              <div v-bind:class="$style['column']">
+                <p v-text="container.State" />
+              </div>
+              <div v-bind:class="[$style['column'], $style['is-half']]">
+                <p
+                  v-text="`PORT: ${container.Ports[0].PublicPort}`"
+                  v-if="container.Ports[0]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-bind:class="[$style['column'], $style['is-half']]">
+          <div
+            v-bind:class="{
+              [$style['message-body']]: true
+            }"
+          >
+            <a
+              v-bind:href="
+                `${$protocol}://viewer/${container.Ports[0].PublicPort}`
+              "
+            >
+              <icon
+                icon="external-link-alt"
+                size="2x"
+                fixed-width
+                v-bind:class="$style['icon-border']"
+              />
+            </a>
+            <a v-bind:href="`${$protocol}://terminal/${container.Id}`">
+              <icon
+                icon="terminal"
+                size="2x"
+                fixed-width
+                v-bind:class="$style['icon-border']"
+              />
+            </a>
+            <icon
+              icon="stop"
+              size="2x"
+              fixed-width
+              v-on:click="control('stop', container.Id)"
+              v-bind:class="$style['icon-border']"
+              v-if="container.State === 'running'"
+            />
+            <icon
+              icon="play"
+              size="2x"
+              fixed-width
+              v-on:click="control('restart', container.Id)"
+              v-bind:class="$style['icon-border']"
+              v-else
+            />
+            <icon
+              icon="undo"
+              size="2x"
+              fixed-width
+              v-on:click="control('restart', container.Id)"
+              v-bind:class="$style['icon-border']"
+            />
+            <icon
+              icon="trash"
+              size="2x"
+              fixed-width
+              v-on:click="control('remove', container.Id)"
+              v-bind:class="$style['icon-border']"
+            />
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "Containers"
+  name: "Containers",
+  data() {
+    return {
+      containers: []
+    };
+  },
+  created() {
+    this.getContainers();
+  },
+  methods: {
+    getContainers: function() {
+      this.$http.get(`/containers`).then(({ data }) => {
+        this.containers = data;
+      });
+    },
+    create: function() {
+      this.$http
+        .post(`/create`, { image: "nyxteam/oyunparki-small" })
+        .then(({ data }) => {
+          console.log(data);
+        })
+        .finally(() => {
+          this.getContainers();
+        });
+    },
+    control: function(event, container) {
+      this.$http
+        .post(`/${event}`, { container })
+        .then(({ data }) => {
+          console.log(data);
+        })
+        .finally(() => {
+          this.getContainers();
+        });
+    }
+  }
 };
 </script>