From fc138fb910d351923520313fd833351dd38bb6fb Mon Sep 17 00:00:00 2001 From: Tim Schumacher Date: Sat, 11 Jun 2016 15:18:11 +0200 Subject: [PATCH] First draft of the semantic ui selector Ticket #55,#56 --- .../Controller/LocationController.php | 7 +- .../Controller/TagController.php | 7 +- .../Bundle/CalciferBundle/Entity/TagTrait.php | 2 +- .../Resources/assets/css/events.scss | 28 ++++ .../Resources/assets/js/events.js | 132 ++++++++---------- .../Resources/views/Event/edit.html.twig | 2 - .../views/Event/event_form.html.twig | 53 +++++-- .../Resources/views/layout.html.twig | 1 - 8 files changed, 140 insertions(+), 92 deletions(-) diff --git a/src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php b/src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php index 00d096e..65da169 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php +++ b/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; diff --git a/src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php b/src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php index 09b76f3..ee41a83 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php +++ b/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; diff --git a/src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php b/src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php index 952d990..d133f9e 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php +++ b/src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php @@ -55,7 +55,7 @@ trait TagTrait } return implode(',', $tags); } else { - return ''; + return null; } } } \ No newline at end of file diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss index 2abe00a..20629b7 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss +++ b/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 { diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js index 3e041be..1f951d5 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js +++ b/src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js @@ -115,85 +115,71 @@ $(document).ready(function() { if (card_selector.length > 0) { calcBoxSize(4); } + + $location = $('#event_location'); - $('#event_tags').selectize({ - create: true, - diacritics: true, - valueField: 'name', - labelField: 'name', - searchField: 'name', - render: { - item: function(data,escape){ - console.log([data,escape]); - return '
' + escape(data.name) + '
'; - } - }, - load: function(query, callback) { - if (!query.length) return callback(); - $.ajax({ - url: "/tags/", - type: "GET", - dataType: 'json', - data: { - q: query + if ($location.length == 1) { + $('#event_location') + .dropdown({ + minCharacters: 4, + allowAdditions: true, + apiSettings: { + url: '/orte/?q={query}' }, - error: function() { - callback(); + fields: { + 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) { - console.log(res); - callback(res); + templates: { + menu: function(response, fields) { + var + values = response[fields.values] || {}, + html = '' + ; + $.each(values, function(index, option) { + var item = option; + html += '
' + + '
'+ + '
' + + '' + item.name + + '
' + + '
'+ + (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+ + (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+ + '
'+ + (item.description ? '
' + item.description + '
' : '') + + '
'+ + '
'; + }); + return html; + } } - }); - } - }); + }) + ; + } - $('#event_location').selectize({ - create: true, - diacritics: true, - valueField: 'name', - labelField: 'name', - searchField: 'name', - maxItems: 1, - render: { - item: function(data,escape){ - console.log([data,escape]); - return '
' + escape(data.name) + '
'; - }, - option: function(item, escape) { - return '
' + - '
'+ - '
' + - '' + escape(item.name) + - '
' + - '
'+ - (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+ - (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+ - '
'+ - (item.description ? '
' + item.description + '
' : '') + - '
'+ - '
'; + $('#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 '' + text + ''; + } + }*/ } - }, - load: function(query, callback) { - if (!query.length) return callback(); - $.ajax({ - url: "/orte/", - type: "GET", - dataType: 'json', - data: { - q: query - }, - error: function() { - callback(); - }, - success: function(res) { - console.log(res); - callback(res); - } - }); - } - }); + ); if (view_map_selector.length == 1) { jQuery('.show_map').click(addGeoCoordinates); diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig b/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig index e21f44a..972aa73 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig +++ b/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig @@ -8,7 +8,6 @@ %} {% endstylesheets %} - {% endblock %} {% block javascripts %} @@ -19,7 +18,6 @@ %} {% endjavascripts %} - {% endblock %} {% block body -%} diff --git a/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig b/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig index e584fe3..0644c73 100755 --- a/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig +++ b/src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig @@ -80,16 +80,37 @@ -
+
- + @@ -123,11 +144,17 @@
- +