search.component.html 29.5 KB
Newer Older
philippelke's avatar
philippelke committed
1 2
<div
	[ngClass]="{'float-left':true, 'sidecontainerleft':true,'ausgeblendet':this.state=='hidden'}">
3
	<div class="containerSearch float-left">
Jacob's avatar
Jacob committed
4
		<!--
philippelke's avatar
philippelke committed
5
		<ngb-tabset type="pills"> <ngb-tab id="freesearchtab"
6
			title="Mache deinen Ort des Guten Lebens sichtbar">
7 8
			 <ng-template ngbTabContent>
			 -->
9
		<div class="tabContent">
philippelke's avatar
philippelke committed
10

Jacob's avatar
Jacob committed
11
			<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#fff" type="ball-spin-clockwise"></ngx-spinner>
12
			<div class="searchtitle">Mache deinen Ort des Guten Lebens
13
				sichtbar</div>
Sebastian Bruch's avatar
Sebastian Bruch committed
14
			<form [formGroup]="searchForm" class="searchForm">
Jacob's avatar
Jacob committed
15
				<!--
16 17 18 19 20 21
				<div class="form-check">
					<input type="checkbox" class="form-check-input" /> <label
						class="form-check-label"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>Alle Orte sehen</label>
				</div>-->
				<div class="list-group-item list-group-item-action">
					<i aria-hidden="true" class="fa fa-map-marker fa-lg"></i> Alle Orte
22
					sehen <label class="switch"><input type="checkbox" (change)="toggleAllPlaces($event)" checked="showAll == true"><span class="slider round"></span> </label>
23
				</div>
24
				<div class="">
25
					<!-- search field -->
philippelke's avatar
philippelke committed
26
<!-- 					  <app-autosuggest (termChanged)="termChanged(term)"></app-autosuggest> -->
27
					<!-- old search input  -->
Sebastian's avatar
Sebastian committed
28
					<!--
29
					<input type="text" formControlName="searchPattern"
30
						class="form-control searchinput" placeholder="Wie heißt dein Ort?" />
Sebastian's avatar
Sebastian committed
31
					-->
pelle's avatar
pelle committed
32
					<app-autosuggest formControlName="searchPattern" (selected)="search($term)"></app-autosuggest>
33 34 35 36 37 38 39
					<!--  old search button
					<div class="input-group-append">
						<button (click)="search()"
							class="btn btn-outline-secondary search-button" type="submit">
							<i class="fa fa-search" aria-hidden="true"></i>
						</button>
					-->
40
				</div>
Jacob's avatar
Jacob committed
41 42 43
        <div class="searchbutton float-right">
					<!--<div *ngIf="state=='visible'" class="searchbuttonPrepend">-->
          <div class="searchbuttonPrepend">
44 45 46 47
						<button (click)="search()" class="btn  search-button"
							type="submit">
							<i class="fa fa-search" aria-hidden="true"></i>
						</button>
48 49
					</div>
				</div>
Jacob's avatar
Jacob committed
50

Jacob's avatar
Jacob committed
51
				<!--
philippelke's avatar
philippelke committed
52 53
				<div class="form-check">
					<input type="checkbox" formControlName="searchInDescription"
54 55
						class="form-check-input" /> <label class="form-check-label"
						for="searchInDescription">Beschreibung einschließen</label>
philippelke's avatar
philippelke committed
56 57 58 59
				</div>
				<div class="form-check">
					<input type="checkbox" class="form-check-input" /> <label
						class="form-check-label">Themen filtern</label>
60
				</div>
61
				-->
62
			</form>
Sebastian's avatar
Sebastian committed
63

Sebastian's avatar
Sebastian committed
64
			<div *ngIf="searched" class="search-results-wrap">
65 66
				<div class="" *ngIf="searched && this.osmNodes.length == 0">
					<div class="searchbox-heading">Orte des Guten Lebens</div>
67
					<div class="searchbox-text-only">
Jacob's avatar
Jacob committed
68
						<i class="gp_warning uiicon" aria-hidden="true"></i>
pelle's avatar
pelle committed
69
						Zu deinem Suchbegriff konnten wir leider keinen Ort des Guten Lebens
