Park Imajı indirme arayüzü eklendi

src/components/PullModal.vue

+<template>
+  <el-dialog
+    v-bind:visible.sync="modal"
+    v-bind:close-on-press-escape="false"
+    v-bind:before-close="check"
+    v-bind:show-close="false"
+    v-bind:title="$t('containers.pull_modal.message')"
+    custom-class="pull_modal"
+  >
+    <pre
+      v-if="this.progress.length === 0"
+      v-text="$t('containers.pull_modal.waiting')"
+    />
+    <div class="pull_output" v-else>
+      <pre
+        v-for="p in this.progress"
+        v-bind:key="p.progress"
+        v-text="
+          `${p.id !== undefined ? p.id + ': ' : ''}${p.status ||
+            ''} ${p.progress || ''}`
+        "
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "PullModal",
+  props: {
+    open: Boolean,
+    progress: Array
+  },
+  computed: {
+    modal: function() {
+      return this.open;
+    }
+  },
+  methods: {
+    check: function(hide) {
+      if (this.modal === true) {
+        return;
+      }
+      hide();
+    }
+  }
+};
+</script>

src/views/Containers.vue

 <template>
   <div>
+    <PullModal
+      v-bind:open="this.pull_modal"
+      v-bind:progress="this.pull_progress"
+    />
     <el-row type="flex" align="middle" v-bind:gutter="20">
       <el-col align="right">
         <el-button
@@ -68,7 +72,7 @@
           v-on:click="
             () => {
               createModal = false;
-              create();
+              check();
             }
           "
           >Oluştur</el-button
@@ -186,8 +190,12 @@
 </template>
 
 <script>
+import PullModal from "../components/PullModal";
 export default {
   name: "Containers",
+  components: {
+    PullModal
+  },
   data() {
     return {
       containers: [],
@@ -200,11 +208,54 @@ export default {
         max_ram: 2,
         sudo: true,
         sound: false
-      }
+      },
+      notify: null,
+      pull_modal: false,
+      pull_progress: [],
+      socket: null
     };
   },
   created() {
     this.getContainers();
+    this.socket = new WebSocket("ws://127.0.0.1:30000/socket");
+    this.socket.onmessage = e => {
+      try {
+        e = JSON.parse(e.data);
+        if (e.method === "pull") {
+          this.pull_modal = true;
+          if (e.event === "progress") {
+            try {
+              const p = JSON.parse(e.output);
+              if (Object.keys(p).includes("id")) {
+                const index = this.pull_progress.findIndex(
+                  pr => pr.id === p.id
+                );
+                if (index !== -1) {
+                  this.pull_progress = this.pull_progress.map(pr =>
+                    pr.id === p.id ? p : pr
+                  );
+                } else {
+                  this.pull_progress.push(p);
+                }
+              } else {
+                this.pull_progress.push(p);
+              }
+            } catch (e) {
+              console.log(e);
+            }
+          } else if (e.event === "done") {
+            this.pull_modal = false;
+            this.$message({
+              message: this.$t("containers.pull_modal.completed"),
+              type: "success",
+              showClose: true
+            });
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    };
   },
   methods: {
     getContainers: function() {
@@ -218,8 +269,38 @@ export default {
           this.$loading().close();
         });
     },
-    create: function() {
+    check: function() {
       this.$loading();
+      this.$http
+        .post(`/images`, {
+          image: `nyxteam/oyunparki-${this.form.version}`
+        })
+        .then(() => {
+          this.create();
+        })
+        .catch(() => {
+          this.notify = this.$notify({
+            title: this.$t("containers.create.notification.no_image.title"),
+            message: this.$t("containers.create.notification.no_image.message"),
+            duration: 0,
+            onClick: this.pull,
+            type: "error",
+            dangerouslyUseHTMLString: true
+          });
+          this.$loading().close();
+        });
+    },
+    pull: function() {
+      this.notify.close();
+      this.pull_modal = true;
+      this.socket.send(
+        JSON.stringify({
+          method: "pull",
+          image: `nyxteam/oyunparki-${this.form.version}`
+        })
+      );
+    },
+    create: function() {
       this.$http
         .post(`/create`, {
           image: `nyxteam/oyunparki-${this.form.version}`,