src/templates/dashboard/genericselect.html

   1 {% extends "workflow/viewport-element.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block content %}
   7
   8 <style>
   9     #page-wrapper {
  10         display: flex;
  11         flex-direction: column;
  12     }
  13
  14     #{{select_type}}_form_div div {
  15     }
  16
  17     #{{select_type}}_form_div > *:not(.divider) {
  18         margin-left: 10px;
  19         margin-right: 10px;
  20     }
  21
  22     #{{select_type}}_form_div div * {
  23     }
  24
  25     #{{select_type}}_form_div {
  26         flex: 1;
  27         margin: 30px;
  28         display: grid;
  29         grid-template-rows: auto 1px auto 1fr;
  30         grid-template-columns: repeat(24, 1fr);
  31         grid-row-gap: 15px;
  32     }
  33
  34     #select_section {
  35         display: flex;
  36         flex-direction: column;
  37         grid-column-start: 3;
  38         grid-column-end: 21;
  39     }
  40
  41     #{{select_type}}_select_form {
  42         flex: 1;
  43         display: flex;
  44         flex-direction: column;
  45     }
  46
  47     .autocomplete {
  48         flex: 1;
  49     }
  50
  51     #create_section {
  52         grid-column-start: 1;
  53         grid-column-end: 24;
  54     }
  55
  56     #select_header_section {
  57         grid-column: 1 / 24;
  58     }
  59
  60     h3 {
  61         margin-top: 0;
  62         margin-bottom: 0;
  63         vertical-align: middle;
  64     }
  65
  66     .divider {
  67         border-top: 1px solid #ccc;
  68         grid-column-start: 1;
  69         grid-column-end: 24;
  70     }
  71
  72
  73 </style>
  74
  75 <div id="{{select_type}}_form_div">
  76     <h3 id="create_section">Create a Resource
  77         <button class="btn btn-primary {% if disabled %} disabled {% endif %}"
  78             {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
  79             {% endif %}>Here
  80         </button>
  81     </h3>
  82     <div class="divider"></div>
  83     <h3 id="select_header_section">Or select from the list below:</h3>
  84     <div id="select_section">
  85         <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
  86         {% csrf_token %}
  87         {{ form|default:"<p>no form loaded</p>" }}
  88         {% buttons %}
  89
  90         {% endbuttons %}
  91         </form>
  92     </div>
  93 </div>
  94
  95 <script>
  96     {% if disabled %}
  97     disable();
  98     {% endif %}
  99 </script>
 100
 101 {% endblock content %}
 102 {% block onleave %}
 103 var form = $("#{{select_type}}_select_form");
 104 var formData = form.serialize();
 105 var req = new XMLHttpRequest();
 106 req.open("POST", "/wf/workflow/", false);
 107 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 108 req.onerror = function() { alert("problem with form submission"); }
 109 req.send(formData);
 110 {% endblock %}
 111