70 71 72 73 74
						finden.<br>
					</div>
				</div>
				<div class="list-group search-results"
					*ngIf="this.osmNodes.length > 0">
75
					<div class="searchbox-heading">Orte des Guten Lebens</div>
76 77 78 79 80 81 82
					<div *ngIf="osmNodes.length > 0">
						<div *ngFor="let elem of osmNodes">
							<div
								[ngClass]="{'list-group-item':true,'list-group-item-action':true,'selected-item':isCurrentElement(elem) }"
								(click)="show(elem)">
								<i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
								{{elem.name}}
Jacob's avatar
Jacob committed
83
								<!--<label class="switch"><input type="checkbox"><span class="slider round"></span> </label>-->
84
							</div>
philippelke's avatar
philippelke committed
85
						</div>
Sebastian Bruch's avatar
Sebastian Bruch committed
86
					</div>
philippelke's avatar
philippelke committed
87
				</div>
philippelke's avatar
philippelke committed
88
				<div *ngIf="nominatimNodes.length > 0">
89
					<div class="searchbox-subheading">Noch nicht als Orte des
90
						Guten Lebens markiert</div>
Sebastian Bruch's avatar
Sebastian Bruch committed
91
					<div *ngFor="let elem of nominatimNodes">
philippelke's avatar
philippelke committed
92 93
						<div
							[ngClass]="{'list-group-item':true,'list-group-item-action':true,'selected-item':isCurrentElement(elem) }"
Sebastian's avatar
Sebastian committed
94
							(click)="showOsmElement(elem)">
philippelke's avatar
philippelke committed
95 96
							<i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
							{{elem.name}}
Jacob's avatar
Jacob committed
97
							<!--<label class="switch"><input type="checkbox"><span class="slider round"></span> </label>-->
Sebastian's avatar
Sebastian committed
98
							<div *ngIf="elem.knownEntity()" class="elemexists">
philippelke's avatar
philippelke committed
99 100 101 102
								<i class="fa fa-check fa-1" aria-hidden="true"></i>Im GeoPortal
								vorhanden
							</div>
						</div>
103
					</div>
104 105 106 107 108 109 110 111
					<div class="list-group"
						*ngIf="searched && this.nominatimNodes.length == 0">
						<div class="searchbox-text-only">
							Zu deinem Sucherbegriff konnten wir keinen Ort finden. Mehr
							Informationen zu unserer Quelle findest du hier:
							https://www.openstreetmap.de/.<br>
						</div>
					</div>
112 113
				</div>
				<div *ngIf="dataGroups.length > 0">
philippelke's avatar
philippelke committed
114
					<br> <label>Daten-Gruppen</label>
115 116 117
					<div class="list-group-item list-group-item-action"
						*ngFor="let group of dataGroups">{{group.name}}</div>
				</div>
118 119 120 121


				<!--
			<div class="list-group search-results" *ngIf="searched && !hasResults">
philippelke's avatar
philippelke committed
122 123 124
				<div class="searchbox-text-only">
					keine Suchergebnisse.<br>
				</div>
125
			</div>
126
			-->
philippelke's avatar
philippelke committed
127

128 129 130
				<div class="list-group"
					*ngIf="searched && this.nominatimNodes.length == 0">
					<div class="searchbox-subheading">Noch nicht als Orte des
131
						Guten Lebens markiert</div>
132
					<div class="searchbox-text-only">
Jacob's avatar
Jacob committed
133
						<i class="gp_warning uiicon" aria-hidden="true"></i>
134 135 136 137 138 139 140 141 142 143 144 145
						Zu deinem Sucherbegriff konnten wir keinen Ort finden. Mehr
						Informationen zu unserer Quelle findest du hier:
						https://www.openstreetmap.de/.<br>
					</div>
				</div>
				<div class="list-group" *ngIf="hasResults">
					<div class="searchreset">
						<button class="btn btn-outline-secondary  "
							(click)="clearResults()">Suche zurücksetzen</button>
					</div>
				</div>
			</div>
146
		</div>
147
		<!-- </ng-template> </ngb-tab>  -->
