oskarb/riksdagen-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New design

Browse Source
This commit is contained in:
Oskar-Mikael
2025-12-20 17:44:35 +01:00
parent c693f7c7ed
commit bc25bb1626
12 changed files with 826 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
resources/views/livewire/person/show.blade.php
View File

@@ -1,57 +1,159 @@
<div class="container mx-auto py-8">
@if($person)
<div class="flex flex-col md:flex-row gap-8">
<div>
<img src="{{ $person->bild_url_max ?? '' }}" alt="{{ $person->tilltalsnamn }}" class="w-48 h-64 object-cover rounded shadow">
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
<div class="container mx-auto py-12 px-4">
<!-- Breadcrumb Navigation -->
<nav class="mb-8" aria-label="Breadcrumb">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 px-4 py-3">
<ol class="flex items-center space-x-2 text-sm text-gray-600">
<li>
<a wire:navigate href="{{ route('home') }}" class="text-blue-600 hover:text-blue-700 flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
</path>
</svg>
Hem
</a>
</li>
<li>
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</li>
<li>
<a wire:navigate href="{{ route('person.search') }}" class="text-blue-600 hover:text-blue-700">Sök
Ledamöter</a>
</li>
<li>
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</li>
<li class="font-medium text-gray-900">
{{ $person->tilltalsnamn ?? 'Laddar...' }} {{ $person->efternamn ?? '' }}
</li>
</ol>
</div>
<div class="flex-1">
<h1 class="text-3xl font-bold mb-2">{{ $person->tilltalsnamn }} {{ $person->efternamn }}</h1>
<div class="mb-2 text-lg text-gray-500">{{ $person->parti }} | {{ $person->valkrets }}</div>
<div class="mb-2">Född: {{ $person->fodd_ar }} | Kön: {{ ucfirst($person->kon) }}</div>
<div class="mb-2">Status: {{ $person->status }}</div>
<div class="mb-2">E-post: {{ str_replace('[på]', '@', collect($person->personuppgift->uppgift ?? [])->firstWhere('kod', 'Officiell e-postadress')->uppgift[0] ?? '-') }}</div>
<div class="mb-4">
<a href="{{ $this->riksdagen_url }}" class="text-blue-600 underline" target="_blank">Visa på riksdagen.se</a>
</nav>
@if ($person)
<!-- Main Profile Section -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8 mb-8">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-48">
<img src="{{ $person->bild_url_max ?? '' }}" alt="{{ $person->tilltalsnamn }}"
class="w-full h-64 md:w-48 object-cover rounded-lg shadow-lg border border-gray-200">
</div>
<div class="flex-1">
<div class="mb-6">
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ $person->tilltalsnamn }}
{{ $person->efternamn }} ({{ $person->parti }})</h1>
<div class="flex flex-wrap items-center gap-4 mb-4">
<span
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 grap-2">
{{ App\Enums\Parties::from($person->parti)->label() }}
<img src="{{ App\Enums\Parties::from($person->parti)->logo() }}" width="32">
</span>
<span class="text-gray-600">{{ $person->valkrets }} valkrets</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm font-medium text-gray-500 mb-1">Född</div>
<div class="text-gray-900">{{ $person->fodd_ar }}</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm font-medium text-gray-500 mb-1">Kön</div>
<div class="text-gray-900">{{ ucfirst($person->kon) }}</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm font-medium text-gray-500 mb-1">Status</div>
<div class="text-gray-900">{{ $person->status }}</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm font-medium text-gray-500 mb-1">E-post</div>
<div class="text-gray-900 text-sm">
{{ str_replace('[på]', '@', collect($person->personuppgift->uppgift ?? [])->firstWhere('kod', 'Officiell e-postadress')->uppgift[0] ?? '-') }}
</div>
</div>
</div>
<a href="{{ $this->riksdagen_url }}" target="_blank"
class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
</path>
</svg>
Visa på riksdagen.se
</a>
</div>
</div>
</div>
<!-- Assignments Section -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 01-2 2H10a2 2 0 01-2-2V6">
</path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900">Uppdrag</h2>
</div>
<h2 class="text-xl font-semibold mt-6 mb-4">Uppdrag</h2>
<!-- Uppdrag tabs -->
<div class="border-b border-gray-200 mb-4">
<div class="border-b border-gray-200 mb-6">
<nav class="-mb-px flex space-x-8">
<button
wire:click="selectUppdragTab('current')"
class="py-2 cursor-pointer px-1 border-b-2 font-medium text-sm {{ $selectedUppdragTab == 'current' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
Pågående ({{ count($currentUppdrag) }})
<button wire:click="selectUppdragTab('current')"
class="py-3 px-1 border-b-2 font-medium text-sm transition-colors {{ $selectedUppdragTab == 'current' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
<span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Pågående ({{ count($currentUppdrag) }})
</span>
</button>
<button
wire:click="selectUppdragTab('previous')"
class="py-2 cursor-pointer px-1 border-b-2 font-medium text-sm {{ $selectedUppdragTab == 'previous' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
Tidigare ({{ count($previousUppdrag) }})
<button wire:click="selectUppdragTab('previous')"
class="py-3 px-1 border-b-2 font-medium text-sm transition-colors {{ $selectedUppdragTab == 'previous' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
<span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Tidigare ({{ count($previousUppdrag) }})
</span>
</button>
</nav>
</div>
<!-- Current assignments -->
@if($selectedUppdragTab == 'current' && !empty($currentUppdrag))
@if ($selectedUppdragTab == 'current' && !empty($currentUppdrag))
<div class="space-y-3">
@foreach($currentUppdrag as $uppdrag)
@foreach ($currentUppdrag as $uppdrag)
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-semibold text-green-800">{{ $uppdrag->roll_kod }}</h4>
{{-- @if(!empty($uppdrag->uppgift[0]) && is_array($uppdrag->uppgift))
{{-- @if (!empty($uppdrag->uppgift[0]) && is_array($uppdrag->uppgift))
<p class="text-sm text-green-700 mt-1">{{ implode(', ', $uppdrag->uppgift) }}</p>
@endif --}}
<p class="text-sm text-green-600 mt-2">
<span class="font-medium">Typ:</span> {{ ucfirst($uppdrag->typ) }}
@if(isset($uppdrag->status) && $uppdrag->status)
@if (isset($uppdrag->status) && $uppdrag->status)
| <span class="font-medium">Status:</span> {{ $uppdrag->status }}
@endif
</p>
</div>
<div class="text-right text-sm text-green-600">
<div>Från: {{ Carbon\Carbon::parse($uppdrag->from)->format('Y-m-d') }}</div>
@if(!empty($uppdrag->tom))
@if (!empty($uppdrag->tom))
<div>Till: {{ Carbon\Carbon::parse($uppdrag->tom)->format('Y-m-d') }}</div>
@else
<div class="font-semibold text-green-700">Pågående</div>
@@ -66,25 +168,26 @@
@endif
<!-- Previous assignments -->
@if($selectedUppdragTab == 'previous' && !empty($previousUppdrag))
@if ($selectedUppdragTab == 'previous' && !empty($previousUppdrag))
<div class="space-y-3">
@foreach($previousUppdrag as $uppdrag)
@foreach ($previousUppdrag as $uppdrag)
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-semibold text-gray-800">{{ $uppdrag->roll_kod }}</h4>
{{-- @if(!empty($uppdrag->uppgift[0]) && is_array($uppdrag->uppgift))
{{-- @if (!empty($uppdrag->uppgift[0]) && is_array($uppdrag->uppgift))
<p class="text-sm text-gray-700 mt-1">{{ implode(', ', $uppdrag->uppgift) }}</p>
@endif --}}
<p class="text-sm text-gray-600 mt-2">
<span class="font-medium">Typ:</span> {{ ucfirst($uppdrag->typ) }}
@if(isset($uppdrag->status) && $uppdrag->status)
@if (isset($uppdrag->status) && $uppdrag->status)
| <span class="font-medium">Status:</span> {{ $uppdrag->status }}
@endif
</p>
</div>
<div class="text-right text-sm text-gray-600">
<div>{{ Carbon\Carbon::parse($uppdrag->from)->format('Y-m-d') }} - {{ Carbon\Carbon::parse($uppdrag->tom)->format('Y-m-d') }}</div>
<div>{{ Carbon\Carbon::parse($uppdrag->from)->format('Y-m-d') }} -
{{ Carbon\Carbon::parse($uppdrag->tom)->format('Y-m-d') }}</div>
<div class="text-xs text-gray-500 mt-1">
{{ Carbon\Carbon::parse($uppdrag->from)->diffForHumans(Carbon\Carbon::parse($uppdrag->tom), true) }}
</div>
@@ -96,24 +199,27 @@
@elseif($selectedUppdragTab == 'previous' && empty($previousUppdrag))
<p class="text-gray-500 italic">Inga tidigare uppdrag registrerade.</p>
@endif
<h2 class="text-xl font-semibold mt-6 mb-2">Biografi</h2>
<ul class="list-disc ml-6">
@foreach(collect($person->personuppgift->uppgift ?? [])->where('typ', 'biografi') as $bio)
<li>
<strong>{{ $bio->kod }}:</strong> {{ is_array($bio->uppgift) ? implode(', ', $bio->uppgift) : $bio->uppgift }}
</li>
@endforeach
</ul>
@if(!empty($votesByYear))
<h2 class="text-xl font-semibold mt-6 mb-4">Voteringar</h2>
</div>
@if (!empty($votesByYear))
<!-- Voting Section -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4">
</path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900">Voteringar</h2>
</div>
<!-- Year tabs -->
<div class="border-b border-gray-200 mb-4">
<nav class="-mb-px flex space-x-8">
@foreach(array_keys($votesByYear) as $year)
<button
wire:click="selectYear('{{ $year }}')"
@foreach (array_keys($votesByYear) as $year)
<button wire:click="selectYear('{{ $year }}')"
class="cursor-pointer py-2 px-1 border-b-2 font-medium text-sm {{ $selectedYear == $year ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
{{ $year }}
</button>
@@ -121,88 +227,124 @@
</nav>
</div>
@if($selectedYear && isset($votesByYear[$selectedYear]))
@if ($selectedYear && isset($votesByYear[$selectedYear]))
<!-- Voting Statistics Chart -->
<div class="mb-8 bg-white p-6 rounded-lg shadow border">
<h3 class="text-lg font-semibold mb-4">Röststatistik för {{ $selectedYear }}</h3>
@if(!empty($this->votingStatistics))
<div class="mb-8 bg-gray-200 p-6 rounded-lg shadow border">
@if (!empty($this->votingStatistics))
<div class="flex flex-col lg:flex-row gap-6">
<div class="lg:w-1/2">
<livewire:livewire-pie-chart
:pie-chart-model="$this->pieChartModel"
key="{{ 'pie-chart-'.$selectedYear }}"
/>
<div style="height: 23rem;">
<livewire:livewire-pie-chart :pie-chart-model="$this->pieChartModel"
key="{{ 'pie-chart-' . $selectedYear }}" />
</div>
<div class="lg:w-1/2">
<div class="lg:w-1/2 my-auto">
<div class="space-y-2">
@foreach($this->votingStatistics as $voteType => $count)
@php($totalVotes = array_sum($this->votingStatistics))
@foreach ($this->votingStatistics as $voteType => $count)
<div class="flex justify-between items-center p-3 bg-gray-50 rounded">
<span class="font-medium">{{ $voteType }}</span>
<span class="text-lg font-bold">{{ $count }}</span>
<span class="text-black font-medium">{{ $voteType }}</span>
<span class="text-black text-lg font-bold">{{ $count }}
({{ round(($count / $totalVotes) * 100, 2) }}%)</span>
</div>
@endforeach
<div class="flex justify-between items-center p-3 bg-blue-50 rounded border-t-2 border-blue-500">
<span class="font-bold">Totalt antal voteringar</span>
<span class="text-lg font-bold">{{ array_sum($this->votingStatistics) }}</span>
<div
class="flex justify-between items-center p-3 bg-blue-50 rounded border-t-2 border-blue-500">
<span class="text-black font-bold">Totalt antal voteringar</span>
<span
class="text-black text-lg font-bold">{{ array_sum($this->votingStatistics) }}</span>
</div>
</div>
</div>
</div>
@else
<p class="text-gray-500">Ingen röststatistik tillgänglig för detta år.</p>
<p class="text-gray-500">Ingen voteringsstatistik tillgänglig för detta år.</p>
@endif
</div>
@endif
<!-- Votes table -->
@if($selectedYear && isset($votesByYear[$selectedYear]))
@if ($selectedYear && isset($votesByYear[$selectedYear]))
<div class="overflow-x-auto" style="overflow-y: auto; display: block; max-height: 400px;">
<table class="min-w-full bg-white border border-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Datum</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beteckning</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Punkt</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Röst</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avser</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Votering</th>
<th
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Datum</th>
<th
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Beteckning</th>
<th
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Punkt</th>
<th
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Röst</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@foreach($votesByYear[$selectedYear] as $vote)
<tr class="hover:bg-gray-50 bg-gray-300">
<tbody class="divide-y divide-gray-100">
@foreach ($votesByYear[$selectedYear] as $vote)
<tr class="bg-gray-200">
<td class="px-4 py-2 text-sm text-gray-900">
{{ Carbon\Carbon::parse($vote->systemdatum)->format('Y-m-d') }}
</td>
<td class="px-4 py-2 text-sm">
<a href="{{ $vote->votering_url_xml }}" class="text-blue-600 hover:underline" target="_blank">
<a href="{{ $vote->votering_url_xml }}"
class="text-blue-600 hover:underline" target="_blank">
{{ $vote->beteckning }}
</a>
</td>
<td class="px-4 py-2 text-sm text-gray-900">{{ $vote->punkt }}</td>
<td class="px-4 py-2 text-sm">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
{{ $vote->rost === 'Ja' ? 'bg-green-100 text-green-800' :
($vote->rost === 'Nej' ? 'bg-red-100 text-red-800' :
'bg-gray-100 text-gray-800') }}">
<span
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full
{{ $vote->rost === 'Ja'
? 'bg-green-100 text-green-800'
: ($vote->rost === 'Nej'
? 'bg-red-100 text-red-800'
: 'bg-gray-100 text-gray-800') }}">
{{ $vote->rost }}
</span>
</td>
<td class="px-4 py-2 text-sm text-gray-900">{{ $vote->avser }}</td>
<td class="px-4 py-2 text-sm text-gray-900">{{ $vote->votering }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
@endif
</div>
</div>
@else
<div class="text-red-600">Personen kunde inte hittas.</div>
@endif
<div class="mt-10 text-sm text-gray-500">
Källa: Sveriges riksdag (<a href="https://riksdagen.se/sv/" class="text-blue-600 underline" target="_blank">riksdagen.se</a>)
@endif
</div>
<!-- Biography Section -->
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900">Biografi</h2>
</div>
<div class="space-y-4">
@foreach (collect($person->personuppgift->uppgift ?? [])->where('typ', 'biografi') as $bio)
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-gray-900 mb-2">{{ $bio->kod }}</div>
<div class="text-gray-700">
{{ is_array($bio->uppgift) ? implode(', ', $bio->uppgift) : $bio->uppgift }}</div>
</div>
@endforeach
</div>
</div>
@else
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8 text-center">
<svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">Person inte hittad</h3>
<p class="text-gray-600">Personen kunde inte hittas i databasen.</p>
</div>
@endif
</div>
</div>