mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-15 07:06:47 +00:00
cleanup and start with nostr
This commit is contained in:
HolgerHatGarKeineNode
@@ -1,50 +0,0 @@
|
||||
<div class="h-full {{ $darkMode ? 'bg-21gray' : 'bg-transparent' }}">
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
|
||||
$map = 'europe_merc';
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
}
|
||||
@endphp
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center h-full"
|
||||
x-data="{
|
||||
init() {
|
||||
let markers = {{ Js::from($markers) }};
|
||||
|
||||
$('#map').vectorMap({
|
||||
{{ $focus }}
|
||||
zoomButtons : true,
|
||||
zoomOnScroll: true,
|
||||
map: '{{ $map }}',
|
||||
backgroundColor: 'transparent',
|
||||
markers: markers.map(function(h){ return {name: h.name, latLng: h.coords, url: h.url} }),
|
||||
onMarkerClick: function(event, index) {
|
||||
window.open(
|
||||
markers[index].url,
|
||||
'_blank'
|
||||
);
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
image: '{{ asset('img/btc.png') }}',
|
||||
}
|
||||
},
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#a4a4a4'
|
||||
},
|
||||
hover: {
|
||||
'fill-opacity': 1,
|
||||
cursor: 'default'
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="map" style="width: 100%; height: 100vh;" class="my-4 sm:my-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,123 +0,0 @@
|
||||
<div>
|
||||
{{-- HEADER --}}
|
||||
<livewire:frontend.header :country="null"/>
|
||||
|
||||
<div class="container p-4 mx-auto bg-21gray my-2">
|
||||
|
||||
<div class="pb-5 flex flex-row justify-between">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-200">{{ __('Meetup Event') }}</h3>
|
||||
<div class="flex flex-row space-x-2 items-center">
|
||||
<div>
|
||||
@if($meetupEvent->id)
|
||||
<x-button negative wire:click="deleteMe">
|
||||
<i class="fa fa-thin fa-trash"></i>
|
||||
{{ __('Delete') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<x-button :href="$fromUrl">
|
||||
<i class="fa fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="space-y-8 divide-y divide-gray-700 pb-24">
|
||||
<div class="space-y-8 divide-y divide-gray-700 sm:space-y-5">
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
|
||||
<x-input.group :for="md5('meetup_id')" :label="__('Meetup')">
|
||||
<x-select
|
||||
autocomplete="off"
|
||||
wire:model.debounce="meetupEvent.meetup_id"
|
||||
:placeholder="__('Meetup')"
|
||||
:async-data="[
|
||||
'api' => route('api.meetup.index'),
|
||||
'method' => 'GET', // default is GET
|
||||
'params' => ['user_id' => auth()->id()], // default is []
|
||||
]"
|
||||
:template="[
|
||||
'name' => 'user-option',
|
||||
'config' => ['src' => 'profile_image']
|
||||
]"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
option-description="city.name"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.start')" :label="__('Start')">
|
||||
<x-datetime-picker
|
||||
:clearable="false"
|
||||
time-format="24"
|
||||
timezone="UTC"
|
||||
user-timezone="{{ config('app.user-timezone') }}"
|
||||
autocomplete="off"
|
||||
wire:model.debounce="meetupEvent.start"
|
||||
display-format="DD-MM-YYYY HH:mm"
|
||||
:placeholder="__('Start')"/>
|
||||
</x-input.group>
|
||||
|
||||
@if(!$meetupEvent->id && $meetupEvent->start)
|
||||
<x-input.group :for="md5('recurringid')" :label="__('Recurring appointment / monthly')">
|
||||
<x-toggle lg :label="__('Recurring appointment')" wire:model="recurring"/>
|
||||
<p class="text-xs text-amber-400 py-2">{{ __('The recurring appointments are created in the database as new entries. Please be careful with this function, otherwise you will have to change or delete all the appointments you have created manually if you make an error.') }}</p>
|
||||
</x-input.group>
|
||||
@endif
|
||||
|
||||
@if($recurring)
|
||||
<x-input.group :for="md5('repetitions')" :label="__('Number of repetitions')">
|
||||
<x-input type="number" autocomplete="off" wire:model.debounce="repetitions"
|
||||
:placeholder="__('Number of repetitions')"/>
|
||||
</x-input.group>
|
||||
@endif
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.location')" :label="__('Location')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetupEvent.location"
|
||||
:placeholder="__('Location')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.description')" :label="__('Description')">
|
||||
<x-textarea autocomplete="off" wire:model.debounce="meetupEvent.description"
|
||||
:placeholder="__('Description')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.link')" :label="__('Link')">
|
||||
<x-input type="url" autocomplete="off" wire:model.debounce="meetupEvent.link"
|
||||
:placeholder="__('Link')"
|
||||
:hint="__('For example, a link to a location on Google Maps or a link to a website. (not your Telegram group link)')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('grid')" :label="__('Recurring appointments')">
|
||||
@if($recurring && count($series) === $repetitions)
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
|
||||
@for($i = 0; $i < $repetitions; $i++)
|
||||
<x-datetime-picker
|
||||
:label="\App\Support\Carbon::parse($series[$i]['start'])->asDayNameAndMonthName()"
|
||||
:clearable="false"
|
||||
time-format="24"
|
||||
timezone="UTC"
|
||||
user-timezone="{{ config('app.user-timezone') }}"
|
||||
autocomplete="off"
|
||||
wire:model.debounce="series.{{ $i }}.start"
|
||||
display-format="DD-MM-YYYY HH:mm"
|
||||
:placeholder="__('Start')"/>
|
||||
@endfor
|
||||
</div>
|
||||
@endif
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetupEvent.link')" :label="__('Action')">
|
||||
<x-button primary wire:click="submit">
|
||||
<i class="fa fa-thin fa-save"></i>
|
||||
{{ __('Save') }}
|
||||
</x-button>
|
||||
</x-input.group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,137 +0,0 @@
|
||||
<div>
|
||||
{{-- HEADER --}}
|
||||
<livewire:frontend.header :country="null"/>
|
||||
|
||||
<div class="container p-4 mx-auto bg-21gray my-2">
|
||||
|
||||
<div class="pb-5 flex flex-row justify-between">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-200">{{ __('Meetup') }}</h3>
|
||||
<div class="flex flex-row space-x-2 items-center">
|
||||
|
||||
<div>
|
||||
<x-button :href="$fromUrl">
|
||||
<i class="fa fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="space-y-8 divide-y divide-gray-700 pb-24">
|
||||
<div class="space-y-8 divide-y divide-gray-700 sm:space-y-5">
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
|
||||
<x-input.group :for="md5('image')" :label="__('Main picture')">
|
||||
<div class="py-4">
|
||||
@if ($image && str($image->getMimeType())->contains(['image/jpeg','image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp']))
|
||||
<div class="text-gray-200">{{ __('Preview') }}:</div>
|
||||
<img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}">
|
||||
@endif
|
||||
@if ($meetup->getFirstMediaUrl('logo'))
|
||||
<div class="text-gray-200">{{ __('Current picture') }}:</div>
|
||||
<img class="h-48 object-contain" src="{{ $meetup->getFirstMediaUrl('logo') }}">
|
||||
@endif
|
||||
</div>
|
||||
<input class="text-gray-200" type="file" wire:model="image">
|
||||
@error('image') <span class="text-red-500">{{ $message }}</span> @enderror
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.name')" :label="__('Name')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.name"
|
||||
:placeholder="__('Name')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.community')" :label="__('Community')">
|
||||
<x-select
|
||||
:options="['einundzwanzig', 'bitcoin', 'satoshis_coffeeshop']"
|
||||
:clearable="false"
|
||||
autocomplete="off"
|
||||
wire:model.debounce="meetup.community"
|
||||
:placeholder="__('Community')"
|
||||
:hint="__('This is the community that the meetup belongs to. If a community is not listed, please contact the administrator.')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('city_id')">
|
||||
<x-slot name="label">
|
||||
<div class="flex flex-row space-x-4 items-center">
|
||||
<div>
|
||||
{{ __('City/Area') }}
|
||||
</div>
|
||||
<x-button xs :href="route('city.form')">
|
||||
<i class="fa fa-thin fa-plus"></i>
|
||||
{{ __('New City') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</x-slot>
|
||||
<x-select
|
||||
:clearable="false"
|
||||
autocomplete="off"
|
||||
wire:model.debounce="meetup.city_id"
|
||||
:placeholder="__('City/Area')"
|
||||
:async-data="[
|
||||
'api' => route('api.cities.index'),
|
||||
'method' => 'GET', // default is GET
|
||||
]"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
option-description="country.name"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.intro')" :label="__('Intro')">
|
||||
<x-textarea autocomplete="off" wire:model.debounce="meetup.intro"
|
||||
:placeholder="__('Intro')"
|
||||
:hint="__('This is the introduction text that is shown on the landing page.')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.nostr')" :label="__('Nostr public key')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.nostr"
|
||||
:placeholder="__('Nostr public key')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.simplex')" :label="__('Simplex')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.simplex"
|
||||
:placeholder="__('Simplex')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.matrix_group')" :label="__('Matrix Group')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.matrix_group"
|
||||
:placeholder="__('Matrix Group')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.telegram_link')" :label="__('Telegram-Link')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.telegram_link"
|
||||
:placeholder="__('Telegram-Link')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.webpage')" :label="__('Website')">
|
||||
<x-input type="url" autocomplete="off" wire:model.debounce="meetup.webpage"
|
||||
:placeholder="__('Link')"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.twitter_username')" :label="__('Twitter Username')">
|
||||
<x-input autocomplete="off" wire:model.debounce="meetup.twitter_username"
|
||||
:placeholder="__('Twitter Username')"
|
||||
:hint="__('Without @')"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('meetup.link')" :label="__('Action')">
|
||||
<x-button primary wire:click="submit">
|
||||
<i class="fa fa-thin fa-save"></i>
|
||||
{{ __('Save') }}
|
||||
</x-button>
|
||||
</x-input.group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,332 +0,0 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
<livewire:frontend.header :country="null"/>
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12 mt-2">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
|
||||
|
||||
<div class="relative py-4 sm:py-4">
|
||||
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
|
||||
<div class="relative sm:py-4 lg:py-0">
|
||||
<div class="relative mx-auto max-w-md px-6 sm:max-w-3xl lg:max-w-none lg:px-0 lg:py-12">
|
||||
<!-- Testimonial card-->
|
||||
<div class="relative overflow-hidden rounded-2xl pt-64 pb-10l">
|
||||
<img class="absolute inset-0 h-full w-full object-contain"
|
||||
src="{{ $meetup->getFirstMediaUrl('logo', 'preview') }}"
|
||||
alt="">
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="mt-8">
|
||||
<div class="relative text-lg font-medium text-gray-200 md:flex-grow">
|
||||
<p class="relative">{{ $meetup->intro }}</p>
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
<x-button black target="_blank" class="my-6"
|
||||
:href="route('export.meetupEvent', ['meetupEvent' => $meetupEvent])">
|
||||
<i class="fa-thin fa-file-excel"></i>
|
||||
{{ __('Download') }}
|
||||
</x-button>
|
||||
|
||||
<div class="border-b border-gray-200 pb-5">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-200">{{ __('Confirmations') }}</h3>
|
||||
</div>
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
|
||||
@foreach($attendees as $a)
|
||||
<li class="flex py-4">
|
||||
<img class="h-10 w-10 rounded-full"
|
||||
src="{{ $a['user']['profile_photo_url'] ?? 'https://ui-avatars.com/api/?name='.urlencode($a['name']).'&color=7F9CF5&background=EBF4FF' }}"
|
||||
alt="{{ $a['name'] }}">
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-200">{{ $a['name'] }}</p>
|
||||
<p class="text-sm text-green-300">{{ __('Participation confirmed') }}</p>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="border-b border-gray-200 pb-5 mt-6">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-200">{{ __('Perhaps') }}</h3>
|
||||
</div>
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
|
||||
@foreach($mightAttendees as $a)
|
||||
<li class="flex py-4">
|
||||
<img class="h-10 w-10 rounded-full"
|
||||
src="{{ $a['user']['profile_photo_url'] ?? 'https://ui-avatars.com/api/?name='.urlencode($a['name']).'&color=7F9CF5&background=EBF4FF' }}"
|
||||
alt="{{ $a['name'] }}">
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-200">{{ $a['name'] }}</p>
|
||||
<p class="text-sm text-yellow-300">{{ __('Perhaps') }}</p>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="relative mx-auto max-w-md px-6 sm:max-w-3xl lg:px-0">
|
||||
<!-- Content area -->
|
||||
<div class="pt-12 sm:pt-16 lg:pt-20">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-200 sm:text-4xl">{{ $meetup->name }}</h2>
|
||||
<div class="mt-6 space-y-6 text-gray-100">
|
||||
<p class="font-bold text-xl">
|
||||
{{ __('When') }}: {{ $meetupEvent->start->asDateTime() }}
|
||||
</p>
|
||||
<p class="font-bold text-xl">
|
||||
{{ __('Where') }}: {{ $meetupEvent->location }}
|
||||
</p>
|
||||
<div class="prose prose-invert leading-normal">
|
||||
<x-markdown>
|
||||
{!! $meetupEvent->description !!}
|
||||
</x-markdown>
|
||||
</div>
|
||||
<div>
|
||||
@if($meetupEvent->link)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetupEvent->link"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Event-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 space-y-6 text-gray-100 flex flex-col space-y-2">
|
||||
<div>
|
||||
@if($meetup->telegram_link)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->telegram_link"
|
||||
secondary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Telegram-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if($meetup->webpage)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->webpage"
|
||||
secondary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Website') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if($meetup->simplex)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->simplex"
|
||||
secondary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('SimpleX') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if($meetup->matrix_group)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->matrix_group"
|
||||
secondary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-people-group mr-2"></i>
|
||||
{{ __('Matrix-Group') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if($meetup->twitter_username)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="'https://twitter.com/'.$meetup->twitter_username"
|
||||
secondary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Twitter') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats section -->
|
||||
<div class="mt-10">
|
||||
<dl class="grid grid-cols-2 gap-x-4 gap-y-8">
|
||||
|
||||
<div class="border-t-2 border-gray-100 pt-6">
|
||||
<dt class="text-base font-medium text-gray-200">{{ __('Confirmations') }}</dt>
|
||||
<dd class="text-3xl font-bold tracking-tight text-gray-300">{{ count($meetupEvent->attendees ?? []) }}</dd>
|
||||
</div>
|
||||
|
||||
<div class="border-t-2 border-gray-100 pt-6">
|
||||
<dt class="text-base font-medium text-gray-200">{{ __('Perhaps') }}</dt>
|
||||
<dd class="text-3xl font-bold tracking-tight text-gray-300">{{ count($meetupEvent->might_attendees ?? []) }}</dd>
|
||||
</div>
|
||||
|
||||
</dl>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input
|
||||
wire:model.debounce="name"
|
||||
label="{{ __('Name') }}"
|
||||
hint="{{ __('Your unique name so that we can count the number of participants correctly (does not necessarily have to be your real name)') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex flex-row space-x-2 items-center">
|
||||
<div>
|
||||
@if(!$willShowUp && !$perhapsShowUp)
|
||||
<div x-data="{}">
|
||||
<x-button
|
||||
lg primary
|
||||
x-on:click="$wireui.confirmDialog({
|
||||
id: 'attend-event',
|
||||
icon: 'question',
|
||||
accept: {label: '{{ __('Yes') }}',
|
||||
execute: () => $wire.attend()},
|
||||
reject: {label: '{{ __('No, cancel') }}',
|
||||
execute: () => window.$wireui.notify({'title': '{{ __('You have not confirmed your participation.') }}','icon': 'warning'})}
|
||||
})"
|
||||
>
|
||||
<i class="fa fa-thin fa-check mr-2"></i>
|
||||
{{ __('I will show up') }}
|
||||
</x-button>
|
||||
</div>
|
||||
@else
|
||||
<div x-data="{}">
|
||||
<x-button
|
||||
x-on:click="$wireui.confirmDialog({
|
||||
icon: 'question',
|
||||
title: '{{ __('Are you sure you want to cancel your participation?') }}',
|
||||
accept: {label: '{{ __('Yes') }}',
|
||||
execute: () => $wire.cannotCome()},
|
||||
reject: {label: '{{ __('No, cancel') }}',
|
||||
}})"
|
||||
lg primary>
|
||||
<i class="fa fa-thin fa-face-frown mr-2"></i>
|
||||
{{ __('Unfortunately I cannot come') }}
|
||||
</x-button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
@if(!$perhapsShowUp && !$willShowUp)
|
||||
<div x-data="{}">
|
||||
<x-button
|
||||
x-on:click="$wireui.confirmDialog({
|
||||
id: 'attend-event',
|
||||
icon: 'question',
|
||||
accept: {label: '{{ __('Yes') }}',
|
||||
execute: () => $wire.mightAttend()},
|
||||
reject: {label: '{{ __('No, cancel') }}',
|
||||
execute: () => window.$wireui.notify({'title': '{{ __('You have not confirmed your participation.') }}','icon': 'warning'})}})"
|
||||
lg>
|
||||
<i class="fa fa-thin fa-question mr-2"></i>
|
||||
{{ __('Might attend') }}
|
||||
</x-button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
@auth
|
||||
@else
|
||||
<div class="rounded-md bg-red-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: mini/x-circle -->
|
||||
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
{{ __('Remember that you are currently not logged in.') }}
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<ul role="list" class="list-disc space-y-1 pl-5">
|
||||
<li>{{ __('Your participation will only be saved for one week in the current browser session.') }}</li>
|
||||
<li>{{ __('You cannot withdraw your participation after one week.') }}</li>
|
||||
<li>{{ __('Log in so that you can edit your participation at any time.') }}</li>
|
||||
</ul>
|
||||
<div class="w-full flex justify-end">
|
||||
<x-button xs secondary :href="route('auth.login')">
|
||||
<i class="fa fa-thin fa-sign-in"></i>
|
||||
{{ __('Login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@push('modals')
|
||||
<x-dialog id="attend-event" title="{{ __('Confirmation') }}"
|
||||
description="{{ __('You confirm your participation.') }}">
|
||||
@auth
|
||||
@else
|
||||
<div class="rounded-md bg-transparent p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: mini/x-circle -->
|
||||
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-500">
|
||||
{{ __('Remember that you are currently not logged in.') }}
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<ul role="list" class="list-disc space-y-1 pl-5">
|
||||
<li>{{ __('Your participation will only be saved for one week in the current browser session.') }}</li>
|
||||
<li>{{ __('You cannot withdraw your participation after one week.') }}</li>
|
||||
<li>{{ __('Log in so that you can edit your participation at any time.') }}</li>
|
||||
</ul>
|
||||
<div class="w-full flex justify-end">
|
||||
<x-button xs secondary :href="route('auth.login')">
|
||||
<i class="fa fa-thin fa-sign-in"></i>
|
||||
{{ __('Login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
</x-dialog>
|
||||
@endpush
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
|
||||
<div wire:ignore class="z-50 hidden md:block">
|
||||
<script
|
||||
src="{{ asset('dist/einundzwanzig.chat.js') }}"
|
||||
data-website-owner-pubkey="daf83d92768b5d0005373f83e30d4203c0b747c170449e02fea611a0da125ee6"
|
||||
data-chat-type="GLOBAL"
|
||||
data-chat-tags="#einundzwanzig_portal_{{ str($meetupEvent->meetup->slug)->replace('-', '_') }}"
|
||||
data-relays="wss://nostr.einundzwanzig.space,wss://nostr.easify.de,wss://nostr.mom,wss://relay.damus.io,wss://relay.snort.social"
|
||||
></script>
|
||||
<link rel="stylesheet" href="{{ asset('dist/einundzwanzig.chat.css') }}">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,224 +0,0 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
<livewire:frontend.header :country="null"/>
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12 mt-8">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-10/12 flex flex-col">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
<span
|
||||
class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200">{{ $meetup->name }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ __('Plebs together strong 💪') }}
|
||||
</h1>
|
||||
<div class="px-0 mb-6 text-lg text-gray-200 md:text-xl">
|
||||
<x-markdown>
|
||||
{!! $meetup->intro !!}
|
||||
</x-markdown>
|
||||
</div>
|
||||
|
||||
@if($meetup->telegram_link)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->telegram_link"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Telegram-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->simplex)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->simplex"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('SimpleX-Link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->webpage)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->webpage"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Website') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->matrix_group)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="$meetup->matrix_group"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-people-group mr-2"></i>
|
||||
{{ __('Matrix-Group') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($meetup->twitter_username)
|
||||
<x-button
|
||||
target="_blank"
|
||||
:href="'https://twitter.com/'.$meetup->twitter_username"
|
||||
primary lg class="mt-4 whitespace-nowrap">
|
||||
<i class="fa fa-thin fa-external-link mr-2"></i>
|
||||
{{ __('Twitter') }}
|
||||
</x-button>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sm:w-2/12 p-4">
|
||||
<img class="max-h-64" src="{{ $meetup->getFirstMediaUrl('logo') }}" alt="Logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4">
|
||||
|
||||
<section class="h-auto px-10 py-16">
|
||||
<div class="max-w-3xl mx-auto space-y-4 sm:text-center">
|
||||
<h2 class="text-4xl sm:text-5xl font-semibold text-white">
|
||||
{{ __('Events') }}
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
||||
@foreach($meetupEvents as $meetupEvent)
|
||||
@php
|
||||
$activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
|
||||
@endphp
|
||||
<li id="meetupEventId_{{ $meetupEvent->id }}" class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl">
|
||||
<div class="flex flex-1 flex-col p-8">
|
||||
{{--<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded"
|
||||
src="{{ $meetupEvent->meetup->getFirstMediaUrl('logo') }}"
|
||||
alt="{{ $meetupEvent->meetup->name }}">--}}
|
||||
<h3 class="mt-1 text-xl font-medium text-gray-900">{{ $meetupEvent->start->asDateTime() }}</h3>
|
||||
<h3 class="mt-1 text-xl font-medium text-gray-900">{{ $meetupEvent->location }}</h3>
|
||||
<dl class="mt-1 flex flex-grow flex-col justify-between">
|
||||
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4">
|
||||
<div x-data="{
|
||||
id: 1,
|
||||
get expanded() {
|
||||
return this.active === this.id
|
||||
},
|
||||
set expanded(value) {
|
||||
this.active = value ? this.id : null
|
||||
},
|
||||
}"
|
||||
role="region" class="rounded-lg bg-white shadow">
|
||||
<h2>
|
||||
<button
|
||||
x-on:click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
|
||||
>
|
||||
<span>{{ __('Description') }}</span>
|
||||
<span x-show="expanded" aria-hidden="true" class="ml-4">−</span>
|
||||
<span x-show="!expanded" aria-hidden="true" class="ml-4">+</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div x-show="expanded" x-collapse>
|
||||
<div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<div class="-mt-px flex divide-x divide-gray-200">
|
||||
<div class="-ml-px flex w-0 flex-1">
|
||||
<a target="_blank" href="{{ route('meetup.event.landing', ['country' => $country, 'meetupEvent' => $meetupEvent]) }}"
|
||||
class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
|
||||
<i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i>
|
||||
<span class="ml-3 text-gray-100 text-2xl">{{ __('Link to participate') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<div class="w-full mt-8">
|
||||
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="{{ asset('dist/js-year-calendar.min.css') }}"/>
|
||||
<script src="{{ asset('dist/js-year-calendar.min.js') }}"></script>
|
||||
<script src="{{ asset('dist/locales/js-year-calendar.'.$locale.'.js') }}"></script>
|
||||
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: '{{ $locale }}',
|
||||
startYear: {{ date('Y') }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
$wire.call('showEvent', e.events[0].id);
|
||||
document.getElementById('meetupEventId_'+e.events[0].id).scrollIntoView();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-ref="calendar"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
|
||||
<div wire:ignore class="z-50 hidden md:block">
|
||||
<script
|
||||
src="{{ asset('dist/einundzwanzig.chat.js') }}"
|
||||
data-website-owner-pubkey="daf83d92768b5d0005373f83e30d4203c0b747c170449e02fea611a0da125ee6"
|
||||
data-chat-type="GLOBAL"
|
||||
data-chat-tags="#einundzwanzig_portal_{{ str($meetup->slug)->replace('-', '_') }}"
|
||||
data-relays="wss://nostr.einundzwanzig.space,wss://nostr.easify.de,wss://nostr.mom,wss://relay.damus.io,wss://relay.snort.social"
|
||||
></script>
|
||||
<link rel="stylesheet" href="{{ asset('dist/einundzwanzig.chat.css') }}">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,189 +0,0 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
{{-- HEADER --}}
|
||||
<livewire:frontend.header :country="$country"/>
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
|
||||
<div>
|
||||
<div class="w-full flex justify-end my-2">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-calendar-arrow-down mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for all meetup events') }}
|
||||
</x-button>
|
||||
@if(auth()->check() && auth()->user()->meetups->count() > 0)
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country, 'my' => auth()->user()->meetups->pluck('id')->toArray()]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
black>
|
||||
<i class="fa fa-thin fa-calendar-heart mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for my meetups only') }}
|
||||
</x-button>
|
||||
@endif
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ $mapEmbedCode }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Embed code for the map copied!') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-code mr-2"></i>
|
||||
{{ __('Copy embed code for the map') }} <img class="h-6 rounded"
|
||||
src="{{ asset('vendor/blade-country-flags/4x3-'. $country->code .'.svg') }}"
|
||||
alt="{{ $country->code }}">
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-full sm:w-1/2">
|
||||
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="{{ asset('dist/js-year-calendar.min.css') }}"/>
|
||||
<script src="{{ asset('dist/js-year-calendar.min.js') }}"></script>
|
||||
<script src="{{ asset('dist/locales/js-year-calendar.'.$locale.'.js') }}"></script>
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: '{{ $locale }}',
|
||||
startYear: {{ $year }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
var content = '';
|
||||
var ids = [];
|
||||
|
||||
for(var i in e.events) {
|
||||
ids.push(e.events[i].id);
|
||||
content += '<div class=\'event-tooltip-content\'>'
|
||||
+ '<div class=\'event-name\'>' + e.events[i].location + '</div>'
|
||||
+ '<div class=\'event-location\'>' + e.events[i].description + '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
console.log(content);
|
||||
|
||||
$wire.call('popover', content, ids.join(','));
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-ref="calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:inline sm:w-1/2 max-h-[300px]">
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
|
||||
$map = 'europe_merc';
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
}
|
||||
@endphp
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
x-data="{
|
||||
init() {
|
||||
let markers = {{ Js::from($markers) }};
|
||||
|
||||
$('#map').vectorMap({
|
||||
{{ $focus }}
|
||||
zoomButtons : true,
|
||||
zoomOnScroll: true,
|
||||
height: 300,
|
||||
map: '{{ $map }}',
|
||||
backgroundColor: 'transparent',
|
||||
markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
|
||||
onMarkerClick: function(event, index) {
|
||||
$wire.call('filterByMarker', markers[index].id)
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
image: '{{ asset('img/btc.png') }}',
|
||||
}
|
||||
},
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#a4a4a4'
|
||||
},
|
||||
hover: {
|
||||
'fill-opacity': 1,
|
||||
cursor: 'default'
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="map" style="width: 100%; height: 300px" class="bg-gray-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="text-2xl font-bold leading-7 text-white sm:truncate sm:text-3xl sm:tracking-tight">
|
||||
{{ __('Meetup dates') }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-4 flex md:mt-0 md:ml-4">
|
||||
{{----}}
|
||||
</div>
|
||||
</div>
|
||||
<livewire:tables.meetup-event-table :country="$country->code"/>
|
||||
</div>
|
||||
</section>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
</div>
|
||||
@@ -1,108 +0,0 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
{{-- HEADER --}}
|
||||
<livewire:frontend.header :country="$country"/>
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 py-4">
|
||||
<div class="w-full flex justify-end">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-calendar-arrow-down mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for all meetup events') }}
|
||||
</x-button>
|
||||
@if(auth()->check() && auth()->user()->meetups->count() > 0)
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ route('meetup.ics', ['country' => $country, 'my' => auth()->user()->meetups->pluck('id')->toArray()]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Calendar Stream Url copied!') }}',description:'{{ __('Paste the calendar stream link into a compatible calendar app.') }}',icon:'success'});"
|
||||
black>
|
||||
<i class="fa fa-thin fa-calendar-heart mr-2"></i>
|
||||
{{ __('Calendar Stream-Url for my meetups only') }}
|
||||
</x-button>
|
||||
@endif
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ $mapEmbedCode }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Embed code for the map copied!') }}',icon:'success'});"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-code mr-2"></i>
|
||||
{{ __('Copy embed code for the map') }} <img class="h-6 rounded"
|
||||
src="{{ asset('vendor/blade-country-flags/4x3-'. $country->code .'.svg') }}"
|
||||
alt="{{ $country->code }}">
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
@php
|
||||
$focus = '';
|
||||
$map = $country->code . '_merc';
|
||||
if (!\File::exists(public_path('vendor/jvector/maps/' . $country->code . '.js'))) {
|
||||
$map = 'europe_merc';
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
} elseif ($country->code === 'mx') {
|
||||
$focus = 'focusOn: {lat:'.$country->latitude.',lng:'.$country->longitude.',scale:8,animate:true},';
|
||||
}
|
||||
@endphp
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
x-data="{
|
||||
init() {
|
||||
let markers = {{ Js::from($markers) }};
|
||||
|
||||
$('#map').vectorMap({
|
||||
{{ $focus }}
|
||||
zoomButtons : true,
|
||||
zoomOnScroll: true,
|
||||
map: '{{ $map }}',
|
||||
backgroundColor: 'transparent',
|
||||
markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
|
||||
onMarkerClick: function(event, index) {
|
||||
$wire.call('filterByMarker', markers[index].id)
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
image: '{{ asset('img/btc.png') }}',
|
||||
}
|
||||
},
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#a4a4a4'
|
||||
},
|
||||
hover: {
|
||||
'fill-opacity': 1,
|
||||
cursor: 'default'
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="map" style="width: 100%;" class="h-[200px] sm:h-[400px] my-4 sm:my-0 bg-gray-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="text-2xl font-bold leading-7 text-white sm:truncate sm:text-3xl sm:tracking-tight">
|
||||
{{ __('Meetups') }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-4 flex md:mt-0 md:ml-4">
|
||||
{{----}}
|
||||
</div>
|
||||
</div>
|
||||
<livewire:tables.meetup-table :country="$country->code"/>
|
||||
</div>
|
||||
</section>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
</div>
|
||||
@@ -1,446 +0,0 @@
|
||||
<div>
|
||||
<div class="w-full p-0 lg:p-6" wire:loading.class="opacity-50 pointer-events-none cursor-not-allowed">
|
||||
<div class="flex max-w-none flex-col space-y-4 text-black">
|
||||
|
||||
{{-- SEARCH PANEL --}}
|
||||
<div class="rounded-lg bg-white shadow dark:bg-gray-800">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="px-4 py-5 lg:p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
|
||||
{{ $meetup->name }}
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
|
||||
<form wire:submit.prevent="submit" class="space-y-2">
|
||||
@if (!$model?->simplified_geojson || !$selectedItemOSMPolygons)
|
||||
<div class="flex flex-col space-y-2 lg:flex-row lg:space-y-0 lg:space-x-2">
|
||||
<div>
|
||||
<x-input wire:model.defer="search"/>
|
||||
</div>
|
||||
<div>
|
||||
<x-button type="submit" class='w-full font-semibold'>Search</x-button>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col space-y-2">
|
||||
<a href="{{ route('osm.meetups') }}">
|
||||
<x-badge gray class="whitespace-nowrap dark:bg-gray-200 dark:text-black">
|
||||
Back
|
||||
</x-badge>
|
||||
</a>
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-gray-900">
|
||||
<div class="px-2 py-2 sm:px-4 sm:py-5 sm:px-6">
|
||||
<h3
|
||||
class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
{{ $selectedItemOSMPolygons['display_name'] }}
|
||||
</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-2 py-2 sm:p-0 sm:px-4 sm:py-5">
|
||||
<dl class="sm:divide-y sm:divide-gray-200">
|
||||
<div class="space-y-1 py-2 sm:py-4 sm:py-5">
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
||||
<x-badge
|
||||
blue>{{ $selectedItemOSMPolygons['type'] }}</x-badge>
|
||||
</dt>
|
||||
<dd class="text-sm text-gray-900 dark:text-gray-300">
|
||||
OSM ID: {{ $selectedItemOSMPolygons['osm_id'] }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-gray-900">
|
||||
<div class="px-2 py-2 sm:px-4 sm:py-5 sm:px-6">
|
||||
<div class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
|
||||
<x-toggle red lg
|
||||
label="Fetch water boundaries from https://osm-boundaries.com"
|
||||
wire:model="OSMBoundaries"/>
|
||||
</div>
|
||||
<div x-data="{
|
||||
show: @entangle('polygonsOSMfr')
|
||||
}"
|
||||
class="mt-2 max-w-2xl text-sm text-gray-500 dark:text-gray-300">
|
||||
<x-toggle red lg
|
||||
label="Fetch polygons from https://polygons.openstreetmap.fr"
|
||||
wire:model="polygonsOSMfr"/>
|
||||
<div class="mt-2 flex flex-row items-end space-x-2" x-show="show">
|
||||
<x-input max="1" label="X"
|
||||
wire:model.defer="polygonsOSMfrX"/>
|
||||
<x-input max="1" label="Y"
|
||||
wire:model.defer="polygonsOSMfrY"/>
|
||||
<x-input max="1" label="Z"
|
||||
wire:model.defer="polygonsOSMfrZ"/>
|
||||
</div>
|
||||
<div class="mt-4 font-mono text-sm" x-show="show">
|
||||
<p>
|
||||
X, Y, Z are parameters for the following PostGIS equation.
|
||||
The default values are chosen according to the size of the
|
||||
original geometry to give a slighty bigger geometry, without
|
||||
too many nodes.
|
||||
|
||||
</p>
|
||||
<p class="mt-4">Note that:</p>
|
||||
<p>
|
||||
X > 0 will give a polygon bigger than the original geometry,
|
||||
and guaranteed to contain it.
|
||||
</p>
|
||||
<p>
|
||||
X = 0 will give a polygon similar to the original geometry.
|
||||
</p>
|
||||
<p>
|
||||
X < 0 will give a polygon smaller than the original
|
||||
geometry, and guaranteed to be smaller. </p>
|
||||
</div>
|
||||
<div x-show="show" class="mt-2 font-semibold">
|
||||
<x-button emerald label="Submit and load polygons"
|
||||
wire:click="submitPolygonsOSM"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
@if (!$model?->simplified_geojson && $search)
|
||||
<x-badge lg positive class="xl:whitespace-nowrap">
|
||||
Now select the appropriate place so that a GeoJSON can be built.
|
||||
</x-badge>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto px-4 py-5 lg:p-6">
|
||||
@if ($search)
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
|
||||
Search: {{ $search }}
|
||||
</h3>
|
||||
@endif
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
|
||||
<div class="flex max-h-[400px] flex-col space-y-4">
|
||||
<div class="mt-6 flow-root">
|
||||
<ul role="list" class="-my-5 divide-y divide-gray-200">
|
||||
|
||||
@foreach ($osmSearchResults as $item)
|
||||
@php
|
||||
$currentClass = $item['osm_id'] === $osm_id ? 'bg-amber-400 dark:bg-amber-900' : '';
|
||||
@endphp
|
||||
|
||||
<li class="{{ $currentClass }} cursor-pointer py-4 px-2 hover:bg-amber-400 dark:hover:bg-amber-800"
|
||||
wire:key="osmItem_{{ $loop->index }}"
|
||||
wire:click="selectItem({{ $loop->index }})">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p
|
||||
class="truncate text-sm font-medium text-gray-900 dark:text-gray-200">
|
||||
{{ $item['display_name'] }}</p>
|
||||
<p class="truncate text-sm text-gray-500">
|
||||
<x-badge amber>
|
||||
{{ count($item['geojson']['coordinates'], COUNT_RECURSIVE) }}
|
||||
points
|
||||
</x-badge>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<x-badge blue>{{ $item['type'] }}</x-badge>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Wikipedia Links --}}
|
||||
<div class="flex flex-row items-center space-x-6">
|
||||
@if ($search)
|
||||
<div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
|
||||
<h1 class='font-semibold dark:text-gray-100'>Wikipedia search <span
|
||||
class='text-sm text-gray-500 dark:text-gray-400'>(for population data)</span></h1>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a target="_blank" class="text-amber-500 underline"
|
||||
href="https://en.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
|
||||
EN:
|
||||
{{ $search }}</a>
|
||||
<a target="_blank" class="text-amber-500 underline"
|
||||
href="https://de.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
|
||||
DE:
|
||||
{{ $search }}</a>
|
||||
<a target="_blank" class="text-amber-500 underline"
|
||||
href="https://fr.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
|
||||
FR:
|
||||
{{ $search }}</a>
|
||||
<a target="_blank" class="text-amber-500 underline"
|
||||
href="https://es.wikipedia.org/wiki/{{ urlencode(str($search)->replace(' ', '_')->toString()) }}">Wikipedia
|
||||
ES:
|
||||
{{ $search }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
|
||||
<x-input wire:model.debounce="population" label="population"/>
|
||||
<x-input wire:model.debounce="population_date" label="population_date"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- GeoJSON simplification --}}
|
||||
@if ($model && $selectedItemOSMPolygons)
|
||||
<div class="rounded-lg bg-white shadow dark:bg-gray-800">
|
||||
<div class="px-4 py-5 lg:p-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<h3 class="text-lg font-medium leading-6 text-blue-500">
|
||||
Mapshaper simplification of <span class="text-[#FFA500]">OSM GeoJSON
|
||||
[{{ count($selectedItemOSMPolygons['geojson']['coordinates'], COUNT_RECURSIVE) }}
|
||||
points]</span> to
|
||||
{{ count($model->simplified_geojson['coordinates'] ?? [], COUNT_RECURSIVE) }} points
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-gray-200">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<h1 class="py-2">
|
||||
(smaller percentage means fewer points - aim for no more than 150)
|
||||
</h1>
|
||||
<div class="flex hidden space-x-2 overflow-auto lg:block">
|
||||
@php
|
||||
$btnClassLeft = 'relative inline-flex items-center rounded-l-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
|
||||
$btnClassRight = 'relative -ml-px inline-flex items-center rounded-r-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
|
||||
$btnClassCenter = 'relative -ml-px inline-flex items-center border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-blue-800 hover:bg-blue-400 focus:z-10 focus:border-blue-500 dark:focus:border-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-700';
|
||||
$currentClass = 'bg-blue-500 dark:bg-blue-700 text-white dark:text-gray-900';
|
||||
@endphp
|
||||
<div class="isolate inline-flex rounded-md shadow-sm">
|
||||
@foreach ($percentages as $percentage)
|
||||
@php
|
||||
$btnClass = $loop->first ? $btnClassLeft : ($loop->last ? $btnClassRight : $btnClassCenter);
|
||||
@endphp
|
||||
<button wire:key="percentage_{{ $loop->index }}" type="button"
|
||||
wire:click="setPercentage({{ $percentage }})"
|
||||
class="{{ $btnClass }} {{ $currentPercentage === $percentage ? $currentClass : '' }}">
|
||||
{{ $percentage }}%
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="block lg:hidden">
|
||||
<x-native-select label="Select percentage" placeholder="Select percentage"
|
||||
:options="$percentages" wire:model="currentPercentage"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- GeoJSON data --}}
|
||||
<div>
|
||||
@if ($model?->simplified_geojson && $selectedItemOSMPolygons)
|
||||
<div class="rounded-lg bg-white shadow dark:bg-gray-800">
|
||||
<div class="grid grid-cols-1 gap-4 px-4 py-5 lg:grid-cols-2 lg:p-6">
|
||||
<div>
|
||||
@php
|
||||
$jsonEncodedSelectedItem = json_encode($selectedItemOSMPolygons['geojson'], JSON_THROW_ON_ERROR);
|
||||
@endphp
|
||||
<h3 class="text-lg font-medium leading-6 text-[#FFA500]">
|
||||
OSM GeoJSON
|
||||
[{{ count($selectedItemOSMPolygons['geojson']['coordinates'] ?? [], COUNT_RECURSIVE) }}
|
||||
points]
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
<div class="flex w-full flex-col space-y-2">
|
||||
<pre
|
||||
class="overflow-x-auto py-3 text-[#FFA500]">{{ $jsonEncodedSelectedItem }}</pre>
|
||||
<div class='font-semibold'>
|
||||
<x-button x-data="{
|
||||
textToCopy: @entangle('selectedItemOSMPolygons.geojson')
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
|
||||
lg amber>
|
||||
Copy to clipboard
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@php
|
||||
$jsonEncodedSimplifiedGeoJson = json_encode($model->simplified_geojson, JSON_THROW_ON_ERROR);
|
||||
@endphp
|
||||
<h3 class="text-lg font-medium leading-6 text-blue-500">
|
||||
Simplified GeoJSON
|
||||
[{{ count($model->simplified_geojson['coordinates'] ?? [], COUNT_RECURSIVE) }}
|
||||
points]
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
<div class="flex w-full flex-col space-y-2">
|
||||
<pre
|
||||
class="overflow-x-auto py-3 text-blue-500">{{ $jsonEncodedSimplifiedGeoJson }}</pre>
|
||||
<div class='font-semibold'>
|
||||
<x-button
|
||||
wire:click="saveSimplifiedGeoJson"
|
||||
lg blue>
|
||||
Save on model
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if ($selectedItemOSMBoundaries)
|
||||
<div>
|
||||
@php
|
||||
$jsonEncodedGeoJsonWater = json_encode($selectedItemOSMBoundaries, JSON_THROW_ON_ERROR);
|
||||
@endphp
|
||||
<h3 class="text-lg font-medium leading-6 text-[#FF0084]">
|
||||
https://osm-boundaries.com water GeoJSON
|
||||
[{{ count($selectedItemOSMBoundaries['coordinates'], COUNT_RECURSIVE) }}
|
||||
points]
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
<div class="flex w-full flex-col space-y-2">
|
||||
<pre
|
||||
class="overflow-x-auto py-3 text-[#FF0084]">{{ $jsonEncodedGeoJsonWater }}</pre>
|
||||
<div class='font-semibold'>
|
||||
<x-button x-data="{
|
||||
textToCopy: @entangle('selectedItemOSMBoundaries')
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
|
||||
lg pink>
|
||||
Copy to clipboard
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($selectedItemPolygonsOSMfr)
|
||||
<div>
|
||||
@php
|
||||
$jsonEncodedGeoJsonOSMFr = json_encode($selectedItemPolygonsOSMfr, JSON_THROW_ON_ERROR);
|
||||
@endphp
|
||||
<h3 class="text-lg font-medium leading-6 text-emerald-500">
|
||||
https://polygons.openstreetmap.fr GeoJSON
|
||||
<span wire:key="ifNotGeometryCollection">
|
||||
@if ($selectedItemPolygonsOSMfr['type'] !== 'GeometryCollection')
|
||||
[{{ count($selectedItemPolygonsOSMfr['coordinates'] ?? [], COUNT_RECURSIVE) }}
|
||||
points]
|
||||
@endif
|
||||
</span>
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-gray-500">
|
||||
<div class="flex w-full flex-col space-y-2">
|
||||
<pre
|
||||
class="overflow-x-auto py-3 text-emerald-500">{{ $jsonEncodedGeoJsonOSMFr }}</pre>
|
||||
<div class='font-semibold'>
|
||||
<x-button x-data="{
|
||||
textToCopy: @entangle('selectedItemPolygonsOSMfr')
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(JSON.stringify(textToCopy));window.$wireui.notify({title:'{{ __('Copied!') }}',icon:'success'});"
|
||||
lg emerald>
|
||||
Copy to clipboard
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-4 px-4 py-5 lg:p-6">
|
||||
<div class="w-full">
|
||||
<div>
|
||||
<h1 class="font-bold dark:text-white">
|
||||
GeoJSON preview
|
||||
</h1>
|
||||
<div wire:ignore class="my-4" x-data="{
|
||||
geojson: @entangle('selectedItemOSMPolygons.geojson'),
|
||||
simplifiedGeojson: @entangle('model.simplified_geojson'),
|
||||
geojsonWater: @entangle('selectedItemOSMBoundaries'),
|
||||
geojsonOSMfr: @entangle('selectedItemPolygonsOSMfr'),
|
||||
init() {
|
||||
const map = L.map($refs.map)
|
||||
.setView([0, 0], 13);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar', attribution: '© <a href=\'https://www.openstreetmap.org/copyright\'>OpenStreetMap</a> contributors' }).addTo(map);
|
||||
|
||||
const geojsonFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.geojson
|
||||
};
|
||||
const simplifiedGeojsonFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.simplifiedGeojson
|
||||
};
|
||||
L.geoJson(geojsonFeature, { style: { color: '#FFA500', fillColor: '#FFA500', fillOpacity: 0.3 } }).addTo(map);
|
||||
let simplifiedGeoJSON = L.geoJson(simplifiedGeojsonFeature, { style: { fillOpacity: 0.5 } }).addTo(map);
|
||||
map.fitBounds(simplifiedGeoJSON.getBounds(), { padding: [50, 50] });
|
||||
|
||||
$wire.on('geoJsonUpdated', () => {
|
||||
map.eachLayer((layer) => {
|
||||
layer.remove();
|
||||
});
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar', attribution: '© <a href=\'https://www.openstreetmap.org/copyright\'>OpenStreetMap</a> contributors' }).addTo(map);
|
||||
const geojsonFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.geojson
|
||||
};
|
||||
const simplifiedGeojsonFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.simplifiedGeojson
|
||||
};
|
||||
const geojsonWaterFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.geojsonWater
|
||||
};
|
||||
const geojsonOSMfrFeature = {
|
||||
'type': 'Feature',
|
||||
'geometry': this.geojsonOSMfr
|
||||
};
|
||||
L.geoJson(geojsonFeature, { style: { color: '#FFA500', fillColor: '#FFA500', fillOpacity: 0.3 } }).addTo(map);
|
||||
L.geoJson(geojsonWaterFeature, { style: { color: '#FF0084', fillColor: '#FF0084', fillOpacity: 0.2 } }).addTo(map);
|
||||
L.geoJson(geojsonOSMfrFeature, { style: { color: '#10b981', fillColor: '#10b981', fillOpacity: 0.3 } }).addTo(map);
|
||||
let simplifiedGeoJSON = L.geoJson(simplifiedGeojsonFeature, { style: { fillOpacity: 0.5 } }).addTo(map);
|
||||
map.fitBounds(simplifiedGeoJSON.getBounds(), { padding: [50, 50] });
|
||||
});
|
||||
}
|
||||
}">
|
||||
<div x-ref="map" style="height: 50vh;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class='rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 lg:p-6'>
|
||||
<p class="mt-8 text-xs leading-5 text-gray-400 md:order-1 md:mt-0">
|
||||
<a class="text-blue-500" href="https://github.com/HolgerHatGarKeineNode/geojson-helper"
|
||||
target="_blank">GeoJSON helper</a> is maintained by <a
|
||||
href="https://github.com/HolgerHatGarKeineNode" target="_blank"
|
||||
class="text-amber-500">HolgerHatGarKeineNode</a> [<span
|
||||
class="break-all font-mono">npub1pt0kw36ue3w2g4haxq3wgm6a2fhtptmzsjlc2j2vphtcgle72qesgpjyc6</span>].
|
||||
This
|
||||
software is open-sourced software
|
||||
licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank"
|
||||
class="underline">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.leaflet-attribution-flag {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
@@ -1,74 +0,0 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
{{-- HEADER --}}
|
||||
<livewire:frontend.header :country="$country"/>
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-4">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
|
||||
<div
|
||||
wire:ignore
|
||||
class="w-full flex justify-center"
|
||||
x-data="{
|
||||
init() {
|
||||
let markers = {{ Js::from($allMarkers) }};
|
||||
|
||||
$('#mapworld').vectorMap({
|
||||
zoomButtons : true,
|
||||
zoomOnScroll: true,
|
||||
map: 'world_mill',
|
||||
backgroundColor: 'transparent',
|
||||
markers: markers.map(function(h){ return {name: h.name, latLng: h.coords} }),
|
||||
onMarkerClick: function(event, index) {
|
||||
$wire.call('filterByMarker', markers[index].id)
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
image: '{{ asset('img/btc.png') }}',
|
||||
}
|
||||
},
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#a4a4a4'
|
||||
},
|
||||
hover: {
|
||||
'fill-opacity': 1,
|
||||
cursor: 'default'
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="mapworld" style="width: 100%;" class="h-[200px] sm:h-[400px] bg-gray-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="w-full pb-24">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4" id="table">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="text-2xl font-bold leading-7 text-white sm:truncate sm:text-3xl sm:tracking-tight">
|
||||
{{ __('Meetups') }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-4 flex md:mt-0 md:ml-4">
|
||||
{{----}}
|
||||
</div>
|
||||
</div>
|
||||
<livewire:tables.meetup-table :country="$country->code"/>
|
||||
</div>
|
||||
</div>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
|
||||
<div wire:ignore class="z-50 hidden md:block">
|
||||
<script
|
||||
src="{{ asset('dist/einundzwanzig.chat.js') }}"
|
||||
data-website-owner-pubkey="daf83d92768b5d0005373f83e30d4203c0b747c170449e02fea611a0da125ee6"
|
||||
data-chat-type="GLOBAL"
|
||||
data-chat-tags="#einundzwanzig_portal_meetups_world"
|
||||
data-relays="wss://nostr.einundzwanzig.space,wss://nostr.easify.de,wss://nostr.mom,wss://relay.damus.io,wss://relay.snort.social"
|
||||
></script>
|
||||
<link rel="stylesheet" href="{{ asset('dist/einundzwanzig.chat.css') }}">
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user