Jacob's avatar
Jacob committed
148
		<!--
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
		<ngb-tab id="topictab">
			<ng-template ngbTabTitle>Nach Themen</ng-template>
			<ng-template ngbTabContent>
				<div class="tabContent">
					<div class="row">
						<div class="col">
			       			<h4 class="searchreset">BLI-Dimensionen</h4>
			        		<app-bli [displayType]="'checkboxesArray_icons'" [dimensions]="dimensionsFilterArray" (changed)="filterChanged($event)"></app-bli>
						</div>
					</div>
						<br>
					<div class="row">
						<div class="col">
							<div class="form-group">
								<button type="submit" class="btn btn-primary" (click)="showbli()">Filter anwenden</button>
							</div>
						</div>
					</div>
						<br>
168
				</div>
169 170
			</ng-template>
		</ngb-tab>
171 172
		-->
		<!--  </ngb-tabset> -->
173 174 175
	</div>

	<div class="ToggleSearch float-right">
philippelke's avatar
philippelke committed
176 177 178 179 180 181 182 183 184 185 186 187 188 189
		<div *ngIf="state=='visible'" class="searchetogglePrepend">
			<div (click)="toggleVisibility();"
				class="form-group item-detail name">
				<label for="elementOsmid" class="col-sm-1 col-form-label"><i
					class="fa fa-angle-double-left" aria-hidden="true"></i></label>
			</div>
		</div>
		<div *ngIf="state=='hidden'" class="searchetogglePrepend">
			<div (click)="toggleVisibility();"
				class="form-group item-detail name">
				<label for="elementOsmid" class="col-sm-1 col-form-label"><i
					class="fa fa-angle-double-right" aria-hidden="true"></i></label>
			</div>
		</div>
190 191 192
	</div>
</div>

Sebastian's avatar
Sebastian committed
193
<div [ngClass]="{'float-right':true, 'sidecontainerright':true,'ausgeblendet':detailsState()=='hidden'}"
194
*ngIf="nodeService.detailView">
195
	<div class="searcheditPrepend">
Sebastian's avatar
Sebastian committed
196
		<div *ngIf="detailsState()=='visible'" class="searchedetailstogglePrepend">
197 198 199 200 201 202 203
			<div (click)="toggleVisibilityDetails();"
				class="form-group item-detail name">
				<label for="elementSearchDetails"
					class="col-sm-1 col-form-label"><i
					class="fa fa-angle-double-right" aria-hidden="true"></i></label>
			</div>
		</div>
Sebastian's avatar
Sebastian committed
204
		<div *ngIf="detailsState()=='hidden'" class="searchedetailstogglePrepend">
205 206 207 208 209 210 211
			<div (click)="toggleVisibilityDetails();"
				class="form-group item-detail name">
				<label for="elementSearchDetails"
					class="col-sm-1 col-form-label"><i
					class="fa fa-angle-double-left" aria-hidden="true"></i></label>
			</div>
		</div>
philippelke's avatar
philippelke committed
212
	</div>
213 214 215 216 217 218 219 220
	<div class="searchdetails">
	<div class="elementdetails">
				<div class="form-group row item-detail name">
					<label for="elementOsmid" class="col-sm-1 col-form-label"><i
						class="fa fa-map-marker fa-lg" aria-hidden="true"></i></label>
					<div class="col">
						<input type="text" readonly class="form-control-plaintext"
							id="elementName" value="{{nodeService.detailView.name}}">
philippelke's avatar
philippelke committed
221
					</div>
Jacob's avatar
Jacob committed
222
					<!--
223
					<div class="col">
philippelke's avatar
philippelke committed
224 225
						<span class="form-control-plaintext"
							id="elementName">{{nodeService.detailView.getDate()}}</span>
philippelke's avatar
philippelke committed
226
					</div>
philippelke's avatar
philippelke committed
227
					 -->
228 229
				</div>
			</div>
230 231
		<div class="elementwrap">
			<div class="elementinfo">
philippelke's avatar
philippelke committed
232
				<div class="form-group">
Sebastian's avatar
Sebastian committed
233
					<div (click)="infoCollapsed= !infoCollapsed"
234
						[attr.aria-expanded]="!infoCollapsed" aria-controls="collapseInfo"
philippelke's avatar
philippelke committed
235
						class="collapseInfo">
