💄 Added dark theme
continuous-integration/drone/push Build is passing Details

master
Alix JEUDI--LEMOINE 1 week ago
parent 3b123256f8
commit d57ac3b312

@ -1,4 +1,4 @@
<div class="min-h-screen bg-gray-100"> <div class="min-h-screen bg-gray-100 dark:bg-gray-950">
<app-navbar *ngIf="authService.isAdmin()"></app-navbar> <app-navbar *ngIf="authService.isAdmin()"></app-navbar>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>

@ -1,18 +1,18 @@
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8">Configuration du système</h1> <h1 class="text-3xl font-bold mb-8 dark:text-white">Configuration du système</h1>
<form (ngSubmit)="saveConfig()" class="max-w-2xl"> <form (ngSubmit)="saveConfig()" class="max-w-2xl">
<div class="bg-white rounded-lg shadow p-6 space-y-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
<!-- Taille maximale des images --> <!-- Taille maximale des images -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Taille maximale des images (MB) Taille maximale des images (MB)
</label> </label>
<input <input
type="number" type="number"
[(ngModel)]="config.max_image_size" [(ngModel)]="config.max_image_size"
name="max_image_size" name="max_image_size"
class="w-full px-3 py-2 border border-gray-300 rounded-md" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
[ngModel]="config.max_image_size / (1024 * 1024)" [ngModel]="config.max_image_size / (1024 * 1024)"
(ngModelChange)="config.max_image_size = $event * 1024 * 1024" (ngModelChange)="config.max_image_size = $event * 1024 * 1024"
/> />
@ -20,33 +20,33 @@
<!-- Nombre maximum d'images par pin --> <!-- Nombre maximum d'images par pin -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Nombre maximum d'images par pin Nombre maximum d'images par pin
</label> </label>
<input <input
type="number" type="number"
[(ngModel)]="config.max_images_per_pin" [(ngModel)]="config.max_images_per_pin"
name="max_images_per_pin" name="max_images_per_pin"
class="w-full px-3 py-2 border border-gray-300 rounded-md" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
/> />
</div> </div>
<!-- Nombre maximum d'images par utilisateur --> <!-- Nombre maximum d'images par utilisateur -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Nombre maximum d'images par utilisateur Nombre maximum d'images par utilisateur
</label> </label>
<input <input
type="number" type="number"
[(ngModel)]="config.max_images_per_user" [(ngModel)]="config.max_images_per_user"
name="max_images_per_user" name="max_images_per_user"
class="w-full px-3 py-2 border border-gray-300 rounded-md" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
/> />
</div> </div>
<!-- Types d'images autorisés --> <!-- Types d'images autorisés -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Types d'images autorisés Types d'images autorisés
</label> </label>
<div class="space-y-2"> <div class="space-y-2">
@ -55,12 +55,12 @@
type="text" type="text"
[value]="imgType" [value]="imgType"
[name]="'type_' + imgType" [name]="'type_' + imgType"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
/> />
<button <button
type="button" type="button"
(click)="removeImageType(imgType)" (click)="removeImageType(imgType)"
class="ml-2 text-red-600 hover:text-red-800" class="ml-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
> >
Supprimer Supprimer
</button> </button>
@ -68,7 +68,7 @@
<button <button
type="button" type="button"
(click)="addImageType()" (click)="addImageType()"
class="text-blue-600 hover:text-blue-800" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
> >
+ Ajouter un type + Ajouter un type
</button> </button>
@ -77,27 +77,27 @@
<!-- Nombre maximum de pins par utilisateur --> <!-- Nombre maximum de pins par utilisateur -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Nombre maximum de pins par utilisateur Nombre maximum de pins par utilisateur
</label> </label>
<input <input
type="number" type="number"
[(ngModel)]="config.max_pins_per_user" [(ngModel)]="config.max_pins_per_user"
name="max_pins_per_user" name="max_pins_per_user"
class="w-full px-3 py-2 border border-gray-300 rounded-md" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
/> />
</div> </div>
<!-- Nombre maximum d'amis par utilisateur --> <!-- Nombre maximum d'amis par utilisateur -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Nombre maximum d'amis par utilisateur Nombre maximum d'amis par utilisateur
</label> </label>
<input <input
type="number" type="number"
[(ngModel)]="config.max_friends_per_user" [(ngModel)]="config.max_friends_per_user"
name="max_friends_per_user" name="max_friends_per_user"
class="w-full px-3 py-2 border border-gray-300 rounded-md" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
/> />
</div> </div>
@ -106,13 +106,13 @@
<button <button
type="button" type="button"
(click)="resetConfig()" (click)="resetConfig()"
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600"
> >
Réinitialiser Réinitialiser
</button> </button>
<button <button
type="submit" type="submit"
class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700" class="px-4 py-2 text-white bg-blue-600 dark:bg-blue-700 rounded-md hover:bg-blue-700 dark:hover:bg-blue-800"
> >
Enregistrer Enregistrer
</button> </button>

