Sostituito frontend angular new con frontend angular. Sostituito frontend angular con frontend angular old
This commit is contained in:
Lorenzo Sanesi
@@ -0,0 +1,94 @@
|
||||
@if (!selectedGroupId()) {
|
||||
<div class="p-4 flex flex-col h-full text-white">
|
||||
<header class="mb-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">I Miei Gruppi</h1>
|
||||
<p class="text-slate-400 mt-1">Gestisci i tuoi gruppi o creane di nuovi.</p>
|
||||
</div>
|
||||
<button (click)="toggleCreateMode()" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold p-2 rounded-full transition-colors duration-300 shadow-lg">
|
||||
@if (isCreating()) {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
} @else {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@if (isCreating()) {
|
||||
<div class="bg-slate-800 p-4 rounded-lg border border-slate-700 mb-4 animate-fade-in">
|
||||
<h2 class="text-xl font-bold text-cyan-400 mb-4">Nuovo Gruppo</h2>
|
||||
<form (submit)="$event.preventDefault(); createGroup()">
|
||||
<div class="mb-4">
|
||||
<label for="groupName" class="block text-sm font-medium text-slate-300 mb-2">Nome Gruppo</label>
|
||||
<input type="text" id="groupName" name="groupName"
|
||||
[value]="newGroupName()"
|
||||
(input)="onGroupNameChange($event)"
|
||||
required
|
||||
class="w-full bg-slate-700 border border-slate-600 rounded-md py-2 px-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
|
||||
placeholder="Es. Colleghi d'ufficio">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-slate-300 mb-2">Membri (Amici)</label>
|
||||
<div class="max-h-40 overflow-y-auto space-y-2 bg-slate-700 p-3 rounded-md border border-slate-600">
|
||||
@for (friend of friends(); track friend.id) {
|
||||
<label class="flex items-center space-x-3 cursor-pointer p-2 rounded-md hover:bg-slate-600 transition-colors">
|
||||
<input type="checkbox"
|
||||
(change)="onFriendSelect(friend.id, $event)"
|
||||
[checked]="selectedFriendIds()[friend.id] || false"
|
||||
class="h-5 w-5 rounded bg-slate-800 border-slate-500 text-cyan-500 focus:ring-cyan-600 cursor-pointer">
|
||||
<img class="w-8 h-8 rounded-full" [src]="friend.avatarUrl" [alt]="friend.name">
|
||||
<span class="font-medium text-slate-200">{{ friend.name }}</span>
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 mt-4">
|
||||
<button type="button" (click)="toggleCreateMode()" class="px-4 py-2 rounded-md bg-slate-600 hover:bg-slate-500 text-white font-semibold transition-colors">Annulla</button>
|
||||
<button type="submit"
|
||||
[disabled]="!isFormValid()"
|
||||
[class]="'px-4 py-2 rounded-md font-semibold transition-colors ' + (isFormValid() ? 'bg-cyan-500 hover:bg-cyan-600 text-white' : 'bg-slate-700 text-slate-500 cursor-not-allowed')">
|
||||
Crea Gruppo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
|
||||
<main class="flex-grow overflow-y-auto space-y-4 pr-2 -mr-2">
|
||||
@for (group of groups(); track group.id) {
|
||||
<div (click)="selectGroup(group.id)" class="bg-slate-800 p-4 rounded-lg border border-slate-700 hover:border-cyan-500 transition-colors duration-300 cursor-pointer">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="text-xl font-bold text-cyan-400">{{ group.name }}</h3>
|
||||
<span class="text-sm font-semibold bg-slate-700 text-slate-300 px-2 py-1 rounded-md">{{ group.members.length }} Membri</span>
|
||||
</div>
|
||||
<div class="flex -space-x-2">
|
||||
@for(member of group.members; track member.id) {
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-slate-900" [src]="member.avatarUrl" [alt]="member.name" [title]="member.name">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@empty {
|
||||
@if (!isCreating()) {
|
||||
<div class="text-center text-slate-500 mt-8 flex flex-col items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.282-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.282.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<p>Non fai ancora parte di nessun gruppo.</p>
|
||||
<p class="mt-1">Crea un gruppo per iniziare a scommettere con i tuoi amici!</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
} @else {
|
||||
<app-group-detail [groupId]="selectedGroupId()!" (goBack)="deselectGroup()"></app-group-detail>
|
||||
}
|
||||
Reference in New Issue
Block a user