Jacob's avatar
Jacob committed
236
						<i class="_fa _fa-undo _fa-lg listicon info" aria-hidden="true">&nbsp;</i>Allgemeine
Sebastian's avatar
Sebastian committed
237
						Informationen<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!infoCollapsed,'fa-angle-right':infoCollapsed, 'fa-right':true}"
238
							aria-hidden="true">&nbsp;</i>
philippelke's avatar
philippelke committed
239
					</div>
240
				</div>
241
				<div id="collapseInfo" [ngbCollapse]="infoCollapsed">
philippelke's avatar
philippelke committed
242
					<div class="card">
Jacob's avatar
Jacob committed
243
						<div class="card-body detailbox">
philippelke's avatar
philippelke committed
244 245 246 247 248
							<div class="form-group row item-detail">
								<label for="elementOsmid" class="col-sm-4 col-form-label">
									<strong>OSM-ID</strong>
								</label>
								<div class="col">
philippelke's avatar
philippelke committed
249 250
									<span class="form-control-plaintext"
										id="elementOsmid" >{{nodeService.detailView.osmId}}</span>
philippelke's avatar
philippelke committed
251 252
								</div>
							</div>
pelle's avatar
pelle committed
253
							<!-- <div class="form-group row item-detail">
philippelke's avatar
philippelke committed
254 255 256 257
								<label for="elementTyp" class="col-sm-4 col-form-label">
									<strong>Typ</strong>
								</label>
								<div class="col">
philippelke's avatar
philippelke committed
258 259
									<span class="form-control-plaintext"
										id="elementTyp">{{nodeService.detailView.osmType}}</span>
philippelke's avatar
philippelke committed
260
								</div>
pelle's avatar
pelle committed
261
							</div> -->
Sebastian's avatar
Sebastian committed
262

263
							<!-- <div *ngFor="let tag of nodeService.detailView.osmtags"
Sebastian's avatar
Sebastian committed
264 265 266 267 268
								class="form-group row item-detail">
								<label for="elementKey" class="col-sm-4 col-form-label">
									<strong>{{translateTagKey(tag.key)}}</strong>
								</label>
								<div class="col">
pelle's avatar
pelle committed
269 270 271 272
									<span class="form-control-plaintext" id="elementKey">{{tag.value}}</span>
								</div>
								<div class="col-sm-1">
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="listicon gp_osmlink"></i></a>
Sebastian's avatar
Sebastian committed
273
								</div>
274
							</div> -->
275

pelle's avatar
pelle committed
276
							<!-- <div *ngFor="let tag of nodeService.detailView.tags"
philippelke's avatar
philippelke committed
277 278 279 280 281
								class="form-group row item-detail">
								<label for="elementKey" class="col-sm-4 col-form-label">
									<strong>{{translateTagKey(tag.key)}}</strong>
								</label>
								<div class="col">
philippelke's avatar
philippelke committed
282 283
									<span class="form-control-plaintext"
										id="elementKey">{{tag.value}}</span>
philippelke's avatar
philippelke committed
284
								</div>
pelle's avatar
pelle committed
285
							</div> -->
286

287 288 289 290 291 292 293 294
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Name</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('name')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('name')}}</span>
									</div>
295
									<div *ngIf="!nodeService.detailView.getOsmTagValue('name')">
296 297 298 299
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
300
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
301 302 303 304 305 306 307
								</div>
							</div>
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Homepage</strong>
								</label>
								<div class="col">
Sebastian's avatar
Sebastian committed
308 309
									<div *ngIf="nodeService.detailView.getOsmTagValue('website')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('website')}}</span>
310
									</div>
311
									<div *ngIf="!nodeService.detailView.getOsmTagValue('contact:websit')">
312 313 314 315
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
316
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
317 318
								</div>
							</div>
319

320 321 322 323 324 325 326 327
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Straße</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('addr:street')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('addr:street')}}</span>
									</div>
328
									<div *ngIf="!nodeService.detailView.getOsmTagValue('addr:street')">
329 330 331 332
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
333
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
334 335
								</div>
							</div>
336

337 338 339 340 341 342 343 344
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Hausnummer</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('addr:housenumber')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('addr:housenumber')}}</span>
									</div>
