DweebUI/views/modals/json.html

729 lines
35 KiB
HTML

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Install AppName</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<pre class="text-secondary">AppNote</pre>
<form action="/install" name="FormId_install" id="FormId_install" method="POST">
<div class="row mb-3 align-items-end">
<div class="col-lg-6">
<label class="form-label">Container Name: </label>
<input type="text" class="form-control" name="service_name" value="AppName" hidden/>
<input type="text" class="form-control" name="name" value="AppName"/>
</div>
<div class="col-lg-3">
<label class="form-label">Image: </label>
<input type="text" class="form-control" name="image" value="AppImage"/>
</div>
<div class="col-lg-3">
<label class="form-label">Restart Policy: </label>
<select class="form-select" name="restart_policy">
<option value="RestartPolicy" selected hidden>RestartPolicy</option>
<option value="unless-stopped">unless-stopped</option>
<option value="on-failure">on-failure</option>
<option value="no">never</option>
<option value="always">always</option>
</select>
</div>
</div>
<label class="form-label">Network Mode</label>
<div class="form-selectgroup-boxes row mb-3">
<div class="col">
<label class="form-selectgroup-item">
<input type="radio" name="net_mode" value="host" class="form-selectgroup-input" NetHost>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">Host Network</span>
<span class="d-block text-secondary">Same as host. No isolation. ex.127.0.0.1</span>
</span>
</span>
</label>
</div>
<div class="col">
<label class="form-selectgroup-item">
<input type="radio" name="net_mode" value="NetName" class="form-selectgroup-input" NetBridge>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">Bridge Network</span>
<span class="d-block text-secondary">Containers can communicate using names.</span>
</span>
</span>
</label>
</div>
<div class="col">
<label class="form-selectgroup-item">
<input type="radio" name="net_mode" value="docker" class="form-selectgroup-input" NetDocker>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">Docker Network</span>
<span class="d-block text-secondary">Isolated on the docker network. ex.172.0.34.2</span>
</span>
</span>
</label>
</div>
</div>
<div class="accordion" id="ModalName-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
Ports
</button>
</h2>
<div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
<div class="accordion-body pt-0">
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port0" type="checkbox" Port0Check>
</div>
<div class="col">
<label class="form-label">External Port</label>
<input type="text" class="form-control" name="port_0_external" value="Port0External"/>
</div>
<div class="col">
<label class="form-label">Internal Port</label>
<input type="text" class="form-control" name="port_0_internal" value="Port0Internal"/>
</div>
<div class="col-lg-2">
<label class="form-label">Protocol</label>
<select class="form-select" name="port_0_protocol">
<option value="Port0Protocol" selected hidden>Port0Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port1" type="checkbox" Port1Check>
</div>
<div class="col">
<input type="text" class="form-control" name="port_1_external" value="Port1External"/>
</div>
<div class="col">
<input type="text" class="form-control" name="port_1_internal" value="Port1Internal"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="port_1_protocol">
<option value="Port1Protocol" selected hidden>Port1Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port2" type="checkbox" Port2Check>
</div>
<div class="col">
<input type="text" class="form-control" name="port_2_external" value="Port2External"/>
</div>
<div class="col">
<input type="text" class="form-control" name="port_2_internal" value="Port2Internal"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="port_2_protocol">
<option value="Port2Protocol" selected hidden>Port2Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port3" type="checkbox" Port3Check>
</div>
<div class="col">
<input type="text" class="form-control" name="port_3_external" value="Port3External"/>
</div>
<div class="col">
<input type="text" class="form-control" name="port_3_internal" value="Port3Internal"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="port_3_protocol">
<option value="Port3Protocol" selected hidden>Port3Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port4" type="checkbox" Port4Check>
</div>
<div class="col">
<input type="text" class="form-control" name="port_4_external" value="Port4External"/>
</div>
<div class="col">
<input type="text" class="form-control" name="port_4_internal" value="Port4Internal"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="port_4_protocol">
<option value="Port4Protocol" selected hidden>Port4Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="port5" type="checkbox" Port5Check>
</div>
<div class="col">
<input type="text" class="form-control" name="port_5_external" value="Port5External"/>
</div>
<div class="col">
<input type="text" class="form-control" name="port_5_internal" value="Port5Internal"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="port_5_protocol">
<option value="Port5Protocol" selected hidden>Port5Protocol</option>
<option value="tcp">tcp</option>
<option value="udp">udp</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
Volumes
</button>
</h2>
<div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
<div class="accordion-body pt-0">
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume0" type="checkbox" Volume0Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_0_bind" value="Volume0Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_0_container" value="Volume0Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_0_readwrite">
<option value="Volume0RW" selected hidden>Volume0RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume1" type="checkbox" Volume1Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_1_bind" value="Volume1Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_1_container" value="Volume1Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_1_readwrite">
<option value="Volume1RW" selected hidden>Volume1RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume2" type="checkbox" Volume2Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_2_bind" value="Volume2Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_2_container" value="Volume2Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_2_readwrite">
<option value="Volume2RW" selected hidden>Volume2RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume3" type="checkbox" Volume3Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_3_bind" value="Volume3Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_3_container" value="Volume3Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_3_readwrite">
<option value="Volume3RW" selected hidden>Volume3RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume4" type="checkbox" Volume4Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_4_bind" value="Volume4Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_4_container" value="Volume4Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_4_readwrite">
<option value="Volume4RW" selected hidden>Volume4RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="volume5" type="checkbox" Volume5Check>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_5_bind" value="Volume5Bind"/>
</div>
<div class="col">
<input type="text" class="form-control" name="volume_5_container" value="Volume5Container"/>
</div>
<div class="col-lg-2">
<select class="form-select" name="volume_5_readwrite">
<option value="Volume5RW" selected hidden>Volume5RW</option>
<option value="rw">rw</option>
<option value="ro">ro</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
Environment Variables
</button>
</h2>
<div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
<div class="accordion-body pt-0">
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env0" Env0Check>
</div>
<div class="col">
<label class="form-label">Variable</label>
<input type="text" class="form-control" name="env_0_name" value="Env0Name"/>
</div>
<div class="col">
<label class="form-label">Value</label>
<input type="text" class="form-control" name="env_0_default" value="Env0Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env1" Env1Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_1_name" value="Env1Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_1_default" value="Env1Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env2" Env2Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_2_name" value="Env2Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_2_default" value="Env2Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env3" Env3Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_3_name" value="Env3Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_3_default" value="Env3Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env4" Env4Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_4_name" value="Env4Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_4_default" value="Env4Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env5" Env5Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_5_name" value="Env5Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_5_default" value="Env5Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env6" Env6Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_6_name" value="Env6Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_6_default" value="Env6Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env7" Env7Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_7_name" value="Env7Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_7_default" value="Env7Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env8" Env8Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_8_name" value="Env8Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_8_default" value="Env8Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env9" Env9Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_9_name" value="Env9Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_9_default" value="Env9Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env10" Env10Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_10_name" value="Env10Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_10_default" value="Env10Default"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="env11" Env11Check>
</div>
<div class="col">
<input type="text" class="form-control" name="env_11_name" value="Env11Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="env_11_default" value="Env11Default"/>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
Labels
</button>
</h2>
<div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
<div class="accordion-body pt-0">
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label0" Label0Check>
</div>
<div class="col">
<label class="form-label">Variable</label>
<input type="text" class="form-control" name="label_0_name" value="Label0Name"/>
</div>
<div class="col">
<label class="form-label">Value</label>
<input type="text" class="form-control" name="label_0_value" value="Label0Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label1" Label1Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_1_name" value="Label1Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_1_value" value="Label1Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label2" Label2Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_2_name" value="Label2Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_2_value" value="Label2Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label3" Label3Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_3_name" value="Label3Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_3_value" value="Label3Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label4" Label4Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_4_name" value="Label4Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_4_value" value="Label4Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label5" Label5Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_5_name" value="Label5Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_5_value" value="Label5Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label6" Label6Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_6_name" value="Label6Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_6_value" value="Label6Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label7" Label7Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_7_name" value="Label7Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_7_value" value="Label7Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label8" Label8Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_8_name" value="Label8Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_8_value" value="Label8Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label9" Label9Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_9_name" value="Label9Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_9_value" value="Label9Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label10" Label10Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_10_name" value="Label10Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_10_value" value="Label10Value"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" type="checkbox" name="label11" Label11Check>
</div>
<div class="col">
<input type="text" class="form-control" name="label_11_name" value="Label11Name"/>
</div>
<div class="col">
<input type="text" class="form-control" name="label_11_value" value="Label11Value"/>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false">
Extras
</button>
</h2>
<div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
<div class="accordion-body pt-0">
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="command_check" type="checkbox" CommandCheck>
</div>
<div class="col">
<label class="form-label">Command</label>
<input type="text" class="form-control" name="command" value="CommandValue"/>
</div>
</div>
<div class="row mb-1 align-items-end">
<div class="col-auto">
<input class="form-check-input" name="privileged" type="checkbox" PrivilegedCheck>
</div>
<div class="col">
<label class="form-label">Privileged Mode</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<input type="submit" form="FormId_install" class="btn btn-success" value="Install"/>
</div>
</div>
</div>