CyberPanel/dockerManager/templates/dockerManager/runContainer.html

{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Run new container - CyberPanel" %}{% endblock %}
{% block content %}

{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->

<div class="container">
<div id="page-title">
   <h2>{% trans "Run Container" %}</h2>
   <p>{% trans "Modify parameters for your new container" %}</p>
</div>


<div ng-controller="runContainer" class="panel">
    <div class="panel-body">
        <h3 class="title-hero">
            {% trans "Container Details" %} <img ng-hide="containerCreationLoading" src="{% static 'images/loading.gif' %}">
        </h3>
        <div class="example-box-wrapper">


        <form name="dockerInstallForm"  action="/" class="form-horizontal bordered-row">
            
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Name" %}</label>
                    <div class="col-sm-6" ng-init="name='{{name}}' ">
                        <input name="name"  type="text" class="form-control" ng-model="name" required>
                    </div>
                </div>
            
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Image" %}</label>
                    <div class="col-sm-6" ng-init="image='{{image}}' ">
                        <input name="image"  type="text" class="form-control" ng-model="image" required disabled="disabled">
                    </div>
                </div>
          
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Tag" %}</label>
                    <div class="col-sm-6" ng-init="tag='{{tag}}' ">
                        <input name="tag"  type="text" class="form-control" ng-model="tag" required disabled="disabled">
                    </div>
                </div>
            
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Select Owner" %}</label>
                    <div class="col-sm-6">
                        <select ng-model="dockerOwner" class="form-control">
                            {% for items in ownerList %}
                                <option>{{ items }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

          
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Memory limit" %}</label>
                    <div class="col-sm-6">
                        <input name="memory"  type="number" class="form-control" ng-model="memory" required>
                    </div>
                    <div class="current-pack ng-binding">MB</div>
                </div>
            
            {% for port, protocol in portConfig.items %}
            
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Port" %}</label>
                    <div class="col-sm-2" ng-init="iport[{{port}}]={{ port }} ">
                        <input name="iport[{{port}}]" type="text" class="form-control" ng-model="iport[{{port}}]" required disabled="disabled">
                    </div>
                    <div class="col-sm-1" ng-init="portType['{{port}}']='{{ protocol }}'" >
                        <input name="portType['{{port}}']" type="text" class="form-control" ng-model="portType['{{port}}']" required disabled="disabled">
                    </div>
                    <div class="col-sm-1 current-pack text-center">to</div>
                    <div class="col-sm-2">
                        <input name="eport['{{port}}']"  type="number" class="form-control" ng-model="eport['{{port}}']" required>
                    </div>
                </div>
            
            {% endfor %}
            
            <span ng-init="envList = {}"></span>
            {% for env, value in envList.items %}
            
                <span ng-init="envList[{{ forloop.counter0 }}] =  {'name':'{{env}}' , 'value':'{{value}}'} "></span>
            
            {% endfor %}
            <hr>
            <div ng-repeat="env in envList track by $index">
                
              <div ng-hide="installationDetailsForm"  class="form-group">
                    <label class="col-sm-3 control-label">
                        <div ng-show="$first">
                        {% trans "ENV" %}
                        </div>
                    </label>
                    <div class="col-sm-2">
                        <input name="$index" type="text" class="form-control" ng-model="envList[$index].name" required>
                    </div>
                    <div class="col-sm-4">
                        <input name="$index"  type="text" class="form-control" ng-model="envList[$index].value" required>
                    </div>
                </div>
                
            </div>

            
            <div ng-hide="installationDetailsForm" class="col-md-offset-3">
                <button type="button" class="btn btn-info" ng-click="addEnvField()">Add more</button>
            </div><br>
                <div ng-hide="installationDetailsForm" class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-4">
                         <button type="button" ng-click="createContainer()" class="btn btn-primary btn-lg btn-block">{% trans "Create Container" %}</button>

                    </div>
                </div>



                <div ng-hide="installationProgress" class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-7">

                            <div class="alert alert-success text-center">
                                        <h2>{$ currentStatus $}</h2>
                            </div>

                            <div ng-hide="errorMessageBox" class="alert alert-danger">
                                <p>{% trans "Error message:" %} {$ errorMessage $}</p>
                            </div>

                            <div ng-hide="success" class="alert alert-success">
                                <p>{% trans "Container succesfully created." %}</p>
                            </div>



                            <div ng-hide="couldNotConnect" class="alert alert-danger">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>


                    </div>
                </div>

                <div ng-hide="installationProgress" class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-4">
                        <button type="button" ng-disabled="goBackDisable"  ng-click="goBack()" class="btn btn-primary btn-lg btn-block">{% trans "Go Back" %}</button>
                    </div>
                </div>


            </form>

        </div>
    </div>
</div>



</div>


{% endblock %}