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