dashboard: tag vms

circle/dashboard/static/dashboard/dashboard.css

@@ -157,3 +157,40 @@ body {
 #vm-list-rename-name {
 #vm-list-rename-name {
   max-width: 100px;
   max-width: 100px;
 }
 }
+
+.label-tag {
+  /* pass */
+}
+
+#vm-details-tags-form {
+  margin-top: 15px;
+  max-width: 250px;
+}
+
+.vm-details-remove-tag {
+  color: white;
+  padding-left: 5px;
+}
+
+.vm-details-remove-tag:hover {
+  cursor: pointer;
+  color: black;
+  text-decoration: none;
+}
+
+/* small buttons for tags, copied from Bootstraps input-sm, bnt-sm */
+.btn-tags {
+  padding: 3px 6px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.input-tags {
+  height: 22px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+/* --- */

circle/dashboard/static/dashboard/vm-details.js

@@ -51,6 +51,30 @@ $(function() {
     });
     });
     return false;
     return false;
   });
   });
+
+  /* remove tag */
+  $('.vm-details-remove-tag').click(function() {
+    var to_remove =  $.trim($(this).parent('div').text());
+    var clicked = $(this);
+    $.ajax({
+      type: 'POST',
+      url: location.href,
+      headers: {"X-CSRFToken": getCookie('csrftoken')}, 
+      data: {'to_remove': to_remove},
+      success: function(re) {
+        if(re['message'].toLowerCase() == "success") {
+          $(clicked).closest(".label").fadeOut(500, function() {
+            $(this).remove();
+          });
+        }
+      },
+      error: function() {
+        addMessage(re['message'], 'danger');
+      }
+
+    });
+    return false;
+  });
 });
 });
 
 
 function checkNewActivity() {
 function checkNewActivity() {

circle/dashboard/templates/dashboard/vm-detail-home.html

+{% load i18n %}
 <div class="row">
 <div class="row">
   <div class="col-md-4">
   <div class="col-md-4">
     <dl>
     <dl>
@@ -6,6 +7,34 @@
       <dt>Description:</dt>
       <dt>Description:</dt>
       <dd><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est libero, hendrerit at posuere sed, molestie congue quam. </small></dd>
       <dd><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est libero, hendrerit at posuere sed, molestie congue quam. </small></dd>
     </dl>
     </dl>
+
+    <div style="font-weight: bold;">{% trans "Tags" %}</div>
+    <div id="vm-details-tags" style="margin-bottom: 20px;">
+      <div id="vm-details-tags-list">
+        {% if instance.tags.all %}
+          {% for t in instance.tags.all %}
+            <div class="label label-primary label-tag" style="display: inline-block">
+              {{ t }}
+              <a href="#" class="vm-details-remove-tag"><i class="icon-remove"></i></a>
+            </div>
+          {% endfor %}
+        {% else %}
+          <small>No tag added!</small>
+        {% endif %}
+      </div>
+      <form action="" method="POST">
+        {% csrf_token %}
+        <div class="input-group" id="vm-details-tags-form">
+          <input type="text" class="form-control input-sm input-tags" name="new_tag" id="vm-details-tags-input"/>
+          <!--<div class="input-group-addon">
+            <i class="icon-question"></i>
+          </div>-->
+          <div class="input-group-btn">
+            <input type="submit" class="btn btn-default btn-sm input-tags" value="{% trans "Add tag" %}"/>
+          </div>
+        </div>
+      </form>
+    </div><!-- id:vm-details-tags -->
   </div>
   </div>
   <div class="col-md-8">
   <div class="col-md-8">
 <img src="/static/grafikon.png" style="width:45%"/>
 <img src="/static/grafikon.png" style="width:45%"/>

circle/dashboard/views.py

@@ -107,6 +107,12 @@ class VmDetailView(CheckedDetailView):
         if request.POST.get('new_name'):
         if request.POST.get('new_name'):
             return self.__set_name(request)
             return self.__set_name(request)
 
 
+        if request.POST.get('new_tag') is not None:
+            return self.__add_tag(request)
+
+        if request.POST.get("to_remove") is not None:
+            return self.__remove_tag(request)
+
     def __set_resources(self, request):
     def __set_resources(self, request):
         self.object = self.get_object()
         self.object = self.get_object()
         if not self.object.has_level(request.user, 'owner'):
         if not self.object.has_level(request.user, 'owner'):
@@ -153,6 +159,41 @@ class VmDetailView(CheckedDetailView):
             return redirect(reverse_lazy("dashboard.views.detail",
             return redirect(reverse_lazy("dashboard.views.detail",
                                          kwargs={'pk': self.object.pk}))
                                          kwargs={'pk': self.object.pk}))
 
 
+    def __add_tag(self, request):
+        new_tag = request.POST.get('new_tag')
+        self.object = self.get_object()
+
+        if len(new_tag) < 1:
+            message = u"Please input something!"
+        elif len(new_tag) > 20:
+            message = u"Tag name is too long!"
+        else:
+            self.object.tags.add(new_tag)
+
+        try:
+            messages.error(request, message)
+        except:
+            pass
+
+        return redirect(reverse_lazy("dashboard.views.detail",
+                                     kwargs={'pk': self.object.pk}))
+
+    def __remove_tag(self, request):
+        try:
+            to_remove = request.POST.get('to_remove')
+            self.object = self.get_object()
+
+            self.object.tags.remove(to_remove)
+            message = u"Success"
+        except:  # note this won't really happen
+            message = u"Not success"
+
+        if request.is_ajax():
+            return HttpResponse(
+                json.dumps({'message': message}),
+                content_type="application=json"
+            )
+
 
 
 class AclUpdateView(View, SingleObjectMixin):
 class AclUpdateView(View, SingleObjectMixin):