templates/admin/option_config.html

   1 {% extends "master-admin.html" %}
   2 {% block scripts %}
   3     <script>
   4         $( document ).on("click", ".add-field",
   5             function() {
   6                 var buttonRow = $(this).parents(".add-row")
   7                 var ourTable = $(this).parents(".extensible-table")
   8                 var lastRow = $(ourTable).find(".list-field:last")
   9                 var newRow = $(lastRow).clone()
  10                 lastRow.show()
  11                 var inputFields = lastRow.find("input")
  12                 for (i = 0; i < inputFields.length; i++) {
  13                     $(inputFields[i]).prop("disabled", false)
  14                 }
  15                 var lastIndex = parseInt(newRow.find("td:first").text())
  16                 newRow.find("td:first").text(lastIndex + 1)
  17                 var inputFields = newRow.find("input")
  18                 for (i = 0; i < inputFields.length; i++) {
  19                     var separator = (lastIndex-1).toString()+"-"
  20                     var nArr = $(inputFields[i]).attr("name").split(separator)
  21                     var newidx = lastIndex.toString()+"-"
  22                     if (nArr.length === 2) {
  23                         $(inputFields[i]).attr("name", nArr[0]+newidx+nArr[1])
  24                     }
  25                     $(inputFields[i]).attr("value", "")
  26                 }
  27                 $(newRow).appendTo(ourTable)
  28                 $(buttonRow).appendTo(ourTable)
  29             }
  30         );
  31         $(function() {
  32             $("#uploadFile").on("change", function()
  33             {
  34                 var files = !!this.files ? this.files : [];
  35                 if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
  36
  37                 if (/^image/.test( files[0].type)){ // only image file
  38                     var reader = new FileReader(); // instance of the FileReader
  39                     reader.readAsDataURL(files[0]); // read the local file
  40
  41                     reader.onloadend = function(){ // set image data as background of div
  42                         $("#imagePreview").css("background-image", "url("+this.result+")");
  43                     }
  44                 }
  45             });
  46         });
  47     </script>
  48 {% endblock %}
  49 {% block main %}
  50
  51     <div class = "row">
  52         <div class="col-md-3 col-sm-3 col-xs-6">
  53             <h2>{{ title }}</h2>
  54         </div>
  55         <div class="col-md-3 col-sm-3 col-xs-6" role="alert">
  56           {% if message %}
  57             <div class="alert alert-{{message_type}}">
  58                 <p>{{ message }}</p>
  59             </div>
  60           {% endif %}
  61         </div>
  62     </div>
  63
  64     <hr>
  65
  66     <div id="options">
  67         <form class="form-horizontal" role="form" id="{{ name }}" action="{{ action }}" method="post" enctype="multipart/form-data"">
  68         {% for k, v in config.iteritems() %}
  69             <div class="form-group">
  70               <label class="col-sm-2" for="{{ v.name }}">{{ v.name }}:</label>
  71               <div class="col-sm-10">
  72               {% set value = v.get_value() -%}
  73               {% if v.__class__.__name__ in ['String', 'Template'] -%}
  74                 <input type="text" class="form-control" name="{{ v.name }}"
  75                   {%- if value %}
  76                     value="{{ value }}"
  77                   {%- endif -%}
  78                   {% if v.is_readonly() -%}
  79                     disabled
  80                   {%- endif -%}
  81                 >
  82               {% elif v.__class__.__name__ == 'Image' -%}
  83                 <!-- FIXME: This is limited to a single instance of Image -->
  84                 {%- if value %}
  85                 <img src="{{ value }}"
  86                    height="100" width="200"
  87                 >
  88                 {%- endif -%}
  89                 <p></p>
  90                 <input type="file" name="{{ v.name }}"
  91                      title="{{ v.name }}"
  92                      accept=".png,.jpg"
  93                      id="uploadFile"
  94                      style="display: none;" />
  95                 <input type="button" value="Select Image..." onclick="document.getElementById('uploadFile').click();" />
  96                 <p></p>
  97                 <div id="imagePreview"></div>
  98               {% elif v.__class__.__name__ == 'List' -%}
  99                 <textarea class="form-control" name="{{ v.name }}"
 100                   {% if v.is_readonly() -%}
 101                     disabled
 102                   {%- endif -%}
 103                 >
 104                   {%- if value %}
 105                     {{- value|join('\n') -}}
 106                   {%- endif -%}
 107                 </textarea>
 108               {% elif v.__class__.__name__ == 'Choice' -%}
 109                 {% set entries = v.get_allowed() -%}
 110                 <div class="row">
 111                 {% for e in entries -%}
 112                   <div class="col-md-4">
 113                     <input type="checkbox" name="{{ v.name }}_{{ e }}"
 114                       {%- if value and e in value %}
 115                         checked="true"
 116                       {%- endif -%}
 117                       {% if v.is_readonly() -%}
 118                         disabled
 119                       {%- endif -%}
 120                     >&nbsp;{{ e }}
 121                   </div>
 122                 {% endfor %}
 123                 </div>
 124               {% elif v.__class__.__name__ == 'Pick' -%}
 125                 {% set entries = v.get_allowed() -%}
 126                 <div class="row">
 127                 {% for e in entries -%}
 128                   <div class="col-md-4">
 129                     <input type="radio" name="{{ v.name }}" value="{{ e }}"
 130                       {%- if e == value %}
 131                         checked="true"
 132                       {%- endif -%}
 133                       {% if v.is_readonly() -%}
 134                         disabled
 135                       {%- endif -%}
 136                     >&nbsp;{{ e }}
 137                   </div>
 138                 {% endfor %}
 139                 </div>
 140               {% elif v.__class__.__name__ == 'Condition' -%}
 141                 <input type="checkbox" name="{{ v.name }}"
 142                   {%- if value %}
 143                     checked="true"
 144                   {% endif -%}
 145                   {% if v.is_readonly() -%}
 146                     disabled
 147                   {%- endif -%}
 148                 >
 149               {% elif v.__class__.__name__ == 'ComplexList' -%}
 150                 <table class="table table-striped extensible-table">
 151                 <tr><th>#</th><th>Name</th><th>Delete</th></tr>
 152                 {% for line in value -%}
 153                     {%- set basename = "%s %d-"|format(v.name, loop.index0) -%}
 154                 <tr class="list-field">
 155                     <td>{{loop.index}}</td>
 156                     <td>
 157                       <input type="text" name="{{basename}}name"
 158                         {%- if line.__class__.__name__ == 'list' -%}
 159                           value="{{ line|join(' / ') }}"
 160                         {%- else -%}
 161                           value="{{ line }}"
 162                         {%- endif -%}
 163                         {% if v.is_readonly() -%}
 164                           disabled
 165                         {%- endif -%}
 166                       >
 167                     </td>
 168                     <td>
 169                       <input type="checkbox" name="{{basename}}delete">
 170                       <!-- Never checked by default -->
 171                     </td>
 172                 </tr>
 173                 {% endfor -%}
 174                 <!-- Template for new row -->
 175                 {%- set basename = "%s %d-"|format(v.name, value|length) -%}
 176                 <tr class="list-field" style="display:none">
 177                     <td>{{value|length + 1}}</td>
 178                     <td>
 179                       <input type="text" name="{{basename}}name" value=""
 180                              disabled="disabled">
 181                     </td>
 182                     <td>
 183                       <input type="checkbox" name="{{basename}}delete"
 184                              disabled="disabled">
 185                     </td>
 186                 </tr>
 187                 <!-- End of Template -->
 188                 <tr class="add-row">
 189                     <td><button class="btn add-field" type="button"> + </button></td>
 190                     <td colspan=3 />
 191                 </tr>
 192                 </table>
 193               {% elif v.__class__.__name__ == 'MappingList' -%}
 194                 <table class="table table-striped extensible-table">
 195                 <tr><th>#</th><th>From</th><th>To</th><th>Delete</th></tr>
 196                 {% for line in value -%}
 197                     {%- set basename = "%s %d-"|format(v.name, loop.index0) -%}
 198                 <tr class="list-field">
 199                     <td>{{loop.index}}</td>
 200                     <td>
 201                       <input type="text" name="{{basename}}from"
 202                         {% if line[0].__class__.__name__ == 'list' -%}
 203                           value="{{ line[0]|join(' / ') }}"
 204                         {% else -%}
 205                           value="{{ line[0] }}"
 206                         {% endif -%}
 207                       >
 208                     </td>
 209                     <td>
 210                       <input type="text" name="{{basename}}to"
 211                         {% if line[1].__class__.__name__ == 'list' -%}
 212                           value="{{ line[1]|join(' / ') }}"
 213                         {% else -%}
 214                           value="{{ line[1] }}"
 215                         {% endif -%}
 216                       >
 217                     </td>
 218                     <td>
 219                       <input type="checkbox" name="{{basename}}delete">
 220                       <!-- Never checked by default -->
 221                     </td>
 222                 </tr>
 223                 {% endfor -%}
 224                 <!-- Template for new row -->
 225                 {%- set basename = "%s %d-"|format(v.name, value|length) -%}
 226                 <tr class="list-field" style="display:none">
 227                     <td>{{value|length + 1}}</td>
 228                     <td>
 229                       <input type="text" name="{{basename}}from" value=""
 230                              disabled="disabled">
 231                     </td>
 232                     <td>
 233                       <input type="text" name="{{basename}}to"
 234                              disabled="disabled">
 235                     </td>
 236                     <td>
 237                       <input type="checkbox" name="{{basename}}delete"
 238                              disabled="disabled">
 239                       <!-- Never checked by default -->
 240                     </td>
 241                 </tr>
 242                 <!-- End of Template -->
 243                 <tr class="add-row">
 244                     <td><button class="btn add-field" type="button"> + </button></td>
 245                     <td colspan=3 />
 246                 </tr>
 247                 </table>
 248               {% else -%}
 249                 {{ v.__class__.__name__ }}
 250               {% endif -%}
 251                 <span class="help-block">{{ v.description }}</span>
 252               </div>
 253             </div>
 254             <hr>
 255         {% endfor %}
 256
 257           <p>
 258             <button id="submit" class="btn btn-primary" name="submit" type="submit" value="Submit">
 259             Save
 260             </button>
 261             <a href="{{ back }}" class="btn btn-default" title="Back">Back</a>
 262           </p>
 263         </form>
 264     </div>
 265
 266 {% endblock %}