add_software.html

{% load static %} 
{% include "header.html" %}
{% include "navigation.html" %}
{% include "logo.html" %}

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      <h1>Add software container</h1> 
      <hr>

      {% if not data.added %}

          Here you can add a new software container on the platform. You can add containers from image registries
          as <a href="https://hub.docker.com/">Docker Hub </a>or by importing Git repositories, provided that they
          are compatible with <a href="https://mybinder.readthedocs.io/en/latest/introduction.html">Binder</a> specifications.          
          <br/>
          <br/>
          
          {% if data.new_container_from == 'registry' %}
          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">New container from registry</div>
          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=repository">New container from Git repository</a></div>         
          <hr style="margin-top:0;">

          <h4>Basics</h4> 
                    
          <form action="#" method="POST">
          {% csrf_token %}

          <table class="dashboard" style="width:400px; margin-bottom:25px">

           <tr>
            <td><b>Name</b></td>
            <td>
             <input type="text" name="container_name" value="" placeholder="" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Description</b></td>
            <td>
             <!-- ><input type="text" name="container_description" value="" placeholder="" size="23" required /> -->
             ​<textarea name="container_description" rows="3" cols="22"></textarea>
            </td>
           </tr>
    
           <tr>
            <td><b>Registry</b></td><td>
             <input type="text" name="container_registry" value="docker.io" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Image&nbsp;name</b></td>
            <td>
             <input type="text" name="container_image_name" value="" placeholder="" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Image tag</b></td>
            <td>
             <input type="text" name="container_image_tag" value="latest" size="23" required />
            </td>
           </tr>

           </table>



          <h4>Interface </h4> 
          <table class="dashboard" style="width:400px; margin-bottom:25px">

           <tr>
            <td><b>Interface port</b></td>
             <td><input type="text" name="container_interface_port" value="" placeholder="" size="5" /></td>
           </tr>

           <tr>
            <td><b>Interface protocol</b></td>
            <td>
             {% if request.user.profile.is_power_user %}
             <input type="text" value="http" name="container_interface_protocol" size="5" /> 
             {% else %}
             <select name="container_interface_protocol" >
             <option value="http" selected>http</option>
             <option value="https">https</option>
             </select>
             {% endif %}
            </td>
           </tr>
           </table>

           
           <a href="javascript:void(0);" id="show_button" onclick="toggle_visibility('advanced_div')">Advanced...</a>
           

           <div id="advanced_div" style="display:none; width:400px;">
           <h4>Advanced <font size=-1>| <a href="javascript:void(0);" id="hide_button" onclick="toggle_visibility('advanced_div')" style="display:none">hide</a></font></h4>
  
           <table class="dashboard" style="width:400px; margin-bottom:25px">

           <tr>
            <td><b>Image arch</b></td><td>
              <input type="text" name="container_image_arch" value="" placeholder="" size="5" />
            </td>
           </tr>

           <tr>
            <td><b>Image OS</b></td><td>
              <select name="container_image_os" >
              <option value="linux" selected>linux</option>
              </select>
            </td>
           </tr>

           <tr>
            <td><b>Image digest</b></td><td>
              <input type="text" name="container_image_digest" value="" placeholder="sha256:..." size="15" />
            </td>
           </tr>

           <tr>
            <td><b>Interface transport</b></td><td>
              <select name="container_interface_transport" >
              <option value="tcp/ip" selected>tcp/ip</option>
              </select>
            </td>
           </tr>

           <tr>
            <td colspan=2>
             <b>Supports custom interface port</b> &nbsp; 
             <input type="checkbox" name="container_supports_custom_interface_port" value="True" />
            </td>
           </tr>

           <tr>
            <td colspan=2>
             <b>Supports interface auth</b> &nbsp; 
             <input type="checkbox" name="container_supports_interface_auth" value="True" />
            </td>
           </tr>

           <tr>
            <td><b>Environment variables</b></td>
            <td>
             ​<textarea name="container_env_vars" rows="2" cols="22" placeholder='JSON format: {"VAR"="VALUE"}'></textarea>
            </td>
           </tr>

          </table>
          </div>
          
          <table style="width:400px; border:0; background:#ffffff; margin-top:20px">
          <tr><td align="center">
          <input type="submit" value="Add">
          </td></tr>
          </table>

          <input type="hidden" name="new_container_from" value="registry">
     
          </form>


          {% else %}
          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=registry">New container from registry</a></div>
          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">New container from Git repository</div>         
          <hr style="margin-top:0;">

          <h4>Basics</h4> 
                    
          <form action="#" method="POST">
          {% csrf_token %}

          <table class="dashboard" style="width:400px; margin-bottom:25px">

           <tr>
            <td><b>Name</b></td>
            <td>
             <input type="text" name="container_name" value="" placeholder="" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Description</b></td>
            <td>
             <!-- ><input type="text" name="container_description" value="" placeholder="" size="23" required /> -->
             ​<textarea name="container_description" rows="3" cols="22"></textarea>
            </td>
           </tr>
    
           <tr>
            <td><b>Repository URL</b></td><td>
             <input type="text" name="repository_url" size="23" required />
            </td>
           </tr>


           <tr>
            <td><b>Repository tag</b></td>
            <td>
             <input type="text" name="repository_tag" placeholder="Tag or hash, optional" value="" size="23" />
            </td>
           </tr>

           </table>


                    
          <table style="width:400px; border:0; background:#ffffff; margin-top:20px">
          <tr><td align="center">
          <input type="submit" value="Add">
          </td></tr>
          </table>
          
          <input type="hidden" name="new_container_from" value="repository">
                 
          </form>          
          
          
          
          {% endif %}



          <br/>          
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          
 
      {% else %}
        Ok, software container added. Go to <a href="/software">software</a>.
        

      {% endif %} 
  
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      
    </div>
  </div>
</div>

{% include "footer.html" %}

<script>
function toggle_visibility(id) {
      var x = document.getElementById(id);
      var y = document.getElementById('show_button');
      var z = document.getElementById('hide_button');
      if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none"
        z.style.display= "inline"
        
      } else {
        x.style.display = "none";
        y.style.display= "inline"
        z.style.display = "none"
      }
    }
</script>