phcd/src/client/NewDeployForm.jsx

import { useState } from 'preact/hooks'

export const NewDeployForm = () => {
    const [deployType, setDeployType] = useState('initial')

    return (
        <form action="/deploys/new" method="post">
            <label for="deploy-name">Name</label>
            <input id="deploy-name" name="deploy-name" type="text" placeholder="Project name..." />

            <label for="deploy-type">Type</label>
            <select
                id="deploy-type"
                name="deploy-type"
                value={deployType}
                onChange={e => setDeployType(e.target.value)}
            >
                <option value="initial" disabled>
                    Select a deploy type...
                </option>
                <option value="docker-image">Docker</option>
                <option value="dockerfile">Dockerfile</option>
                <option value="docker-compose">Docker Compose</option>
                <option value="shell">Shell</option>
            </select>

            <DeployOptions type={deployType} />

            <div class="row right">
                <button type="submit">Create</button>
            </div>
        </form>
    )
}

const DeployRefOptions = ({}) => {
    const [refType, setRefType] = useState('default')

    return (
        <>
            <label for="deploy-url">Url</label>
            <input
                id="deploy-url"
                name="deploy-url"
                type="text"
                placeholder="Valid git clone url..."
            />

            <label for="deploy-ref-type">Ref</label>
            <div class="compound">
                <select
                    id="deploy-ref-type"
                    name="deploy-ref-type"
                    value={refType}
                    onChange={e => setRefType(e.target.value)}
                >
                    <option value="default">Default</option>
                    <option value="branch">Branch</option>
                    <option value="tag">Tag</option>
                    <option value="commit">Commit</option>
                </select>
                <input
                    class="fill"
                    id="deploy-ref-value"
                    name="deploy-ref-value"
                    disabled={refType === 'default'}
                    type="text"
                    placeholder="Ref value..."
                />
            </div>
        </>
    )
}

const DeployOptions = ({ type }) => {
    switch (type) {
        case 'docker-image':
            return <DockerDeploy />
        case 'dockerfile':
            return <DockerfileDeploy />
        case 'docker-compose':
            return <DockerComposeDeploy />
        case 'shell':
            return <ShellDeploy />
        default:
            return null
    }
}

const DockerDeploy = () => {
    return (
        <>
            <label for="deploy-options-image">Container Name</label>
            <input
                id="deploy-options-name"
                name="deploy-options-name"
                type="text"
                placeholder="Custom container name..."
            />

            <label for="deploy-options-image">Image</label>
            <input
                id="deploy-options-image"
                name="deploy-options-image"
                type="text"
                placeholder="organization/image:latest"
            />

            <label for="deploy-options-ports">Ports</label>
            <textarea
                id="deploy-options-ports"
                name="deploy-options-ports"
                rows={2}
                placeholder="80:8080"
            />

            <label for="deploy-options-env">Environment</label>
            <textarea
                id="deploy-options-env"
                name="deploy-options-env"
                rows={2}
                placeholder="FOO=bar"
            />

            <label for="deploy-options-volumes">Volumes</label>
            <textarea
                id="deploy-options-volumes"
                name="deploy-options-volumes"
                rows={2}
                placeholder="/var/www/example:/data"
            />
        </>
    )
}

const DockerfileDeploy = () => {
    return (
        <>
            <DeployRefOptions />

            <label for="deploy-options-path">Path</label>
            <input
                id="deploy-options-path"
                name="deploy-options-path"
                type="text"
                placeholder="./Dockerfile"
            />

            <label for="deploy-options-ports">Ports</label>
            <textarea
                id="deploy-options-ports"
                name="deploy-options-ports"
                rows={2}
                placeholder="80:8080..."
            />

            <label for="deploy-options-env">Environment</label>
            <textarea
                id="deploy-options-env"
                name="deploy-options-env"
                rows={2}
                placeholder="FOO=bar"
            />

            <label for="deploy-options-volumes">Volumes</label>
            <textarea
                id="deploy-options-volumes"
                name="deploy-options-volumes"
                rows={2}
                placeholder="/var/www/example:/data"
            />
        </>
    )
}

const ShellDeploy = () => {
    return (
        <>
            <DeployRefOptions />

            <label for="deploy-options-path">Path</label>
            <input
                id="deploy-options-path"
                name="deploy-options-path"
                type="text"
                placeholder="./deploy.sh"
            />

            <label for="deploy-options-env">Environment</label>
            <textarea
                id="deploy-options-env"
                name="deploy-options-env"
                rows={2}
                placeholder="FOO=bar"
            />
        </>
    )
}

const DockerComposeDeploy = () => {
    return (
        <>
            <DeployRefOptions />

            <label for="deploy-options-path">Path</label>
            <input
                id="deploy-options-path"
                name="deploy-options-path"
                type="text"
                placeholder="./docker-compose.yml"
            />
        </>
    )
}