345
									<div *ngIf="!nodeService.detailView.getOsmTagValue('addr:housenumber')">
346 347 348 349
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
350
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
351 352
								</div>
							</div>
353

354 355 356 357 358 359 360 361
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>PLZ</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('addr:postcode')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('addr:postcode')}}</span>
									</div>
362
									<div *ngIf="!nodeService.detailView.getOsmTagValue('addr:postcode')">
363 364 365 366
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
367
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
368 369
								</div>
							</div>
370

371 372 373 374 375 376 377 378
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Stadt</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('addr:city')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('addr:city')}}</span>
									</div>
379
									<div *ngIf="!nodeService.detailView.getOsmTagValue('addr:city')">
380 381 382 383
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
384
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
385 386
								</div>
							</div>
387

388 389 390 391 392 393 394 395
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Land</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('addr:country')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('addr:country')}}</span>
									</div>
396
									<div *ngIf="!nodeService.detailView.getOsmTagValue('addr:country')">
397 398 399 400
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
401
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
402 403
								</div>
							</div>
404

405 406 407 408 409 410 411 412
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>E-Mail</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('email')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('email')}}</span>
									</div>
413
									<div *ngIf="!nodeService.detailView.getOsmTagValue('email')">
414 415 416 417
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
418
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
419 420
								</div>
							</div>
421

422 423 424 425 426 427 428 429
							<div class="form-group row item-detail">
								<label class="col-sm-4 col-form-label">
									<strong>Öffnungszeiten</strong>
								</label>
								<div class="col">
									<div *ngIf="nodeService.detailView.getOsmTagValue('opening_hours')">
										<span class="form-control-plaintext" id="elementKey" >{{nodeService.detailView.getOsmTagValue('opening_hours')}}</span>
									</div>
430
									<div *ngIf="!nodeService.detailView.getOsmTagValue('opening_hours')">
431 432 433 434
											<span class="form-control-plaintext text-muted" id="elementKey" >Keine Angabe bisher.</span>
									</div>
								</div>
								<div class="col-auto">
435
									<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="osmlinkicon gp_osmlink"></i></a>
436 437
								</div>
							</div>
438

philippelke's avatar
philippelke committed
439 440
						</div>
					</div>
441
				</div>
442

443
			</div>
444 445 446 447 448 449 450 451 452 453





			<div class="elementinfo">
				<div class="form-group">
					<div (click)="goodLifeCollapse= !goodLifeCollapse"
						[attr.aria-expanded]="!infoCollapsed" aria-controls="collapseInfo"
						class="collapseInfo">
454
						<i class="listicon gp_betterlife" aria-hidden="true">&nbsp;</i>Ort des Guten  Lebens<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!goodLifeCollapse,'fa-angle-right':goodLifeCollapse, 'fa-right':true}"
455 456 457 458 459
							aria-hidden="true">&nbsp;</i>
					</div>
				</div>
				<div id="collapseInfo" [ngbCollapse]="goodLifeCollapse">
					<div class="card">
Jacob's avatar
Jacob committed
460
						<div *ngIf="showGoodLife()" class="card-body detailbox">
Jacob's avatar
Jacob committed
461

pelle's avatar
pelle committed
462
							<div *ngIf="nodeService.detailView.dimensions.length > 0" class="elementbli">
463 464 465 466 467 468 469 470
								<div class="form-group row item-detail">
									<label for="elementBli" class="col-sm col-form-label">
										<strong>Dimensionen des Guten Lebens</strong>
									</label>
								</div>
								<br>
								<app-bli class="bli-app" [node]="nodeService.detailView" [displayType]="'icons_and_labels'"></app-bli>
							</div>
Jacob's avatar
Jacob committed
471

pelle's avatar
pelle committed
472
							<div *ngIf="nodeService.detailView.getDescription()" class="elementdescription">
473 474 475 476 477 478 479
								<div class="form-group row item-detail">
									<label for="description" class="col-sm col-form-label">
											<strong>Beschreibung</strong>
									</label>
								</div>
								<div name="description" class="col">{{nodeService.detailView.description}}</div>
							</div>
Jacob's avatar
Jacob committed
480

