phc/phcd
6
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

feat: deploy form

Browse Source
This commit is contained in:
aziis98
2024-03-05 18:55:38 +01:00
parent 6ffa9ca777
commit 28b16aee7a
14 changed files with 304 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/NewDeployForm.jsx
+46 -25
View File
@@ -1,7 +1,6 @@
import { useState } from 'preact/hooks'
export const NewDeployForm = () => {
const [refType, setRefType] = useState('default')
const [deployType, setDeployType] = useState('initial')
return (
@@ -9,6 +8,36 @@ export const NewDeployForm = () => {
<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">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"
@@ -39,33 +68,11 @@ export const NewDeployForm = () => {
placeholder="Ref value..."
/>
</div>
<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">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>
</>
)
}
export const DeployOptions = ({ type }) => {
const DeployOptions = ({ type }) => {
switch (type) {
case 'docker':
return <DockerDeploy />
@@ -83,6 +90,14 @@ export const DeployOptions = ({ type }) => {
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"
@@ -121,6 +136,8 @@ const DockerDeploy = () => {
const DockerfileDeploy = () => {
return (
<>
<DeployRefOptions />
<label for="deploy-options-path">Path</label>
<input
id="deploy-options-path"
@@ -159,6 +176,8 @@ const DockerfileDeploy = () => {
const ShellDeploy = () => {
return (
<>
<DeployRefOptions />
<label for="deploy-options-path">Path</label>
<input
id="deploy-options-path"
@@ -181,6 +200,8 @@ const ShellDeploy = () => {
const DockerComposeDeploy = () => {
return (
<>
<DeployRefOptions />
<label for="deploy-options-path">Path</label>
<input
id="deploy-options-path"