76 lines
2.8 KiB
Vue
76 lines
2.8 KiB
Vue
<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' 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>
|