pelle's avatar
pelle committed
481
						</div>
Jacob's avatar
Jacob committed
482
						<div *ngIf="!showGoodLife()" class="card-body detailbox">
pelle's avatar
pelle committed
483 484 485
							<label class="col-sm ">
									Keine Angabe bisher.
							</label>
486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501
						</div>
					</div>
				</div>

			</div>











Jacob's avatar
Jacob committed
502

503
			<div class="elementtitle d-none">
504
				<strong>Ein Ort des Guten Lebens in den Kategorien...</strong>
505 506 507 508
			</div>
			<div class="elementdiscription">
				<div class="">
					<div class="form-group">
philippelke's avatar
philippelke committed
509 510
						<div (click)="descCollapsed = !descCollapsed"
							[attr.aria-expanded]="!descCollapsed"
511
							aria-controls="collapseDescription" class="collapseDescription">
512
                <i class="_fa _fa-undo _fa-lg listicon gp_network" aria-hidden="true">&nbsp;</i>Netzwerk<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!descCollapsed,'fa-angle-right':descCollapsed, 'fa-right':true}"
513 514
								aria-hidden="true">&nbsp;</i>
						</div>
philippelke's avatar
philippelke committed
515
					</div>
philippelke's avatar
philippelke committed
516
					<div id="collapseDescription" [ngbCollapse]="descCollapsed">
517
						<div class="card ">
518

Jacob's avatar
Jacob committed
519
							<div class="card-body detailbox">
520

pelle's avatar
pelle committed
521
								<div *ngIf="nodeService.detailView.getOsmTagValue('operator:type')" class="form-group row item-detail">
522 523 524 525 526 527
									<label for="rechtsform" class="col-sm-4 col-form-label">
										<strong>Rechtsform</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext" id="elementKey">{{nodeService.detailView.getOsmTagValue('operator:type')}}<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="listicon gp_osmlink"></i></a></span>
									</div>
philippelke's avatar
philippelke committed
528
								</div>
529 530


pelle's avatar
pelle committed
531
								<div *ngIf="nodeService.detailView.hasTag('_gpd:welfare')" class="form-group row item-detail">
532 533 534 535 536 537
									<label for="welfare" class="col-sm-4 col-form-label">
										<strong>Gemeinnützigkeit</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext" id="elementKey">{{nodeService.detailView.getTagValue('_gpd:welfare')}}</span>
									</div>
538
								</div>
Jacob's avatar
Jacob committed
539

540 541


pelle's avatar
pelle committed
542
								<div *ngIf="nodeService.detailView.getOsmTagValue('start_date')" class="form-group row item-detail">
543 544 545 546 547
									<label for="start_date" class="col-sm-4 col-form-label">
										<strong>Gründungsjahr</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext" id="elementKey">{{nodeService.detailView.getOsmTagValue('start_date')}}<a href="http://www.openstreetmap.org/copyright" target="_blank"><i aria-hidden="true" class="listicon gp_osmlink"></i></a></span>
548
									</div>
philippelke's avatar
philippelke committed
549
								</div>
550

551 552 553
								<div class="elementpartner">
									<div class="form-group row item-detail">
										<label for="elementPartner" class="col-sm col-form-label">
pelle's avatar
pelle committed
554
											<strong>Netzwerkpartner</strong></label>
555 556 557 558 559 560 561 562 563 564
									</div>
									<div *ngFor="let partner of nodeService.detailView.peers"
										class="list-group">
										<div class="list-group-item list-group-item-action">
											<i class="fa fa-map-marker" aria-hidden="true"></i>{{partner.name}}<label
												class="switch"><input type="checkbox"
												[checked]="mapService.hasNode(partner)"
												(change)="togglePeerVisibility(partner)"><span
												class="slider round"></span></label>
										</div>
philippelke's avatar
philippelke committed
565 566 567
									</div>
								</div>

568 569 570



pelle's avatar
pelle committed
571
								<div *ngIf="nodeService.detailView.getTagValue('_gpd:aktionsradius')" class="form-group row item-detail">
572 573 574 575 576 577 578 579
									<label for="aktionsradius" class="col-sm-4 col-form-label">
										<strong>Aktionsradius</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext" id="elementKey">{{nodeService.detailView.getTagValue('_gpd:aktionsradius')}}</span>
									</div>
								</div>

