First draft of the semantic ui selector

Ticket #55,#56

src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php

@@ -201,8 +201,13 @@ class LocationController extends Controller
                 );
             }
 
+            $retval = [
+                "success" => true,
+                "results" => $locations,
+            ];
 
-            $response = new Response(json_encode($locations));
+
+            $response = new Response(json_encode($retval));
             $response->headers->set('Content-Type', 'application/json');
 
             return $response;

src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php

@@ -186,8 +186,13 @@ EOF;
                 ];
             }
 
+            $retval = [
+                'success' => true,
+                'results' => $tags,
+            ];
 
-            $response = new Response(json_encode($tags));
+
+            $response = new Response(json_encode($retval));
             $response->headers->set('Content-Type', 'application/json');
 
             return $response;

src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php

@@ -55,7 +55,7 @@ trait TagTrait
             }
             return implode(',', $tags);
         } else {
-            return '';
+            return null;
         }
     }
 } 

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss

@@ -18,6 +18,34 @@
     height: auto;
     max-height: none;
   }
+
+  #event_location.ui.dropdown.active {
+    .text .ui.fluid.card {
+      opacity: 0.5;
+    }
+  }
+
+  #event_location.ui.dropdown {
+    input.search {
+      height: 100%;
+      line-height: 100%;
+      width: 100%;
+    }
+
+    .default.text {
+      color: black;
+    }
+
+    .text {
+      width: 100%;
+
+      .ui.fluid.card {
+        .description {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 #view-map, #map {

src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js

@@ -116,84 +116,70 @@ $(document).ready(function() {
         calcBoxSize(4);
     }
     
-    $('#event_tags').selectize({
+    $location = $('#event_location');
-	    create: true,
-        diacritics: true,
-        valueField: 'name',
-        labelField: 'name',
-        searchField: 'name',
-	    render: {
-    	    item: function(data,escape){
-        		console.log([data,escape]);
-        		return '<div class="ui green compact small label"><i class="tag icon"></i>' + escape(data.name) + '</div>';
-    	    }
-    	},
-        load: function(query, callback) {
-            if (!query.length) return callback();
-            $.ajax({
-                url: "/tags/",
-                type: "GET",
-                dataType: 'json',
-                data: {
-                    q: query
-                },
-                error: function() {
-                  callback();
-                },
-                success: function(res) {
-                    console.log(res);
-                    callback(res);
-                }
-            });
-        }
-    });
 
-    $('#event_location').selectize({
+    if ($location.length == 1) {
-        create: true,
+        $('#event_location')
-        diacritics: true,
+            .dropdown({
-        valueField: 'name',
+                minCharacters: 4,
-        labelField: 'name',
+                allowAdditions: true,
-        searchField: 'name',
+                apiSettings: {
-        maxItems: 1,
+                    url: '/orte/?q={query}'
-        render: {
-            item: function(data,escape){
-                console.log([data,escape]);
-                return '<div class="ui green compact small label"><i class="map marker icon"></i>' + escape(data.name) + '</div>';
-            },
-            option: function(item, escape) {
-                return '<div class="ui fluid green card">' +
-                    '<div class="content">'+
-                        '<div class="header">' +
-                            '<i class="ui icon map marker"></i>' + escape(item.name) +
-                        '</div>' +
-                        '<div class="meta">'+
-                        (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+
-                (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+
-                        '</div>'+
-                        (item.description ? '<div class="description">' + item.description + '</div>' : '') +
-                    '</div>'+
-                '</div>';
-            }
-        },
-        load: function(query, callback) {
-            if (!query.length) return callback();
-            $.ajax({
-                url: "/orte/",
-                type: "GET",
-                dataType: 'json',
-                data: {
-                    q: query
                 },
-                error: function() {
+                fields: {
-                    callback();
+                    remoteValues : 'results', // grouping for api results
+                    values       : 'values', // grouping for all dropdown values
+                    name         : 'name',   // displayed dropdown text
+                    value        : 'name'   // actual dropdown value
                 },
-                success: function(res) {
+                templates: {
-                    console.log(res);
+                    menu: function(response, fields) {
-                    callback(res);
+                        var
+                        values = response[fields.values] || {},
+                        html   = ''
+                        ;
+                        $.each(values, function(index, option) {
+                            var item = option;
+                            html += '<div class="item" data-value="' + option[fields.value] + '"><div class="ui fluid green card">' +
+                                                 '<div class="content">'+
+                                                     '<div class="header">' +
+                                                         '<i class="ui icon map marker"></i>' + item.name +
+                                                     '</div>' +
+                                                     '<div class="meta">'+
+                                                     (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+
+                                             (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+
+                                                     '</div>'+
+                                                     (item.description ? '<div class="description">' + item.description + '</div>' : '') +
+                                                 '</div>'+
+                                             '</div></div>';
+                        });
+                        return html;
+                    }
                 }
-            });
+            })
-        }
+        ;
-    });
+    }
+
+    $('#event_tags')
+        .dropdown({
+                minCharacters: 2,
+                allowAdditions: true,
+                apiSettings: {
+                    url: '/tags/?q={query}'
+                },
+                fields: {
+                    remoteValues: 'results', // grouping for api results
+                    values: 'values', // grouping for all dropdown values
+                    name: 'name',   // displayed dropdown text
+                    value: 'name'   // actual dropdown value
+                }/*,
+                templates: {
+                    label: function (value, text) {
+                        return '<i class="tag icon"></i>' + text + '<i class="delete icon"></i>';
+                    }
+                }*/
+            }
+        );
 
     if (view_map_selector.length == 1) {
         jQuery('.show_map').click(addGeoCoordinates);

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig

@@ -8,7 +8,6 @@
     %}
     <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
-    <link rel="stylesheet" href="/vendor/selectize.js/dist/css/selectize.css"/>
 {% endblock %}
 
 {% block javascripts %}
@@ -19,7 +18,6 @@
     %}
     <script src="{{ asset_url }}"></script>    
     {% endjavascripts %}
-    <script src="/vendor/selectize.js/dist/js/standalone/selectize.js"></script>
 {% endblock %}
 
 {% block body -%}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig

@@ -80,16 +80,37 @@
         </div>
     </div>
 
-    <div class="required field">
+    <div class="field">
         <label for="event_location">Ort</label>
 
         <div class="ui icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
-            <input type="text"
+          <div id="event_location" class="ui fluid search selection dropdown">
-                   id="event_location"
+            <input type="hidden" name="location">
-                   name="location"
+              <div class="default text">
-                   maxlength="255"
+                  {% if entity.location is null %}
-                   value="{{ entity.location.name|default('') }}"
+                      Wähle einen Ort…
-                   class="form-control">
+                  {% else %}
+                      <div class="ui fluid green card">
+                          <div class="content">
+                              <div class="header">
+                                  <i class="ui icon map marker"></i> {{ entity.location.name }}
+                                  </div>
+                              <div class="meta">
+                                  {%  if (not entity.location.lat is null) and (not entity.location.lon is null) %}
+                                      lon: {{ entity.location.lon }}, lat: {{ entity.location.lat }}
+                                  {% endif %}
+                                  {% if (not entity.location.streetaddress) %}
+                                    Anschrift: {{ entity.location.streetaddress }} {{ entity.location.streetnumber }} {{ entity.location.zipcode }} {{ entity.location.city }}
+                                  {% endif %}
+                                  </div>
+                              </div>
+                          </div>
+                  {% endif %}
+              </div>
+              <div class="menu">
+              </div>
+            </input>
+          </div>
             <input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
             <input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
             <i class="icon map marker"></i>
@@ -123,11 +144,17 @@
         <label for="event_tags">Tags</label>
 
         <div class="ui icon input">
-            <input type="text"
+            <div class="ui fluid search multiple selection dropdown" id="event_tags">
-                   id="event_tags"
+                <input name="tags" type="hidden" value="{{ entity.getTagsAsText()|default('') }}">
-                   name="tags"
+
-                   value="{{ entity.getTagsAsText() }}"
+                <div class="default text">Du kannst hier kommasepariert Tags angeben…</div>
-                   class="form-control">
+                <div class="menu">
+                    {% for tag in entity.tags %}
+                        <div class="item" data-value="{{ tag.name }}">{{ tag.name }}</div>
+                    {% endfor %}
+                </div>
+                </input>
+            </div>
             <i class="icon tag"></i>
         </div>
         <div class="ui label">Du kannst hier kommasepariert <a

src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig

@@ -8,7 +8,6 @@
     <link href="/semantic/dist/semantic.css" rel="stylesheet">
     {% stylesheets filter="compass"
     "@CalciferBundle/Resources/assets/css/main.scss"
-    "css/custom.scss"
     %}
     <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}