Krautspace/calcifer
Archived
2
0
Fork 0
Code Issues 11 Pull requests 2 Activity

First draft of the semantic ui selector

Browse source 
Ticket #55,#56
This commit is contained in:
Tim Schumacher 2016-06-11 15:18:11 +02:00
parent 77beeaec73
commit fc138fb910
8 changed files with 140 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php
View file

@ -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;

7
src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php
View file

@ -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;

2
src/Hackspace/Bundle/CalciferBundle/Entity/TagTrait.php
View file

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

28
src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss
View file

@ -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 {

132
src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js
View file

@ -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 '<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
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 += '<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_location').selectize({
create: true,
diacritics: true,
valueField: 'name',
labelField: 'name',
searchField: 'name',
maxItems: 1,
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>';
$('#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>';
}
}*/
}
},
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);

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

@ -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 -%}

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

@ -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"
id="event_location"
name="location"
maxlength="255"
value="{{ entity.location.name|default('') }}"
class="form-control">
<div id="event_location" class="ui fluid search selection dropdown">
<input type="hidden" name="location">
<div class="default text">
{% if entity.location is null %}
Wähle einen Ort…
{% 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"
id="event_tags"
name="tags"
value="{{ entity.getTagsAsText() }}"
class="form-control">
<div class="ui fluid search multiple selection dropdown" id="event_tags">
<input name="tags" type="hidden" value="{{ entity.getTagsAsText()|default('') }}">
<div class="default text">Du kannst hier kommasepariert Tags angeben…</div>
<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
@ -150,4 +177,4 @@
</div>
<input type="submit" class="ui button green" value="Speichern"/>
</form>
</form>

1
src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig
View file

@ -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 %}