580
							</div>
Jacob's avatar
Jacob committed
581

philippelke's avatar
philippelke committed
582 583 584
						</div>
					</div>
				</div>
585
			</div>
586 587 588
			<div class="elementSharing">
				<div class="">
					<div class="form-group ">
philippelke's avatar
philippelke committed
589

philippelke's avatar
philippelke committed
590 591
						<div (click)="sharingCollapsed = !sharingCollapsed"
							[attr.aria-expanded]="sharingCollapsed" aria-controls="collapseSharing"
592
							class="collapseSharing">
593
							<i class="listicon gp_sharing" aria-hidden="true">&nbsp;</i>Sharing- und Giving-Angebote<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!sharingCollapsed,'fa-angle-right':sharingCollapsed, 'fa-right':true}"
594 595
								aria-hidden="true">&nbsp;</i>
						</div>
philippelke's avatar
philippelke committed
596
					</div>
philippelke's avatar
philippelke committed
597
					<div id="collapseSharing" [ngbCollapse]="sharingCollapsed">
598
						<div class="card container">
Jacob's avatar
Jacob committed
599
							<div *ngIf="showSharing()" class="card-body detailbox">
Jacob's avatar
Jacob committed
600

601 602 603 604 605 606 607 608
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sharing_offers')" class="form-group row item-detail">
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Angebote des Teilen und Schenkes</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sharing_offers')}}</span>
									</div>
Jacob's avatar
Jacob committed
609
								</div>
610

pelle's avatar
pelle committed
611
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sharing_organisator')" class="form-group row item-detail">
612 613 614 615 616 617 618 619 620
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Organisator*in</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sharing_organisator')}}</span>
									</div>
								</div>

Jacob's avatar
Jacob committed
621

pelle's avatar
pelle committed
622
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sharing_free_offers')" class="form-group row item-detail">
623 624 625 626 627 628 629 630 631
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Kostenfreie Angebote</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sharing_free_offers')}}</span>
									</div>
								</div>

pelle's avatar
pelle committed
632
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sharing_nonfree_offers')" class="form-group row item-detail">
633 634 635 636 637 638 639 640 641
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Kostenpflichtige Angebote</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sharing_nonfree_offers')}}</span>
									</div>
								</div>

Jacob's avatar
Jacob committed
642

643

pelle's avatar
pelle committed
644
							</div>
Jacob's avatar
Jacob committed
645
							<div *ngIf="!showSharing()" class="card-body detailbox">
pelle's avatar
pelle committed
646 647 648
								<label class="col-sm ">
										Keine Angabe bisher.
								</label>
649
							</div>
650
						</div>
philippelke's avatar
philippelke committed
651
					</div>
652 653
				</div>
			</div>
Jacob's avatar
Jacob committed
654 655


pelle's avatar
pelle committed
656 657 658 659
			<div class="elementNutrition">
				<div class="">
					<div class="form-group ">
						<div (click)="nutritionCollapsed = !nutritionCollapsed"
660
							[attr.aria-expanded]="!nutritionCollapsed" aria-controls="collapseNutrition"
pelle's avatar
pelle committed
661
							class="collapseNutrition">
662
							<i class="listicon gp_food" aria-hidden="true">&nbsp;</i>Nachhaltige Ernährung<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!nutritionCollapsed,'fa-angle-right':nutritionCollapsed, 'fa-right':true}"
pelle's avatar
pelle committed
663 664 665 666 667
								aria-hidden="true">&nbsp;</i>
						</div>
					</div>
					<div id="collapseNutrition" [ngbCollapse]="nutritionCollapsed">
						<div class="card container">
Jacob's avatar
Jacob committed
668
							<div *ngIf="showSustainableNutrtition()" class="card-body detailbox">
Jacob's avatar
Jacob committed
669

pelle's avatar
pelle committed
670
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sustainable_nutrition')" class="form-group row item-detail">
pelle's avatar
pelle committed
671 672 673 674 675 676 677
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Angebote zum Thema nachhaltige Ernährung</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sustainable_nutrition')}}</span>
									</div>
