Added gallery to UDS administration interface

server/src/uds/models/Image.py

@@ -54,8 +54,8 @@ class Image(UUIDModel):
     This is intended for small images (i will limit them to 128x128), so storing at db is fine
 
     '''
-    MAX_IMAGE_SIZE = (64, 64)
-    THUMBNAIL_SIZE = (24, 24)
+    MAX_IMAGE_SIZE = (128, 128)
+    THUMBNAIL_SIZE = (32, 32)
 
     name = models.CharField(max_length=128, unique=True, db_index=True)
     stamp = models.DateTimeField()  # Date creation or validation of this entry. Set at write time

server/src/uds/static/adm/js/gui-d-gallery.coffee

@@ -1,6 +1,32 @@
 gui.gallery = new GuiElement(api.gallery, "imgal")
 gui.gallery.link = ->
   "use strict"
+
+  newImage = (meth, table, refreshFnc) ->
+    api.templates.get "new_image", (tmpl) ->
+      content = api.templates.evaluate(tmpl,
+      )
+      modalId = gui.launchModal(gettext("New image"), content,
+        actionButton: "<button type=\"button\" class=\"btn btn-success button-accept\">" + gettext("Upload") + "</button>"
+      )
+      $(modalId + " .button-accept").click ->
+        $(modalId).modal "hide"
+        file = $('#id-image_for_gallery')[0].files[0]
+        reader = new FileReader()
+
+        reader.onload = (res) ->
+          img = res.target.result
+          img = img.substr img.indexOf("base64,") + 7
+          data = {
+            name: $('#id_image_name').val()
+            data: img
+          }
+          api.gallery.put data, {
+            success: refreshFnc
+          }
+
+        reader.readAsDataURL(file)
+
   api.templates.get "gallery", (tmpl) ->
     gui.clearWorkspace()
     gui.appendToWorkspace api.templates.evaluate(tmpl,
@@ -13,6 +39,7 @@ gui.gallery.link = ->
         "new"
         "delete"
       ]
+      onNew: newImage
       onDelete: gui.methods.del(gui.gallery, gettext("Delete Image"), gettext("Image deletion error"))
     return
 

server/src/uds/templates/uds/admin/index.html

@@ -23,6 +23,8 @@
         <link href="{% get_static_prefix %}adm/css/jquery.dataTables.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/TableTools.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/dataTables.bootstrap.css" rel="stylesheet" media="screen">
+        <link href="{% get_static_prefix %}adm/css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
+
         
         <link href="{% get_static_prefix %}adm/css/tables.css" rel="stylesheet" media="screen">
         <link href="{% get_static_prefix %}adm/css/buttons.css" rel="stylesheet" media="screen">
@@ -82,14 +84,17 @@
         <!-- Table tools -->
         <script src="{% get_static_prefix %}adm/js/dataTables.tableTools.min.js"></script>
         
-        <!--  for "save" from javascript -->
+        <!-- for "save" from javascript -->
         <script src="{% get_static_prefix %}adm/js/Blob.js"></script>
         <script src="{% get_static_prefix %}adm/js/FileSaver.min.js"></script>
         
         <script src="{% get_static_prefix %}adm/js/ZeroClipboard.js"></script>
         
         <script src="{% get_static_prefix %}adm/js/dataTables.bootstrap.js"></script>
-                
+
+        <!-- For Image preview on file upload -->
+        <script src="{% get_static_prefix %}adm/js/jasny-bootstrap.min.js"></script>
+
         <!-- template engine -->
         <script src="{% get_static_prefix %}adm/js/handlebars-v2.0.0.js"></script>
         
@@ -145,6 +150,8 @@
         {% js_template 'gallery' %}
         <!-- utility pages -->
         {% js_template 'request_failed' %}
+        <!-- specific pages -->
+        {% js_template 'new_image' %}
         <!-- components -->
         {% js_template 'comp/table' %}
         {% js_template 'comp/modal' %}

server/src/uds/templates/uds/admin/tmpl/new_image.html

@@ -0,0 +1,19 @@
+{% load i18n html5 %}
+{% image_size as size %}
+<div class="center-block" style="width: {{ size.0|add:40 }}px">
+    <div class="form-group">
+        <label for="id_image_name">{% trans 'Image name' %}</label>
+        <input id="id_image_name" name="image_name" type="text" class="form-control" placeholder="{% trans 'Image name' %}" autofocus required>
+    </div>
+    <div class="fileinput fileinput-new" data-provides="fileinput">
+      <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: {{ size.0 }}px; height: {{ size.1 }}px;"></div>
+      <div>
+        <span class="btn btn-default btn-file">
+        <span class="fileinput-new">{% trans 'Select image' %}</span>
+        <span class="fileinput-exists">{% trans 'Change' %}</span>
+        <input type="file" name="image_for_gallery" id="id-image_for_gallery"></span>
+        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">{% trans 'Remove' %}</a>
+      </div>
+    </div>
+</div>
+<h3 class="text-center">{% trans 'Select image to upload' %} <small>{% trans 'accepts PNG, JPEG and GIF images' %}</small></h3>

server/src/uds/templates/uds/html5/about.html

@@ -15,7 +15,6 @@
     <ul>
       <li><a href="http://www.eclipse.org" target="_blank">Eclipse</a> as IDE with <a href="http://pydev.org/" target="_blank">pyDev</a></li>
       <li><a href="https://www.djangoproject.com/" target="_blank">Django</a></li>
-      <li><a href="http://south.aeracode.org/" target="_blank">South</a></li>
       <li><a href="http://www.jcraft.com" target="_blank">Jsch</a></li>
       <li><a href="http://guac-dev.org/" target="_blank">Guacamole</a></li>
       <li><a href="https://github.com/django-compressor/django-compressor" target="_blank">Django compressor</a></li>
@@ -24,6 +23,7 @@
       <li><a href="http://www.bootstrap-switch.org/" target="_blank">Bootstrap switch</a></li>
       <li><a href="http://silviomoreto.github.io/bootstrap-select/" target="_blank">Bootstrap select</a></li>
       <li><a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">Bootstrap touchspin</a></li>
+      <li><a href="http://jasny.github.io/bootstrap/" target="_blank">Jasny Bootstrap</a></li>
       <li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a></li>
       <li><a href="http://coffeescript.org/" target="_blank">Coffescript</a></li>
       <li><a href="http://sass-lang.com/" target="_blank">Sass</a>/<a href="http://compass-style.org/" target="_blank">Compass</a></li>

server/src/uds/templatetags/html5.py

@@ -35,6 +35,7 @@ from __future__ import unicode_literals
 from django import template
 from uds.core.util import html
 from uds.core.util.Config import GlobalConfig
+from uds.models.Image import Image
 
 import logging
 
@@ -53,11 +54,13 @@ def country(lang):
 
     return lang.upper()
 
+
 # Config related
 @register.assignment_tag
 def get_theme():
     return GlobalConfig.UDS_THEME.get()
 
+
 class EnhacedVisual(template.Node):
     def __init__(self, nodelistTrue, nodelistFalse):
         self._nodelistTrue = nodelistTrue
@@ -71,6 +74,7 @@ class EnhacedVisual(template.Node):
 
         return self._nodelistFalse.render(context)
 
+
 @register.tag(name='enhaced_visual')
 def enhaced_visual(parser, token):
     states = {}
@@ -85,10 +89,17 @@ def enhaced_visual(parser, token):
 
     return EnhacedVisual(states['enhaced_visual'], states.get('else', None))
 
+
 @register.assignment_tag
 def preferences_allowed():
     return GlobalConfig.PREFERENCES_ALLOWED.getBool(True)
 
+
+@register.assignment_tag
+def image_size():
+    return Image.MAX_IMAGE_SIZE
+
+
 # Browser related
 class IfBrowser(template.Node):
     def __init__(self, nodelistTrue, nodelistFalse, browsers):