Initialize project

frontend/src/views/tools/DockerConverter.vue

@@ -0,0 +1,75 @@
+<template>
+  <ToolLayout>
+    <template #header>
+      <h1 class="text-xl font-semibold text-gray-900 dark:text-white">Docker Converter</h1>
+      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Convert between 'docker run' commands and Docker Compose YAML.</p>
+    </template>
+    
+    <template #content>
+      <div class="h-full flex flex-col space-y-4">
+        
+        <!-- Docker Run Input -->
+        <div class="flex-1 flex flex-col">
+          <div class="flex items-center justify-between mb-2">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Docker Run Command</label>
+            <button @click="convertToCompose" class="text-xs text-blue-600 hover:text-blue-500">Convert to Compose ↓</button>
+          </div>
+          <textarea
+            v-model="dockerRun"
+            class="flex-1 w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono text-xs resize-none"
+            placeholder="docker run -d -p 80:80 nginx"
+          ></textarea>
+        </div>
+
+        <!-- Compose Output -->
+        <div class="flex-1 flex flex-col">
+          <div class="flex items-center justify-between mb-2">
+             <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Docker Compose (YAML)</label>
+             <button @click="convertToRun" class="text-xs text-blue-600 hover:text-blue-500">Convert to Run ↑</button>
+          </div>
+          <textarea
+            v-model="dockerCompose"
+            class="flex-1 w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 font-mono text-xs resize-none"
+            placeholder="version: '3.3'&#10;services:..."
+          ></textarea>
+        </div>
+
+        <div v-if="error" class="text-red-500 text-xs">{{ error }}</div>
+
+      </div>
+    </template>
+  </ToolLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import composerize from 'composerize';
+import decomposerize from 'decomposerize';
+import ToolLayout from '../../components/ToolLayout.vue';
+
+const dockerRun = ref('');
+const dockerCompose = ref('');
+const error = ref('');
+
+const convertToCompose = () => {
+  if (!dockerRun.value) return;
+  try {
+    dockerCompose.value = composerize(dockerRun.value);
+    error.value = '';
+  } catch (e: any) {
+    error.value = 'Error converting to Compose: ' + e.message;
+  }
+};
+
+const convertToRun = () => {
+  if (!dockerCompose.value) return;
+  try {
+    // Decomposerize types might be missing or different
+    const result = decomposerize(dockerCompose.value);
+    dockerRun.value = result;
+    error.value = '';
+  } catch (e: any) {
+    error.value = 'Error converting to Run: ' + e.message;
+  }
+};
+</script>