Jacob's avatar
Jacob committed
678
								</div>
pelle's avatar
pelle committed
679

pelle's avatar
pelle committed
680
								<div *ngIf="nodeService.detailView.hasTag('_gpd:sustainable_nutrition_assortment')" class="form-group row item-detail">
pelle's avatar
pelle committed
681 682 683 684 685 686 687 688 689
									<label for="elementKey" class="col-sm-4 col-form-label">
										<strong>Sortiment</strong>
									</label>
									<div class="col">
										<span class="form-control-plaintext"
											id="elementKey">{{nodeService.detailView.getTagValue('_gpd:sustainable_nutrition_assortment')}}</span>
									</div>
								</div>
							</div>
Jacob's avatar
Jacob committed
690
							<div *ngIf="!showSustainableNutrtition()" class="card-body detailbox">
pelle's avatar
pelle committed
691 692 693 694
								<label class="col-sm ">
										Keine Angabe bisher.
								</label>
							</div>
pelle's avatar
pelle committed
695 696 697 698
						</div>
					</div>
				</div>
			</div>
699 700 701 702 703 704 705
			<div class="elementApps">
				<div class="">
					<div class="form-group ">

						<div (click)="elementAppsCollapsed = !elementAppsCollapsed"
							[attr.aria-expanded]="elementAppsCollapsed" aria-controls="elementAppsCollapsed"
							class="collapseSharing">
706
							<i class="listicon gp_friendlyapp" aria-hidden="true">&nbsp;</i>Dieser Ort in befreundeten Apps<i [ngClass]="{'fa':true,'fa-lg':true,'fa-angle-down':!elementAppsCollapsed,'fa-angle-right':elementAppsCollapsed, 'fa-right':true}"
707 708 709 710 711 712 713
								aria-hidden="true">&nbsp;</i>
						</div>
					</div>
					<div id="elementApps" [ngbCollapse]="elementAppsCollapsed">
						<div class="card container">
							<div *ngIf="showElementApps()" class="card-body detailbox">
								<div *ngFor="let tag of getAppTags(nodeService.detailView)" class="form-group row item-detail">
714
									<displaytag [tag]="tag"></displaytag>
715 716 717 718 719 720 721 722 723 724 725
								</div>
							</div>
							<div *ngIf="!showElementApps()" class="card-body detailbox">
								<label class="col-sm ">
										Keine Angabe bisher.
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
Jacob's avatar
Jacob committed
726 727


728
			<br>
Jacob's avatar
Jacob committed
729 730
			<div *ngIf="!nodeService.detailView.knownEntity()" class="elementnew exclamation list-group-item">
				<i class="gp_warning icon_big" aria-hidden="true">&nbsp;</i>
philippelke's avatar
philippelke committed
731 732
				<p>Dieser Ort ist noch nicht Teil des GeoPortals des Guten Lebens. Wenn du ihn bearbeitest, wird er als Ort des Guten Lebens sichtbar.</p>
			</div>
733
		</div>
Jacob's avatar
Jacob committed
734

735 736
		<div class="elementfooter">
			<div class="elementedit">
Jacob's avatar
Jacob committed
737 738
				<div *ngIf="authService.isLoggedIn()" class="elementeditbuttonwrap">
					<button type="button" (click)="edit(nodeService.detailView)" class="btn btn-primary elementeditbutton">Diesen Ort bearbeiten</button>
philippelke's avatar
philippelke committed
739
				</div>
Jacob's avatar
Jacob committed
740
				<div *ngIf="!authService.isLoggedIn()" class="elementeditbuttonwrap">
Jacob's avatar
Jacob committed
741
					<button class="btn btn-primary" title="Du musst angemeldet sein um Orte zu bearbeiten." alt="Du musst angemeldet sein um Orte zu bearbeiten." type="button" (click)='edit(nodeService.detailView)' class="btn btn-primary elementeditbutton">Diesen Ort bearbeiten</button>
742 743
				</div>
			</div>
Jacob's avatar
Jacob committed
744
			<div class="elementlastedit">Letzte Änderung: {{nodeService.detailView.last_change_date | date:medium}}</div>
745
		</div>
746 747
	</div>
</div>
748