mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2025-12-14 12:06:46 +00:00
538ae5808a
🛠️ Add “Keine” placeholder option to community select ✏️ Translate community values (“bitcoin”, “einundzwanzig”) on landing page 🌍 Update German locale strings for community names
352 lines
15 KiB
PHP
352 lines
15 KiB
PHP
<?php
|
|
|
|
use App\Attributes\SeoDataAttribute;
|
|
use App\Models\City;
|
|
use App\Models\Country;
|
|
use App\Models\Meetup;
|
|
use App\Traits\SeoTrait;
|
|
use Livewire\Attributes\Validate;
|
|
use Livewire\Volt\Component;
|
|
use Livewire\WithFileUploads;
|
|
|
|
new
|
|
#[SeoDataAttribute(key: 'meetups_create')]
|
|
class extends Component {
|
|
use WithFileUploads;
|
|
use SeoTrait;
|
|
|
|
#[Validate('image|max:10240')] // 10MB Max
|
|
public $logo;
|
|
|
|
// Basic Information
|
|
public string $name = '';
|
|
public ?int $city_id = null;
|
|
public ?string $intro = null;
|
|
|
|
// Links and Social Media
|
|
public ?string $telegram_link = null;
|
|
public ?string $webpage = null;
|
|
public ?string $twitter_username = null;
|
|
public ?string $matrix_group = null;
|
|
public ?string $nostr = null;
|
|
public ?string $simplex = null;
|
|
public ?string $signal = null;
|
|
|
|
// Additional Information
|
|
public ?string $community = null;
|
|
public bool $visible_on_map = true;
|
|
|
|
// New City Modal
|
|
public string $newCityName = '';
|
|
public ?int $newCityCountryId = null;
|
|
public float $newCityLatitude = 0;
|
|
public float $newCityLongitude = 0;
|
|
|
|
public function createCity(): void
|
|
{
|
|
$validated = $this->validate([
|
|
'newCityName' => ['required', 'string', 'max:255', 'unique:cities,name'],
|
|
'newCityCountryId' => ['required', 'exists:countries,id'],
|
|
'newCityLatitude' => ['required', 'numeric'],
|
|
'newCityLongitude' => ['required', 'numeric'],
|
|
]);
|
|
|
|
$city = City::create([
|
|
'name' => $validated['newCityName'],
|
|
'country_id' => $validated['newCityCountryId'],
|
|
'latitude' => $validated['newCityLatitude'],
|
|
'longitude' => $validated['newCityLongitude'],
|
|
'slug' => str($validated['newCityName'])->slug(),
|
|
'created_by' => auth()->id(),
|
|
]);
|
|
|
|
$this->city_id = $city->id;
|
|
$this->reset(['newCityName', 'newCityCountryId', 'newCityLatitude', 'newCityLongitude']);
|
|
|
|
\Flux\Flux::modal('add-city')->close();
|
|
}
|
|
|
|
public function createMeetup(): void
|
|
{
|
|
$validated = $this->validate([
|
|
'name' => ['required', 'string', 'max:255', 'unique:meetups,name'],
|
|
'city_id' => ['required', 'exists:cities,id'],
|
|
'intro' => ['nullable', 'string'],
|
|
'telegram_link' => ['nullable', 'url', 'max:255'],
|
|
'webpage' => ['nullable', 'url', 'max:255'],
|
|
'twitter_username' => ['nullable', 'string', 'max:255'],
|
|
'matrix_group' => ['nullable', 'string', 'max:255'],
|
|
'nostr' => ['nullable', 'string', 'max:255'],
|
|
'simplex' => ['nullable', 'string',],
|
|
'signal' => ['nullable', 'string', 'max:510'],
|
|
'community' => ['required', 'string', 'max:255'],
|
|
'visible_on_map' => ['boolean'],
|
|
]);
|
|
|
|
$meetup = Meetup::create($validated);
|
|
|
|
if ($this->logo) {
|
|
$meetup
|
|
->addMedia($this->logo->getRealPath())
|
|
->usingName($meetup->name)
|
|
->toMediaCollection('logo');
|
|
}
|
|
|
|
session()->flash('status', __('Meetup erfolgreich erstellt!'));
|
|
|
|
$this->redirect(route_with_country('meetups.edit', ['meetup' => $meetup]), navigate: true);
|
|
}
|
|
|
|
public function with(): array
|
|
{
|
|
return [
|
|
'cities' => City::query()
|
|
->with([
|
|
'country',
|
|
])
|
|
->orderBy('name')
|
|
->get(),
|
|
'countries' => Country::query()
|
|
->orderBy('countries.name')
|
|
->get(),
|
|
];
|
|
}
|
|
}; ?>
|
|
|
|
<div class="max-w-4xl mx-auto p-6">
|
|
<flux:heading size="xl" class="mb-8">{{ __('Neues Meetup erstellen') }}</flux:heading>
|
|
|
|
<form wire:submit="createMeetup" class="space-y-10">
|
|
|
|
<!-- Basic Information -->
|
|
<flux:fieldset class="space-y-6">
|
|
<flux:legend>{{ __('Grundlegende Informationen') }}</flux:legend>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<flux:file-upload wire:model="logo">
|
|
<!-- Custom logo uploader -->
|
|
<div class="
|
|
relative flex items-center justify-center size-20 rounded transition-colors cursor-pointer
|
|
border border-zinc-200 dark:border-white/10 hover:border-zinc-300 dark:hover:border-white/10
|
|
bg-zinc-100 hover:bg-zinc-200 dark:bg-white/10 hover:dark:bg-white/15 in-data-dragging:dark:bg-white/15
|
|
">
|
|
@if($logo)
|
|
<img src="{{ $logo?->temporaryUrl() }}" alt="Logo"
|
|
class="size-full object-cover rounded"/>
|
|
@else
|
|
<!-- Show the default icon if no file is uploaded -->
|
|
<flux:icon name="user-group" variant="solid" class="text-zinc-500 dark:text-zinc-400"/>
|
|
@endif
|
|
|
|
<!-- Corner upload icon -->
|
|
<div class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 rounded">
|
|
<flux:icon name="arrow-up-circle" variant="solid" class="text-zinc-500 dark:text-zinc-400"/>
|
|
</div>
|
|
</div>
|
|
</flux:file-upload>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Name') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:input wire:model="name" required/>
|
|
<flux:description>{{ __('Der Anzeigename für dieses Meetup') }}</flux:description>
|
|
<flux:error name="name"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<flux:label>{{ __('Stadt') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:modal.trigger name="add-city">
|
|
<flux:button class="cursor-pointer" size="xs" variant="ghost" icon="plus">
|
|
{{ __('Stadt hinzufügen') }}
|
|
</flux:button>
|
|
</flux:modal.trigger>
|
|
</div>
|
|
<flux:select variant="listbox" searchable wire:model="city_id"
|
|
placeholder="{{ __('Stadt auswählen') }}" required>
|
|
<x-slot name="search">
|
|
<flux:select.search class="px-4" placeholder="{{ __('Suche passende Stadt...') }}"/>
|
|
</x-slot>
|
|
@foreach($cities as $city)
|
|
<flux:select.option value="{{ $city->id }}">{{ $city->name }} ({{ $city->country->name }})
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:description>{{ __('Die nächstgrößte Stadt oder Ort') }}</flux:description>
|
|
<flux:error name="city_id"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Auf Karte sichtbar') }}</flux:label>
|
|
<flux:switch wire:model="visible_on_map"/>
|
|
<flux:description>{{ __('Soll dieses Meetup auf der Karte angezeigt werden?') }}</flux:description>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Einführung') }}</flux:label>
|
|
<flux:textarea wire:model="intro" rows="4"/>
|
|
<flux:description>{{ __('Kurze Beschreibung des Meetups') }}</flux:description>
|
|
<flux:error name="intro"/>
|
|
</flux:field>
|
|
</flux:fieldset>
|
|
|
|
<!-- Links and Social Media -->
|
|
<flux:fieldset class="space-y-6">
|
|
<flux:legend>{{ __('Links & Soziale Medien') }}</flux:legend>
|
|
|
|
<!-- Primary Links -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<flux:field>
|
|
<flux:label>{{ __('Webseite') }}</flux:label>
|
|
<flux:input wire:model="webpage" type="url" placeholder="https://example.com"/>
|
|
<flux:description>{{ __('Offizielle Webseite oder Landingpage') }}</flux:description>
|
|
<flux:error name="webpage"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Telegram Link') }}</flux:label>
|
|
<flux:input wire:model="telegram_link" type="url" placeholder="https://t.me/gruppenname"/>
|
|
<flux:description>{{ __('Link zur Telegram-Gruppe oder zum Kanal') }}</flux:description>
|
|
<flux:error name="telegram_link"/>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<!-- Social Media -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<flux:field>
|
|
<flux:label>{{ __('Twitter Benutzername') }}</flux:label>
|
|
<flux:input wire:model="twitter_username" placeholder="benutzername"/>
|
|
<flux:description>{{ __('Twitter-Handle ohne @ Symbol') }}</flux:description>
|
|
<flux:error name="twitter_username"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Matrix Gruppe') }}</flux:label>
|
|
<flux:input wire:model="matrix_group" placeholder="#gruppe:matrix.org"/>
|
|
<flux:description>{{ __('Matrix-Raum Bezeichner oder Link') }}</flux:description>
|
|
<flux:error name="matrix_group"/>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<!-- Decentralized Platforms -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<flux:field>
|
|
<flux:label>{{ __('Nostr') }}</flux:label>
|
|
<flux:input wire:model="nostr" placeholder="npub..."/>
|
|
<flux:description>{{ __('Nostr öffentlicher Schlüssel oder Bezeichner') }}</flux:description>
|
|
<flux:error name="nostr"/>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<!-- Messaging Apps -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<flux:field>
|
|
<flux:label>{{ __('SimpleX') }}</flux:label>
|
|
<flux:input wire:model="simplex"/>
|
|
<flux:description>{{ __('SimpleX Chat Kontaktinformationen') }}</flux:description>
|
|
<flux:error name="simplex"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Signal') }}</flux:label>
|
|
<flux:input wire:model="signal"/>
|
|
<flux:description>{{ __('Signal Kontakt- oder Gruppeninformationen') }}</flux:description>
|
|
<flux:error name="signal"/>
|
|
</flux:field>
|
|
</div>
|
|
</flux:fieldset>
|
|
|
|
<!-- Additional Information -->
|
|
<flux:fieldset class="space-y-6">
|
|
<flux:legend>{{ __('Zusätzliche Informationen') }}</flux:legend>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<flux:field>
|
|
<flux:label>{{ __('Gemeinschaft') }}</flux:label>
|
|
<flux:select wire:model="community">
|
|
<flux:select.option value="">{{ __('Keine') }}</flux:select.option>
|
|
<flux:select.option value="einundzwanzig">{{ __('Einundzwanzig Community') }}</flux:select.option>
|
|
<flux:select.option value="bitcoin">{{ __('Allgemeine Bitcoin Community') }}</flux:select.option>
|
|
</flux:select>
|
|
<flux:description>{{ __('Gemeinschafts- oder Organisationsname') }}</flux:description>
|
|
<flux:error name="community"/>
|
|
</flux:field>
|
|
</div>
|
|
</flux:fieldset>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex items-center justify-between pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<flux:button class="cursor-pointer" variant="ghost" type="button" onclick="history.back()">
|
|
{{ __('Abbrechen') }}
|
|
</flux:button>
|
|
|
|
<flux:button class="cursor-pointer" variant="primary" type="submit">
|
|
{{ __('Meetup erstellen') }}
|
|
</flux:button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Add City Modal -->
|
|
<flux:modal name="add-city" variant="flyout" wire:key="add-city-modal">
|
|
<form wire:submit="createCity" class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">{{ __('Stadt hinzufügen') }}</flux:heading>
|
|
<flux:text class="mt-2">{{ __('Füge eine neue Stadt zur Datenbank hinzu.') }}</flux:text>
|
|
</div>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Stadtname') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:input wire:model="newCityName" placeholder="{{ __('z.B. Berlin') }}" required/>
|
|
<flux:error name="newCityName"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Land') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:select variant="listbox" searchable wire:model="newCityCountryId"
|
|
placeholder="{{ __('Land auswählen') }}">
|
|
@foreach($countries as $country)
|
|
<flux:select.option value="{{ $country->id }}">
|
|
<div class="flex items-center space-x-2">
|
|
<img alt="{{ str($country->code)->lower() }}"
|
|
src="{{ asset('vendor/blade-flags/country-'.str($country->code)->lower().'.svg') }}"
|
|
width="24" height="12"/>
|
|
<span>{{ $country->name }}</span>
|
|
</div>
|
|
</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="newCityCountryId"/>
|
|
</flux:field>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<flux:field>
|
|
<flux:label>{{ __('Breitengrad') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:input wire:model="newCityLatitude" type="number" step="0.000001" placeholder="52.520008"
|
|
required/>
|
|
<flux:error name="newCityLatitude"/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Längengrad') }} <span class="text-red-500">*</span></flux:label>
|
|
<flux:input wire:model="newCityLongitude" type="number" step="0.000001" placeholder="13.404954"
|
|
required/>
|
|
<flux:error name="newCityLongitude"/>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<flux:spacer/>
|
|
|
|
<flux:modal.close>
|
|
<flux:button class="cursor-pointer" type="button"
|
|
variant="ghost">{{ __('Abbrechen') }}</flux:button>
|
|
</flux:modal.close>
|
|
|
|
<flux:button class="cursor-pointer" type="submit"
|
|
variant="primary">{{ __('Stadt erstellen') }}</flux:button>
|
|
</div>
|
|
</form>
|
|
</flux:modal>
|
|
</div>
|