mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
edit orange pills
This commit is contained in:
HolgerHatGarKeineNode
@@ -10,9 +10,16 @@
|
||||
<img class="aspect-auto max-h-12" src="{{ asset('img/social_credit_minus.webp') }}" alt="">
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<x-button class="whitespace-nowrap" primary class="text-21gray whitespace-nowrap"
|
||||
wire:click="viewHistoryModal({{ $row->id }})">{{ __('💊 Orange Pill Now') }}</x-button>
|
||||
<div class="flex items-center space-x-1"
|
||||
x-data="{currentUrl: window.location.href}">
|
||||
<a
|
||||
x-bind:href="'/{{ $country }}/book-cases/book-case/form/{{ $row->id }}/?fromUrl='+currentUrl">
|
||||
<x-button
|
||||
class="whitespace-nowrap" primary class="text-21gray whitespace-nowrap"
|
||||
>
|
||||
{{ __('💊 Orange Pill Now') }}
|
||||
</x-button>
|
||||
</a>
|
||||
<x-button class="whitespace-nowrap"
|
||||
:href="route('bookCases.comment.bookcase', ['bookCase' => $row->id, 'country' => $country])">{{ __('Details') }}</x-button>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,49 @@
|
||||
<section class="w-full mb-12">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10">
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex items-center space-x-1"
|
||||
x-data="{currentUrl: window.location.href}">
|
||||
<a
|
||||
x-bind:href="'/{{ $country->code }}/book-cases/book-case/form/{{ $bookCase->id }}/?fromUrl='+currentUrl">
|
||||
<x-button
|
||||
class="whitespace-nowrap" primary class="text-21gray whitespace-nowrap"
|
||||
>
|
||||
{{ __('💊 Orange Pill Now') }}
|
||||
</x-button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4" x-data="{currentUrl: window.location.href}">
|
||||
<ul role="list"
|
||||
class="mx-auto grid max-w-2xl grid-cols-2 gap-y-16 gap-x-8 text-center sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none lg:grid-cols-5 xl:grid-cols-6">
|
||||
|
||||
@foreach($bookCase->orangePills as $orangePill)
|
||||
@if($orangePill->user_id === auth()->id())
|
||||
<a x-bind:href="'/{{ $country->code }}/book-cases/book-case/form/{{ $bookCase->id }}/{{ $orangePill->id }}?fromUrl='+currentUrl"
|
||||
wire:key="orange_pill_{{ $loop->index }}">
|
||||
<li class="border border-amber-500 rounded">
|
||||
<img class="mx-auto h-24 w-24 object-cover rounded"
|
||||
src="{{ $orangePill->getFirstMediaUrl('images') }}" alt="image">
|
||||
<h3 class="text-base font-semibold leading-7 tracking-tight text-gray-200">{{ $orangePill->user->name }}</h3>
|
||||
<p class="text-sm leading-6 text-gray-300">{{ $orangePill->comment }}</p>
|
||||
</li>
|
||||
</a>
|
||||
@else
|
||||
<li>
|
||||
<img class="mx-auto h-24 w-24 object-cover rounded"
|
||||
src="{{ $orangePill->getFirstMediaUrl('images') }}" alt="">
|
||||
<h3 class="text-base font-semibold leading-7 tracking-tight text-gray-200">{{ $orangePill->user->name }}</h3>
|
||||
<p class="text-sm leading-6 text-gray-300">{{ $orangePill->comment }}</p>
|
||||
<p class="text-sm leading-6 text-gray-300">{{ $orangePill->date->asDateTime() }}</p>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
|
||||
<div
|
||||
@@ -30,161 +73,6 @@
|
||||
<p class="truncate text-sm text-gray-500">{{ $bookCase->contact }}</p>
|
||||
<p class="text-sm font-medium text-gray-900">Information</p>
|
||||
<p class="truncate text-sm text-gray-500">{{ $bookCase->comment }}</p>
|
||||
|
||||
<p class="text-sm font-medium text-gray-900">Neues Foto hochladen</p>
|
||||
|
||||
<form wire:submit.prevent="save">
|
||||
<div class="text-sm text-gray-500">
|
||||
<input type="file" wire:model="photo">
|
||||
@error('photo') <span class="error">{{ $message }}</span> @enderror
|
||||
<x-button xs secondary type="submit">Hochladen</x-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if($bookCase->getMedia('images')->count() > 0)
|
||||
<div
|
||||
x-data="{
|
||||
skip: 3,
|
||||
atBeginning: false,
|
||||
atEnd: false,
|
||||
next() {
|
||||
this.to((current, offset) => current + (offset * this.skip))
|
||||
},
|
||||
prev() {
|
||||
this.to((current, offset) => current - (offset * this.skip))
|
||||
},
|
||||
to(strategy) {
|
||||
let slider = this.$refs.slider
|
||||
let current = slider.scrollLeft
|
||||
let offset = slider.firstElementChild.getBoundingClientRect().width
|
||||
slider.scrollTo({ left: strategy(current, offset), behavior: 'smooth' })
|
||||
},
|
||||
focusableWhenVisible: {
|
||||
'x-intersect:enter'() {
|
||||
this.$el.removeAttribute('tabindex')
|
||||
},
|
||||
'x-intersect:leave'() {
|
||||
this.$el.setAttribute('tabindex', '-1')
|
||||
},
|
||||
},
|
||||
disableNextAndPreviousButtons: {
|
||||
'x-intersect:enter.threshold.05'() {
|
||||
let slideEls = this.$el.parentElement.children
|
||||
|
||||
// If this is the first slide.
|
||||
if (slideEls[0] === this.$el) {
|
||||
this.atBeginning = true
|
||||
// If this is the last slide.
|
||||
} else if (slideEls[slideEls.length-1] === this.$el) {
|
||||
this.atEnd = true
|
||||
}
|
||||
},
|
||||
'x-intersect:leave.threshold.05'() {
|
||||
let slideEls = this.$el.parentElement.children
|
||||
|
||||
// If this is the first slide.
|
||||
if (slideEls[0] === this.$el) {
|
||||
this.atBeginning = false
|
||||
// If this is the last slide.
|
||||
} else if (slideEls[slideEls.length-1] === this.$el) {
|
||||
this.atEnd = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}"
|
||||
class="flex w-full flex-col"
|
||||
>
|
||||
<div
|
||||
x-on:keydown.right="next"
|
||||
x-on:keydown.left="prev"
|
||||
tabindex="0"
|
||||
role="region"
|
||||
aria-labelledby="carousel-label"
|
||||
class="flex space-x-6"
|
||||
>
|
||||
<h2 id="carousel-label" class="sr-only" hidden>Carousel</h2>
|
||||
|
||||
<!-- Prev Button -->
|
||||
<button
|
||||
x-on:click="prev"
|
||||
class="text-6xl"
|
||||
:aria-disabled="atBeginning"
|
||||
:tabindex="atEnd ? -1 : 0"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': atBeginning }"
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path
|
||||
stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
|
||||
</span>
|
||||
<span class="sr-only">Skip to previous slide page</span>
|
||||
</button>
|
||||
|
||||
<span id="carousel-content-label" class="sr-only" hidden>Carousel</span>
|
||||
|
||||
<ul
|
||||
x-ref="slider"
|
||||
tabindex="0"
|
||||
role="listbox"
|
||||
aria-labelledby="carousel-content-label"
|
||||
class="flex w-full snap-x snap-mandatory overflow-x-scroll"
|
||||
>
|
||||
|
||||
@foreach($bookCase->getMedia('images') as $image)
|
||||
<li x-bind="disableNextAndPreviousButtons"
|
||||
class="flex w-1/3 shrink-0 snap-start flex-col items-center justify-center p-2"
|
||||
role="option">
|
||||
<a href="{{ $image->getUrl() }}" target="_blank">
|
||||
<img class="mt-2 w-full" src="{{ $image->getUrl('preview') }}"
|
||||
alt="placeholder image">
|
||||
</a>
|
||||
|
||||
<button x-bind="focusableWhenVisible" class="px-4 py-2 text-sm">
|
||||
#{{ $loop->iteration }} Bild
|
||||
</button>
|
||||
|
||||
@if(auth()->user()?->hasRole('super-admin') || app()->environment('local'))
|
||||
<div x-data="{}">
|
||||
<x-button
|
||||
x-on:click="$wireui.confirmDialog({
|
||||
icon: 'question',
|
||||
title: '{{ __('Are your sure?') }}',
|
||||
accept: {label: '{{ __('Yes') }}',
|
||||
execute: () => $wire.deletePhoto({{ $image->id }})},
|
||||
reject: {label: '{{ __('No, cancel') }}',
|
||||
}})"
|
||||
xs
|
||||
x-bind="focusableWhenVisible"
|
||||
class="px-4 py-2 text-sm">
|
||||
{{ __('Delete') }}
|
||||
</x-button>
|
||||
</div>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- Next Button -->
|
||||
<button
|
||||
x-on:click="next"
|
||||
class="text-6xl"
|
||||
:aria-disabled="atEnd"
|
||||
:tabindex="atEnd ? -1 : 0"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': atEnd }"
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
stroke-width="3"><path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 5l7 7-7 7"/></svg>
|
||||
</span>
|
||||
<span class="sr-only">Skip to next slide page</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<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">{{ __('Book Case') }}: {{ $bookCase->title }}</h3>
|
||||
<div class="flex flex-row space-x-2 items-center">
|
||||
<div>
|
||||
@if($orangePill->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('image')" :label="__('Main picture')">
|
||||
<div class="py-4">
|
||||
@if ($image)
|
||||
<div class="text-gray-200">{{ __('Preview') }}:</div>
|
||||
<img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}">
|
||||
@endif
|
||||
@if ($orangePill->getFirstMediaUrl('images'))
|
||||
<div class="text-gray-200">{{ __('Current picture') }}:</div>
|
||||
<img class="h-48 object-contain" src="{{ $orangePill->getFirstMediaUrl('images') }}">
|
||||
@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('orangePill.amount')" :label="__('Amount')">
|
||||
<x-input
|
||||
min="1"
|
||||
type="number"
|
||||
wire:model.debounce="orangePill.amount"
|
||||
label="{{ __('Number of books') }}"
|
||||
placeholder="{{ __('Number of books') }}"
|
||||
corner-hint="{{ __('How many bitcoin books have you put in?') }}"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('orangePill.date')" :label="__('Date')">
|
||||
<x-datetime-picker
|
||||
label="{{ __('Date') }}"
|
||||
placeholder="{{ __('Date') }}"
|
||||
wire:model.defer="orangePill.date"
|
||||
timezone="UTC"
|
||||
user-timezone="{{ config('app.user-timezone') }}"
|
||||
corner-hint="{{ __('When did you put bitcoin books in?') }}"
|
||||
without-time
|
||||
display-format="DD.MM.YYYY"
|
||||
/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('orangePill.comment')" :label="__('Comment')">
|
||||
<x-textarea wire:model.defer="orangePill.comment" label="{{ __('Comment') }}" placeholder="{{ __('Comment') }}"
|
||||
corner-hint="{{ __('For example, what books you put in.') }}"/>
|
||||
</x-input.group>
|
||||
|
||||
<x-input.group :for="md5('orangePill.save')" label="">
|
||||
<x-button primary wire:click="save">
|
||||
<i class="fa fa-thin fa-save"></i>
|
||||
{{ __('Save') }}
|
||||
</x-button>
|
||||
</x-input.group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -33,11 +33,11 @@
|
||||
if(element.op > 0) {
|
||||
const marker = L.circleMarker([element.lat, element.lng], {color: '#f7931a', radius: 8});
|
||||
marker.url = element.url;
|
||||
marker.addTo(map).on('click', e => window.open(e.target.url, '_blank'));
|
||||
marker.addTo(map).on('click', e => window.open(e.target.url, '_self'));
|
||||
} else {
|
||||
const marker = L.circleMarker([element.lat, element.lng], {color: '#111827', radius: 8});
|
||||
marker.url = element.url;
|
||||
marker.addTo(map).on('click', e => window.open(e.target.url, '_blank'));
|
||||
marker.addTo(map).on('click', e => window.open(e.target.url, '_self'));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user