1 files changed, 44 insertions, 37 deletions
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index ea6e242..3503824 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { MessageType, composerize } from 'composerize-ts';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { textToBase64 } from '@/utils/base64';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const dockerRun = ref(
+  'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
+);
+
+const conversionResult = computed(() =>
+  withDefaultOnError(() => composerize(dockerRun.value), { yaml: '', messages: [] }),
+);
+const dockerCompose = computed(() => conversionResult.value.yaml);
+const notImplemented = computed(() =>
+  conversionResult.value.messages.filter(msg => msg.type === MessageType.notImplemented).map(msg => msg.value),
+);
+const notComposable = computed(() =>
+  conversionResult.value.messages.filter(msg => msg.type === MessageType.notTranslatable).map(msg => msg.value),
+);
+const errors = computed(() =>
+  conversionResult.value.messages
+    .filter(msg => msg.type === MessageType.errorDuringConversion)
+    .map(msg => msg.value),
+);
+const dockerComposeBase64 = computed(() => `data:application/yaml;base64,${textToBase64(dockerCompose.value)}`);
+const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
+</script>
+
 <template>
   <div>
     <n-form-item label="Your docker run command:" :show-feedback="false">
@@ -12,16 +43,20 @@
 
     <n-divider />
 
-    <textarea-copyable :value="dockerCompose" language="yaml" />
+    <TextareaCopyable :value="dockerCompose" language="yaml" />
 
     <div mt-5 flex justify-center>
-      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download">
+        Download docker-compose.yml
+      </c-button>
     </div>
 
     <div v-if="notComposable.length > 0">
       <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
         <ul>
-          <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
+          <li v-for="(message, index) of notComposable" :key="index">
+            {{ message }}
+          </li>
         </ul>
       </n-alert>
     </div>
@@ -33,7 +68,9 @@
         mt-5
       >
         <ul>
-          <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
+          <li v-for="(message, index) of notImplemented" :key="index">
+            {{ message }}
+          </li>
         </ul>
       </n-alert>
     </div>
@@ -41,41 +78,11 @@
     <div v-if="errors.length > 0">
       <n-alert title="The following errors occured" type="error" mt-5>
         <ul>
-          <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
+          <li v-for="(message, index) of errors" :key="index">
+            {{ message }}
+          </li>
         </ul>
       </n-alert>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { withDefaultOnError } from '@/utils/defaults';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
-import { textToBase64 } from '@/utils/base64';
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
-
-import { composerize, MessageType } from 'composerize-ts';
-
-const dockerRun = ref(
-  'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
-);
-
-const conversionResult = computed(() =>
-  withDefaultOnError(() => composerize(dockerRun.value), { yaml: '', messages: [] }),
-);
-const dockerCompose = computed(() => conversionResult.value.yaml);
-const notImplemented = computed(() =>
-  conversionResult.value.messages.filter((msg) => msg.type === MessageType.notImplemented).map((msg) => msg.value),
-);
-const notComposable = computed(() =>
-  conversionResult.value.messages.filter((msg) => msg.type === MessageType.notTranslatable).map((msg) => msg.value),
-);
-const errors = computed(() =>
-  conversionResult.value.messages
-    .filter((msg) => msg.type === MessageType.errorDuringConversion)
-    .map((msg) => msg.value),
-);
-const dockerComposeBase64 = computed(() => 'data:application/yaml;base64,' + textToBase64(dockerCompose.value));
-const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, filename: 'docker-compose.yml' });
-</script>