@ -1,52 +1,52 @@
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8">Tableau de bord</h1> <h1 class="text-3xl font-bold mb-8 dark:text-white">Tableau de bord</h1>
<!-- Statistiques générales --> <!-- Statistiques générales -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Utilisateurs</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Utilisateurs</h2>
<p class="text-3xl font-bold">{{ stats.general.total_users }}</p> <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_users }}</p>
<p class="text-sm text-gray-500">+{{ stats.last_30_days.new_users }} ce mois</p> <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_users }} ce mois</p>
</div> </div>
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Pins</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Pins</h2>
<p class="text-3xl font-bold">{{ stats.general.total_pins }}</p> <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_pins }}</p>
<p class="text-sm text-gray-500">+{{ stats.last_30_days.new_pins }} ce mois</p> <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_pins }} ce mois</p>
</div> </div>
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Images</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Images</h2>
<p class="text-3xl font-bold">{{ stats.general.total_images }}</p> <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_images }}</p>
<p class="text-sm text-gray-500">+{{ stats.last_30_days.new_images }} ce mois</p> <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_images }} ce mois</p>
</div> </div>
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Amis</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Amis</h2>
<p class="text-3xl font-bold">{{ stats.general.total_friends }}</p> <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_friends }}</p>
</div> </div>
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Stockage</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Stockage</h2>
<p class="text-3xl font-bold">{{ formatBytes(stats.general.total_storage_bytes) }}</p> <p class="text-3xl font-bold dark:text-white">{{ formatBytes(stats.general.total_storage_bytes) }}</p>
</div> </div>
</div> </div>
<!-- Top utilisateurs --> <!-- Top utilisateurs -->
<div class="bg-white rounded-lg shadow p-6 mb-8"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold mb-4">Top utilisateurs</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Top utilisateurs</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full"> <table class="min-w-full">
<thead> <thead>
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Utilisateur</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre de pins</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Nombre de pins</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr *ngFor="let user of stats.top_users"> <tr *ngFor="let user of stats.top_users" class="dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap">{{ user.username }}</td> <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ user.username }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ user.pin_count }}</td> <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ user.pin_count }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -54,20 +54,20 @@
</div> </div>
<!-- Top pins partagés --> <!-- Top pins partagés -->
<div class="bg-white rounded-lg shadow p-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Top pins partagés</h2> <h2 class="text-xl font-semibold mb-4 dark:text-white">Top pins partagés</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full"> <table class="min-w-full">
<thead> <thead>
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titre</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Titre</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre de partages</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Nombre de partages</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr *ngFor="let pin of stats.top_shared_pins"> <tr *ngFor="let pin of stats.top_shared_pins" class="dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap">{{ pin.title }}</td> <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ pin.title }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ pin.share_count }}</td> <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ pin.share_count }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

@ -1,36 +1,39 @@
<nav class="bg-white shadow"> <nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="container mx-auto px-4"> <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-2">
<div class="flex justify-between h-16"> <a routerLink="/" class="flex items-center rtl:space-x-reverse">
<div class="flex"> <img src="./logo.png" class="h-14" alt="Memory Map Logo" />
<div class="flex-shrink-0 flex items-center"> <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden lg:inline">Memory Map Admin</span>
<a routerLink="/" class="text-xl font-bold text-gray-800">MemoryMap Admin</a> </a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> <!-- Menu principal -->
<a <div class="w-full lg:flex lg:w-auto lg:order-1 lg:flex-1 pl-10">
routerLink="/dashboard" <div class="w-full flex flex-col lg:flex-row">
routerLinkActive="border-blue-500 text-gray-900" <ul class="w-full flex p-4 flex-col lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 lg:flex-row lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700">
[routerLinkActiveOptions]="{exact: true}" <li>
class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" <a routerLink="/dashboard"
> routerLinkActive="text-blue-700 dark:text-blue-500"
Tableau de bord [routerLinkActiveOptions]="{exact: true}"
</a> class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
<a Tableau de bord
routerLink="/config" </a>
routerLinkActive="border-blue-500 text-gray-900" </li>
class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" <li>
> <a routerLink="/config"
Configuration routerLinkActive="text-blue-700 dark:text-blue-500"
</a> class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
</div> Configuration
</div> </a>
<div class="flex items-center"> </li>
<button </ul>
(click)="logout()"
class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
Déconnexion
</button>
</div> </div>
</div> </div>
<!-- Bouton de déconnexion -->
<div class="flex lg:order-2">
<button (click)="logout()"
class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
Déconnexion
</button>
</div>
</div> </div>
</nav> </nav>
Loading…
Cancel
Save