su-secret-santa/resources/views/livewire/pages/profile.blade.php

300 lines
9.6 KiB
PHP

<?php
use App\Models\Participant;
use App\Services\PostService;
use Illuminate\Support\Facades\Log;
use function Livewire\Volt\{state, mount, rules};
state(['token']);
state([
'participant' => null,
'userData' => null,
'receiverPrompt' => null,
'receiverUserData' => null,
'prompt' => '',
'submissionUrl' => '',
'isEditingPrompt' => false,
'isEditingSubmission' => false,
'submissionData' => null
]);
#todo - check if the post is by them, if not - reject it
rules([
'prompt' => 'string|min:3',
'submissionUrl' => [
'regex:/^https:\/\/sketchersunited\.org\/posts\/\d+$/',
'max:200',
],
]);
mount(function ($token)
{
$this->token = $token;
if ($this->token) {
$this->participant = Participant::findByToken($this->token);
if ($this->participant) {
$this->userData = $this->participant->getUserData();
$this->prompt = $this->participant->prompt ?? '';
if ($this->participant->receiver) {
$this->receiverPrompt = $this->participant->receiver->prompt;
$this->receiverUserData = $this->participant->receiver->getUserData();
if ($this->participant->submission_url) {
$this->submissionUrl = $this->participant->submission_url ?? '';
$this->submissionData = PostService::getPostData($this->participant->submission_url);
if (!$this->submissionData) {
$this->submissionData = null;
}
}
}
}
}
});
$saveEditingPrompt = function ()
{
if ($this->participant) {
$this->validate();
$this->participant->prompt = $this->prompt;
$this->participant->save();
$this->isEditingPrompt = false;
}
};
$cancelEditingPrompt = function ()
{
$this->prompt = $this->participant->prompt ?? '';
$this->isEditingPrompt = false;
};
$saveEditingSubmission = function ()
{
if ($this->participant) {
$this->validate();
$this->participant->submission_url = $this->submissionUrl;
$this->participant->save();
$this->isEditingSubmission = false;
}
};
$cancelEditingSubmission = function ()
{
$this->submissionUrl = $this->participant->submission_url ?? '';
$this->isEditingSubmission = false;
};
?>
<div>
@if($participant)
@if($userData)
<div class="user-profile">
<div class="avatar-container">
<img src="{{ $userData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
</div>
<div class="username-container">
You are... <h1 style="margin-bottom:0;padding:0"> &commat;{{ $userData['data']['username'] ?? 'Unknown' }}</h1>
</div>
</div>
@endif
@if($isEditingPrompt)
<div class="other-content">
<div style="margin-bottom: 15pt;">
Your prompt is...
<br>
</div>
<div>
<form wire:submit="saveEditingPrompt">
<input type="text" id="prompt" wire:model="prompt">
@error('prompt')
<span class="error">{{ $message }}</span>
@enderror
<br><br>
<button type="submit">Save</button>
<button type="button" wire:click="cancelEditingPrompt">Cancel</button>
</form>
</div>
</div>
@else
<div class="other-content">
<div>
Your prompt is...
</div>
<div>
<h2>
"{{ $prompt ?: 'No prompt set yet.' }}"
</h2>
</div>
<button wire:click="$set('isEditingPrompt', true)">
{{ $prompt ? 'Edit Prompt' : 'Add Prompt' }}
</button>
<div>
<br>
<small style="color:rgba(255,255,255,0.5)">this is what others will draw for you!</small>
</div>
</div>
@endif
<div class="other-content">
@if($participant->giving_id)
You are giving to...
@if($receiverUserData)
<div class="user-profile">
<div class="avatar-container">
<img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
</div>
<div class="username-container">
<h1> &commat;{{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
</div>
</div>
@endif
<small style="color:rgba(255,255,255,0.5)">want to roll for a different person e.g. you blocked this person? you can dm @username</small>
<br><br>Their prompt is...
<div class="other-content">
{{$receiverPrompt}} Nothing yet, probably!
</div>
</div>
<div class="other-content">
<h2> Are you done? </h2>
<p>You will be able to link to your gift below once submissions are accepted on 22nd December.</p>
<small style="color:rgba(255,255,255,0.5)">submissions will be accepted up until 5th of january but before then is much more appreciated!</small>
{{-- @if($isEditingSubmission)--}}
{{-- <form wire:submit="saveEditingSubmission">--}}
{{-- <input type="text" id="submissionUrl" wire:model="submissionUrl">--}}
{{-- @error('submissionUrl')--}}
{{-- <span class="error">{{ $message }}</span>--}}
{{-- @enderror--}}
{{-- <button type="submit">Save</button>--}}
{{-- <button type="button" wire:click="cancelEditingSubmission">Cancel</button>--}}
{{-- </form>--}}
{{-- @else--}}
{{-- <div class="submissionUrl-display">--}}
{{-- <p>--}}
{{-- Your submission URL is: <span--}}
{{-- id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>--}}
{{-- </p>--}}
{{-- <button wire:click="$set('isEditingSubmission', true)">--}}
{{-- {{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}--}}
{{-- </button>--}}
{{-- </div>--}}
{{-- @endif--}}
{{-- @if($submissionData)--}}
{{-- <h1>Your submission:</h1>--}}
{{-- <div id="postView">--}}
{{-- <a href="{{$submissionUrl}}">--}}
{{-- <h1>{{$submissionData['post']['title']}}</h1>--}}
{{-- <img src="{{$submissionData['post']['resource_url']}}">--}}
{{-- </a>--}}
{{-- </div>--}}
{{-- @endif--}}
@elseif($participant->desperate)
<p>You're in a bind!</p>
@else
<p>You haven't been assigned anyone yet. Initial assignments will be made on 13th December.</p>
@endif
</div>
<div class="other-content">
<a
href="/withdraw/{{$token}}"
>
Withdraw from Secret Sketchers...?
</a>
</div>
@endif
<style>
.user-profile {
display: flex;
align-items: center;
padding: 15px;
background-color: rgba(0,0,0,0.3);
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
margin: 15px;
}
.other-content {
display: block;
padding: 15px;
background-color: rgba(0,0,0,0.3);
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
margin: 15px;
}
.prompt-content {
margin-bottom: 10px;
}
.prompt-content h2 {
margin-top: 5px;
margin-bottom: 5px;
}
.avatar-container {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background-color: #ccc;
flex-shrink: 0;
}
.avatar-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.username-container {
flex-grow: 1;
min-width: 0;
}
.username-container h1 {
margin: 0;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body {
background-color: #021202;
margin: 10pt;
font-family: sans-serif;
background-image: url("../img/christmas-bg.png");
background-size: 140px;
color: white;
overflow: hidden;
}
div {
color: white;
}
a {
color: white;
font-weight: bold;
}
</style>
</div>