new_machine_template.html.ep

<div class="tab-pane fade show active" id="fromtemplate" role="tabpanel">
    <div class="card-body">
        <div ng-show="!images">Loading... <i class="fas fa-sync-alt fa-spin"></i></div>
        <form name="new_machineForm" role="form" method="post" action="/new_machine.html" novalidate ng-show="images">
            <div class="form-group row">
                <label for="backend" class="col-xl-3 col-form-label"><%=l 'Backend' %> <a
                  title="Choose the virtualization type of the Virtual Machine." ng-show="backends.length > 1"><i class="fa fa-info-circle"></i></a></label>
                <div class="col-lg-9">
                    <label for="backend" class="col-xl-3 col-form-label" ng-show="backends.length === 1">{{backends[0]}}</label>
                    <select class= "form-control" ng-show="backends.length > 1"
                        ng-change="loadTemplate()"
                        name="backend"
                        ng-model="backend"
                        ng-options="item for item in backends track by item "
                        required=""
                    ></select>
                </div>
            </div>

            <div ng-if="backend == 'KVM' || backend == 'Void'" class="form-group">
                <div class="from-group row">
                    <label for="id_iso" class="col-xl-3 col-form-label"><%=l 'Select Template' %> <a
                      title="Choose the OS you want to install."><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-lg-9">
                        <input type="hidden" name="id_iso_id" ng-value="id_iso_id">
                        <input type="text" class="form-control" placeholder="<%=l 'Type the template name' %>"
                                   name="id_iso"
                                   ng-model="id_iso" 
                                   required=""
                                   uib-typeahead="item as item.name for item in getVisualizableObjects($viewValue, images, 'name')"
                                   typeahead-min-length="0"
                                   typeahead-on-select="onIdIsoSelected()">
                        <div class="mb-2" ng-show="id_iso.description" >
                            <small ng-bind-html="id_iso.description">{{id_iso.description}}</small>
                        </div>
                        <div ng-show="id_iso.name && ( !id_iso.device && id_iso.url )
                                && (iso_file == '<NONE>' || !iso_file) ">
                            <font color="#500000"><%=l 'This ISO image has not been already downloaded. This may take many minutes, even hours until the file is fetched from Internet.' %></font>
                            <a type="button" class="btn btn-warning"
                                ng-click="iso_download(id_iso.id)"
                            > <%=l "Download now" %></a>
                        </div>
                    </div>
                </div>
                <div class="from-group row" ng-show="id_iso.name">
                        <br/>
                        <label for="iso_file" class="col-xl-3 col-form-label"><%=l 'Select ISO' %> <a
                          title="Select the .iso file the machine will utilize when installing the OS." href="http://ravada.readthedocs.io/en/latest/docs/new_iso_image.html"><i class="fa fa-info-circle"></i></a>
                            <i class="badge badge-warning" ng-click="refresh_storage()"><i class="fa fa-sync-alt" aria-hidden="true"></i></i>
                            </label>
                        <div class="col-lg-9"  ng-init="iso_file = '<NONE>'" >
                            <input type="text" class="form-control" placeholder="<%=l 'Type the ISO pathname' %>"
                                   name="id_file"
                                   ng-model="id_file" 
                                   ng-hide="refresh_working || !isos"
                                   required=""
                                   uib-typeahead="item for item in getVisualizableObjects($viewValue, isos)"
                                   typeahead-min-length="0"/>
                        </div>
                </div>
            </div>

            <div class="form-group row">
                <label for="name" class="col-xl-3 col-form-label"><%=l 'Name' %></label>
                <div class="col-lg-9">
                    <input class="form-control" ng-model="name" type="text"
                        name="name" required=""
                        ng-pattern ="/^[a-zA-Z0-9_-]+$/"
                        ng-change="validate_new_name()"
                    >
                </div>
            </div>

            <div ng-if="backend == 'LXC'" class="from-group row">
                <label for="id_template" class="col-xl-3 col-form-label"><%=l 'Template' %></label>
                <div class="col-lg-9">
                    <select name ="id_template"
                        ng-model="id_template"
                        ng-options="item.name for item in templates_lxc track by item.id"
                        required="">
                    </select>
                </div>
            </div>

            <div class="form-group row" ng-show="backend == 'KVM' || backend == 'LXC'">
                    <label for="memory" class="col-xl-3 col-form-label"><%=l 'Ram: (GB)' %></label>
                    <div class="col-lg-2">
                            <input class="form-control" ng-model="ramSize" type="number" min ="0.1" name="memory">
                    </div>
            </div>

            <div class="form-group row" ng-if="backend == 'KVM' || backend =='Void'">
                <label for="disk" class="col-xl-3 col-form-label"><%=l 'System Disk: (GB)' %></label>
                <div class="col-lg-2">
                    <input class="form-control" ng-model="ddsize" type="number" min ="{{min_size}}" name="disk" required="">
                </div>
                  <div ng-show="showMinSize">
                    <font color="orange"><%=l 'The Minimum Disk Size needed for this ISO is' %> {{min_size}}GB.</font>
                </div>
            </div>
            <div class="form-group row" ng-if="backend == 'KVM' || backend=='Void'">
                <label for="swap" class="col-xl-3 col-form-label">
                    <span ng-model="swap.label"
                        ng-class='{"text-muted": !swap.enabled}'><%=l 'Swap' %>
                        <span ng-show="!swap.enabled">( <%=l 'disabled' %> )</span>
                    </span>
                </label>
                <div class="col-lg-2">
                    <input class="form-control" ng-model="swap.value" type="number" min ="0.1"name="swap"  id="swap" ng-disabled="!swap.enabled">
                </div>
                <div class="col-lg-1">
                   <a ng-show="!swap.enabled"
                      ng-click="swap.enabled=true"
                      align="right"><span class="badge badge-primary ml-2">Enable</span></a>
                  <a ng-show="swap.enabled"
                      ng-click="swap.enabled=false"
                      align="right"><span class="badge badge-primary ml-2">Disable</span></a>
               </div>
               <div>
                    <span>Content will be cleaned on restore and shutdown</span>
               </div>
            </div>
            <div class="form-group row" ng-if="backend == 'KVM' || backend=='Void'">
                <label for="swap" class="col-xl-3 col-form-label">
                    <span ng-model="data.label"
                        ng-class='{"text-muted": !data.enabled}'><%=l 'Data' %>
                        <span ng-show="!data.enabled">( <%=l 'disabled' %> )</span>
                    </span>
                </label>
                <div class="col-lg-2">
                    <input class="form-control" ng-model="data.value" type="number" min ="0.1"name="data"  id="data" ng-disabled="!data.enabled">
                </div>
                <div class="col-lg-1">
                   <a ng-show="!data.enabled"
                      ng-click="data.enabled=true"
                      align="right"><span class="badge badge-primary ml-2">Enable</span></a>
                  <a ng-show="data.enabled"
                      ng-click="data.enabled=false"
                      align="right"><span class="badge badge-primary ml-2">Disable</span></a>
               </div>
               <div>
                    <span>Content will be kept on restore</span>
               </div>
            </div>
            <div class="form-group row">
                <div ng-show="new_machineForm.$submitted || new_machineForm.name.$touched">
                    <div ng-show="new_machineForm.name.$error.required" class="alert alert-warning" role="alert">
                        <strong><%=l "Error" %></strong> <%=l 'Machine name is required.' %>
                    </div>
                    <div ng-show="new_machineForm.name.$error.maxlength" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l "Machine name can\'t exceed 20 characters." %>
                    </div>
                </div>
                <div ng-show="new_machineForm.$submitted || new_machineForm.backend.$touched">
                    <div ng-show="new_machineForm.backend.$error.required" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l 'Backend selection is required.' %>
                    </div>
                </div>

                <div ng-show="new_machineForm.$submitted || new_machineForm.id_iso.$touched">
                    <div ng-show="new_machineForm.id_iso.$error.required" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l 'ISO image selection is required.' %>
                    </div>
                </div>

                <div ng-show="new_machineForm.$submitted || new_machineForm.id_template.$touched">
                    <div ng-show="new_machineForm.id_template.$error.required" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l 'Template selection is required' %>
                    </div>
                </div>
                <div ng-show="name_duplicated" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l 'A machine with that name already exists.' %>
                </div>
                <div ng-show="new_machineForm.name.$error.pattern" class="alert alert-warning" role="alert">
                        <strong><%=l 'Error' %></strong> <%=l 'The machine name must contain only alphabetic, numbers, undercores and dashes.' %>
                </div>
            </div>

            <div class="form-group row">
                <button type="reset" class="btn btn-outline-secondary mr-2" onclick = "location='/admin/machines'"><%=l 'Cancel' %></button>
                <input type="submit" class="btn btn-primary" name="submit" value="<%=l 'Create' %>"
                     ng-disabled="new_machineForm.$invalid || name_duplicated">
            </div>
        </form>
    </div>
</div>