- altro aggiornamento restying
- Invio RIS aggiornato - Eventi - Home Page restyling
This commit is contained in:
Surya Paolo
File diff suppressed because it is too large
Load Diff
@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { CRISBalanceBar } from '@/components/CRISBalanceBar';
|
||||
import { tools } from '@tools';
|
||||
import { useUserStore } from 'app/src/store';
|
||||
import { useCircuitStore, useGlobalStore, useUserStore } from 'app/src/store';
|
||||
|
||||
const isTest = true; // Cambia a false in produzione
|
||||
|
||||
@@ -15,8 +15,8 @@ export default defineComponent({
|
||||
// State
|
||||
const showAnnunciDialog = ref(false);
|
||||
const showBannScambio = ref(true);
|
||||
const walletSectionOpen = ref(false);
|
||||
|
||||
const selectedCircuit = ref<'provinciale' | 'italia'>('provinciale');
|
||||
const handshakesView = ref<'mine' | 'all'>('mine');
|
||||
|
||||
const transactionsView = ref<'mine' | 'all'>('mine');
|
||||
@@ -60,12 +60,9 @@ export default defineComponent({
|
||||
const lastTradeTime = ref('Mai');
|
||||
|
||||
const userStore = useUserStore()
|
||||
const circuitStore = useCircuitStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
// Organizzazioni
|
||||
const organizations = ref<any[]>([
|
||||
// Esempio struttura:
|
||||
// { initial: 'AS', name: 'Associazione Locale', membersCount: 45 }
|
||||
]);
|
||||
|
||||
// Telegram
|
||||
const telegramLinks = ref<any[]>([
|
||||
@@ -78,6 +75,8 @@ export default defineComponent({
|
||||
const hasOrganizations = computed(() => organizations.value.length > 0);
|
||||
const hasTelegramLinks = computed(() => telegramLinks.value.length > 0);
|
||||
|
||||
const organizations = computed(() => globalStore.getMyGroups())
|
||||
|
||||
// ========== METODI DA IMPLEMENTARE ==========
|
||||
|
||||
// Dialog Annunci
|
||||
@@ -193,7 +192,7 @@ export default defineComponent({
|
||||
|
||||
const openOrganization = (org: any) => {
|
||||
// TODO: aprire dettaglio organizzazione
|
||||
// $router.push(`/groups/${org.id}`)
|
||||
$router.push(`/grp/${org.groupname}`)
|
||||
};
|
||||
|
||||
const goToAllOrganizations = () => {
|
||||
@@ -217,296 +216,6 @@ export default defineComponent({
|
||||
// $router.push('/info')
|
||||
};
|
||||
|
||||
const loadTestData = () => {
|
||||
if (!isTest) return;
|
||||
|
||||
// Circuito Provinciale
|
||||
circuits.value.provinciale = {
|
||||
title: 'RIS Provinciale',
|
||||
availableBalance: 50,
|
||||
realBalance: -50,
|
||||
trustLimit: -100,
|
||||
maxAccumulation: 200,
|
||||
totalTransactions: 15,
|
||||
sentCount: 8,
|
||||
receivedCount: 7,
|
||||
uniqueMembers: 12,
|
||||
lastTradeTime: '2 giorni fa',
|
||||
recentTransactions: [
|
||||
{ userInitial: 'M', description: 'Ortaggi freschi', time: '2h fa', amount: 15 },
|
||||
{
|
||||
userInitial: 'L',
|
||||
description: 'Lezione chitarra',
|
||||
time: '5h fa',
|
||||
amount: -25,
|
||||
},
|
||||
{
|
||||
userInitial: 'G',
|
||||
description: 'Riparazione bici',
|
||||
time: '1 giorno fa',
|
||||
amount: 30,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Circuito Italia
|
||||
circuits.value.italia = {
|
||||
title: 'RIS Italia',
|
||||
availableBalance: -50,
|
||||
realBalance: 150,
|
||||
trustLimit: -200,
|
||||
maxAccumulation: 400,
|
||||
totalTransactions: 8,
|
||||
sentCount: 3,
|
||||
receivedCount: 5,
|
||||
uniqueMembers: 7,
|
||||
lastTradeTime: '5 giorni fa',
|
||||
recentTransactions: [
|
||||
{
|
||||
userInitial: 'A',
|
||||
description: 'Consulenza legale',
|
||||
time: '3 giorni fa',
|
||||
amount: -80,
|
||||
},
|
||||
{
|
||||
userInitial: 'F',
|
||||
description: 'Prodotti artigianali',
|
||||
time: '4 giorni fa',
|
||||
amount: 50,
|
||||
},
|
||||
{
|
||||
userInitial: 'S',
|
||||
description: 'Corso di cucina',
|
||||
time: '5 giorni fa',
|
||||
amount: -40,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Transazioni community (tutti)
|
||||
allTransactions.value = [
|
||||
{
|
||||
fromInitial: 'M',
|
||||
toInitial: 'L',
|
||||
fromName: 'Mario',
|
||||
toName: 'Laura',
|
||||
amount: 25,
|
||||
time: '1h fa',
|
||||
},
|
||||
{
|
||||
fromInitial: 'G',
|
||||
toInitial: 'C',
|
||||
fromName: 'Giovanni',
|
||||
toName: 'Chiara',
|
||||
amount: 40,
|
||||
time: '2h fa',
|
||||
},
|
||||
{
|
||||
fromInitial: 'P',
|
||||
toInitial: 'A',
|
||||
fromName: 'Paolo',
|
||||
toName: 'Anna',
|
||||
amount: 15,
|
||||
time: '3h fa',
|
||||
},
|
||||
];
|
||||
// Community
|
||||
invitesSent.value = 7;
|
||||
|
||||
myHandshakes.value = [
|
||||
{ userInitial: 'M', name: 'Mario Rossi', time: '2 giorni fa' },
|
||||
{ userInitial: 'L', name: 'Laura Bianchi', time: '3 giorni fa' },
|
||||
{ userInitial: 'G', name: 'Giovanni Verdi', time: '1 settimana fa' },
|
||||
{ userInitial: 'C', name: 'Chiara Neri', time: '2 settimane fa' },
|
||||
{ userInitial: 'P', name: 'Paolo Conti', time: '3 settimane fa' },
|
||||
];
|
||||
|
||||
allHandshakes.value = [
|
||||
{
|
||||
user1Initial: 'A',
|
||||
user2Initial: 'B',
|
||||
user1Name: 'Anna',
|
||||
user2Name: 'Bruno',
|
||||
time: '1h fa',
|
||||
},
|
||||
{
|
||||
user1Initial: 'C',
|
||||
user2Initial: 'D',
|
||||
user1Name: 'Carlo',
|
||||
user2Name: 'Diana',
|
||||
time: '3h fa',
|
||||
},
|
||||
{
|
||||
user1Initial: 'E',
|
||||
user2Initial: 'F',
|
||||
user1Name: 'Elena',
|
||||
user2Name: 'Franco',
|
||||
time: '5h fa',
|
||||
},
|
||||
{
|
||||
user1Initial: 'G',
|
||||
user2Initial: 'H',
|
||||
user1Name: 'Giulia',
|
||||
user2Name: 'Hugo',
|
||||
time: '1 giorno fa',
|
||||
},
|
||||
{
|
||||
user1Initial: 'I',
|
||||
user2Initial: 'L',
|
||||
user1Name: 'Irene',
|
||||
user2Name: 'Luca',
|
||||
time: '2 giorni fa',
|
||||
},
|
||||
];
|
||||
|
||||
// Eventi test data con immagini
|
||||
upcomingEventsCount.value = 7;
|
||||
recentEvents.value = [
|
||||
{
|
||||
day: '15',
|
||||
month: 'DIC',
|
||||
title: 'Mercatino di Natale',
|
||||
location: 'Roma Centro',
|
||||
id: 1,
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
day: '20',
|
||||
month: 'DIC',
|
||||
title: 'Corso di Panificazione',
|
||||
location: 'Milano',
|
||||
id: 2,
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
day: '22',
|
||||
month: 'DIC',
|
||||
title: 'Scambio Semi e Piante',
|
||||
location: 'Bologna',
|
||||
id: 3,
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
day: '28',
|
||||
month: 'DIC',
|
||||
title: 'Incontro Produttori Locali',
|
||||
location: 'Firenze',
|
||||
id: 4,
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
day: '05',
|
||||
month: 'GEN',
|
||||
title: 'Festa della Comunità',
|
||||
location: 'Torino',
|
||||
id: 5,
|
||||
image: '',
|
||||
},
|
||||
];
|
||||
|
||||
// Scambi test data
|
||||
recentTrades.value = [
|
||||
{
|
||||
userInitial: 'M',
|
||||
description: 'Scambio ortaggi freschi',
|
||||
time: '2h fa',
|
||||
amount: 15,
|
||||
},
|
||||
{
|
||||
userInitial: 'L',
|
||||
description: 'Lezione di chitarra',
|
||||
time: '5h fa',
|
||||
amount: -25,
|
||||
},
|
||||
{
|
||||
userInitial: 'G',
|
||||
description: 'Riparazione bicicletta',
|
||||
time: '1 giorno fa',
|
||||
amount: 30,
|
||||
},
|
||||
{
|
||||
userInitial: 'A',
|
||||
description: 'Pane fatto in casa',
|
||||
time: '2 giorni fa',
|
||||
amount: -10,
|
||||
},
|
||||
{
|
||||
userInitial: 'S',
|
||||
description: 'Consulenza informatica',
|
||||
time: '3 giorni fa',
|
||||
amount: 40,
|
||||
},
|
||||
];
|
||||
|
||||
// Statistiche test data
|
||||
totalMembers.value = 342;
|
||||
totalTrades.value = 1567;
|
||||
totalEvents.value = 89;
|
||||
|
||||
// Organizzazioni test data
|
||||
organizations.value = [
|
||||
{ initial: 'AS', name: 'Associazione Scambio Locale', membersCount: 45, id: 1 },
|
||||
{ initial: 'GP', name: 'Gruppo Produttori Bio', membersCount: 32, id: 2 },
|
||||
{ initial: 'CE', name: 'Comunità Energetica', membersCount: 28, id: 3 },
|
||||
{ initial: 'RT', name: 'Rete Tempo', membersCount: 56, id: 4 },
|
||||
{ initial: 'OC', name: 'Orto Condiviso', membersCount: 23, id: 5 },
|
||||
{ initial: 'LB', name: 'La Banca del Tempo', membersCount: 41, id: 6 },
|
||||
{ initial: 'MP', name: 'Mercato Popolare', membersCount: 38, id: 7 },
|
||||
{ initial: 'CC', name: 'Casa Comune', membersCount: 19, id: 8 },
|
||||
{ initial: 'SF', name: 'Sharing Food', membersCount: 27, id: 9 },
|
||||
{ initial: 'EA', name: 'Economia Alternativa', membersCount: 34, id: 10 },
|
||||
];
|
||||
|
||||
// Telegram test data con immagini
|
||||
telegramLinks.value = [
|
||||
{
|
||||
title: 'Canale Principale RISO',
|
||||
url: 'https://t.me/riso_italia',
|
||||
image: '/images/telegram-main.jpg',
|
||||
},
|
||||
{
|
||||
title: 'Gruppo Scambi Locali',
|
||||
url: 'https://t.me/riso_scambi',
|
||||
image: '/images/telegram-scambi.jpg',
|
||||
},
|
||||
{
|
||||
title: 'Eventi e Incontri',
|
||||
url: 'https://t.me/riso_eventi',
|
||||
image: '/images/telegram-eventi.jpg',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// Dati circuiti
|
||||
const circuits = ref({
|
||||
provinciale: {
|
||||
availableBalance: 0,
|
||||
realBalance: 0,
|
||||
trustLimit: -100,
|
||||
maxAccumulation: 200,
|
||||
totalTransactions: 0,
|
||||
sentCount: 0,
|
||||
receivedCount: 0,
|
||||
uniqueMembers: 0,
|
||||
lastTradeTime: 'Mai',
|
||||
recentTransactions: [] as any[],
|
||||
title: 'RIS Provinciale',
|
||||
},
|
||||
italia: {
|
||||
availableBalance: 0,
|
||||
realBalance: 0,
|
||||
trustLimit: -200,
|
||||
maxAccumulation: 400,
|
||||
totalTransactions: 0,
|
||||
sentCount: 0,
|
||||
receivedCount: 0,
|
||||
uniqueMembers: 0,
|
||||
lastTradeTime: 'Mai',
|
||||
recentTransactions: [] as any[],
|
||||
title: 'RIS Italia',
|
||||
},
|
||||
});
|
||||
|
||||
// Dati community
|
||||
const invitesSent = ref(0);
|
||||
const myHandshakes = ref<any[]>([]);
|
||||
@@ -516,11 +225,6 @@ export default defineComponent({
|
||||
const activeCircuitsCount = ref(2);
|
||||
const totalCircuitsAvailable = ref(12);
|
||||
|
||||
// Computed per circuito corrente
|
||||
const currentCircuitData = computed(() => {
|
||||
return circuits.value[selectedCircuit.value];
|
||||
});
|
||||
|
||||
// Metodi
|
||||
const openTransaction = (tx: any) => {
|
||||
// TODO: aprire dettaglio transazione
|
||||
@@ -535,7 +239,7 @@ export default defineComponent({
|
||||
// $router.push('/circuits')
|
||||
};
|
||||
|
||||
loadTestData();
|
||||
//loadTestData();
|
||||
|
||||
onMounted(() => {
|
||||
showBannScambio.value = tools.getCookieBool('bann_scambio', true);
|
||||
@@ -605,10 +309,7 @@ export default defineComponent({
|
||||
uniqueMembers,
|
||||
lastTradeTime,
|
||||
goToCircuits,
|
||||
selectedCircuit,
|
||||
handshakesView,
|
||||
circuits,
|
||||
currentCircuitData,
|
||||
invitesSent,
|
||||
myHandshakes,
|
||||
allHandshakes,
|
||||
@@ -622,6 +323,8 @@ export default defineComponent({
|
||||
transactionsView,
|
||||
allTransactions,
|
||||
userStore,
|
||||
walletSectionOpen,
|
||||
circuitStore,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,614 +1,168 @@
|
||||
<template>
|
||||
<div class="riso-modern-home">
|
||||
<!-- Hero Section: Card Principali -->
|
||||
<!-- Header -->
|
||||
<header class="riso-header">
|
||||
<div class="header-left">
|
||||
<q-avatar
|
||||
size="44px"
|
||||
class="header-avatar"
|
||||
>
|
||||
<span class="header-avatar-text">
|
||||
{{ (userStore.my.username || 'R').slice(0, 1).toUpperCase() }}
|
||||
</span>
|
||||
</q-avatar>
|
||||
|
||||
<div class="header-text">
|
||||
<div class="header-greeting">
|
||||
Ciao, <span class="u-strong">{{ userStore.my.username }}</span>
|
||||
</div>
|
||||
<div class="header-sub">Rete Italiana Scambio Orizzontale</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="help_outline"
|
||||
class="header-action-btn"
|
||||
aria-label="Guida"
|
||||
@click="openGuide"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section: Azioni principali -->
|
||||
<section class="hero-cards">
|
||||
<!-- Card Annunci -->
|
||||
<!-- Annunci -->
|
||||
<div
|
||||
class="hero-card gradient-primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
v-ripple
|
||||
@click="openAnnunciDialog"
|
||||
@keyup.enter="openAnnunciDialog"
|
||||
@keyup.space.prevent="openAnnunciDialog"
|
||||
>
|
||||
<q-icon
|
||||
name="campaign"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="card-title">Annunci</span>
|
||||
<span class="card-subtitle">Beni, Servizi, Ospitalità</span>
|
||||
<div class="hero-card-top">
|
||||
<div class="hero-icon">
|
||||
<q-icon
|
||||
name="campaign"
|
||||
size="1.6rem"
|
||||
/>
|
||||
</div>
|
||||
<q-icon
|
||||
name="chevron_right"
|
||||
size="sm"
|
||||
class="hero-chevron"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="hero-card-body">
|
||||
<div class="card-title">Annunci</div>
|
||||
<div class="card-subtitle">Beni · Servizi · Ospitalità</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Circuiti RIS -->
|
||||
<!-- Circuiti -->
|
||||
<div
|
||||
class="hero-card gradient-success"
|
||||
class="hero-card gradient-secondary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
v-ripple
|
||||
@click="goToCircuits"
|
||||
@keyup.enter="goToCircuits"
|
||||
@keyup.space.prevent="goToCircuits"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-coins"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="card-title">Circuiti RIS</span>
|
||||
<span class="card-subtitle">Gestisci i tuoi RIS</span>
|
||||
<div class="hero-card-top">
|
||||
<div class="hero-icon">
|
||||
<q-img
|
||||
src="/images/1ris_rosso_100.png"
|
||||
width="1.6rem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-badge
|
||||
class="hero-badge"
|
||||
color="white"
|
||||
text-color="primary"
|
||||
rounded
|
||||
>
|
||||
{{ circuitStore.quantiCircuitiSonoDentro() }}
|
||||
</q-badge>
|
||||
</div>
|
||||
|
||||
<div class="hero-card-body">
|
||||
<div class="card-title">Circuiti RIS</div>
|
||||
<div class="card-subtitle">Saldi · Limiti · Movimenti</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Eventi -->
|
||||
<!-- Eventi -->
|
||||
<div
|
||||
class="hero-card gradient-accent"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
v-ripple
|
||||
@click="goToEvents"
|
||||
@keyup.enter="goToEvents"
|
||||
@keyup.space.prevent="goToEvents"
|
||||
>
|
||||
<q-icon
|
||||
name="event"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="card-title">Eventi</span>
|
||||
<span class="card-subtitle">{{ upcomingEventsCount }} prossimi</span>
|
||||
<div class="hero-card-top">
|
||||
<div class="hero-icon">
|
||||
<q-icon
|
||||
name="event"
|
||||
size="1.6rem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--<q-badge
|
||||
class="hero-badge"
|
||||
color="white"
|
||||
text-color="primary"
|
||||
rounded
|
||||
>
|
||||
{{ upcomingEventsCount }}
|
||||
</q-badge>-->
|
||||
</div>
|
||||
|
||||
<div class="hero-card-body">
|
||||
<div class="card-title">Eventi</div>
|
||||
<div class="card-subtitle">I prossimi nella rete</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Profilo -->
|
||||
<!-- Profilo -->
|
||||
<div
|
||||
class="hero-card gradient-orange"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
v-ripple
|
||||
@click="goToProfile"
|
||||
@keyup.enter="goToProfile"
|
||||
@keyup.space.prevent="goToProfile"
|
||||
>
|
||||
<q-icon
|
||||
name="account_circle"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="card-title">Il mio Profilo</span>
|
||||
<span class="card-subtitle text-italic">({{ userStore.my.username }})</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Azioni RIS -->
|
||||
<section class="ris-actions-section">
|
||||
<div class="ris-actions-grid">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="ris-action-btn send-btn"
|
||||
icon="arrow_upward"
|
||||
label="Invia RIS"
|
||||
@click="sendRIS"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="ris-action-btn receive-btn"
|
||||
icon="arrow_downward"
|
||||
label="Ricevi RIS"
|
||||
@click="receiveRIS"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wallet Card Dettagliata con 2 Circuiti -->
|
||||
<section class="wallet-section">
|
||||
<div class="wallet-card">
|
||||
<div class="wallet-header">
|
||||
<h2 class="section-title-white">
|
||||
<q-icon name="fas fa-coins" />
|
||||
I Tuoi Scambi in RIS
|
||||
</h2>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="refresh"
|
||||
text-color="white"
|
||||
@click="refreshWallet"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Saldi Entrambi Circuiti -->
|
||||
<div class="circuits-balance-overview">
|
||||
<div class="circuit-balance-mini">
|
||||
<CRISBalanceBar
|
||||
:current-balance="circuits.provinciale.realBalance"
|
||||
:min-limit="circuits.provinciale.trustLimit"
|
||||
:max-limit="circuits.provinciale.maxAccumulation"
|
||||
:label="circuits.provinciale.title"
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
<div class="circuit-balance-mini">
|
||||
<CRISBalanceBar
|
||||
:current-balance="circuits.italia.realBalance"
|
||||
:min-limit="circuits.italia.trustLimit"
|
||||
:max-limit="circuits.italia.maxAccumulation"
|
||||
:label="circuits.italia.title"
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet-card">
|
||||
<!-- Selettore Circuito -->
|
||||
<div class="circuit-selector">
|
||||
<div class="selector-label">
|
||||
<span class="selector-emoji">👉🏻</span>
|
||||
<span class="selector-text">Seleziona il Circuito</span>
|
||||
</div>
|
||||
<q-btn-toggle
|
||||
v-model="selectedCircuit"
|
||||
dense
|
||||
no-caps
|
||||
unelevated
|
||||
rounded
|
||||
toggle-color="white"
|
||||
toggle-text-color="primary"
|
||||
:options="[
|
||||
{ label: 'RIS Provinciale', value: 'provinciale' },
|
||||
{ label: 'RIS Italia', value: 'italia' },
|
||||
]"
|
||||
class="circuit-toggle"
|
||||
/>
|
||||
</div>
|
||||
<!-- Statistiche transazioni del circuito selezionato -->
|
||||
<div class="wallet-transactions">
|
||||
<div class="transaction-stat total">
|
||||
<div class="hero-card-top">
|
||||
<div class="hero-icon">
|
||||
<q-icon
|
||||
name="repeat"
|
||||
size="sm"
|
||||
name="account_circle"
|
||||
size="1.6rem"
|
||||
/>
|
||||
<span class="stat-number">{{ currentCircuitData.totalTransactions }}</span>
|
||||
<span class="stat-label">Transazioni</span>
|
||||
</div>
|
||||
<div class="transaction-stat members">
|
||||
<q-icon
|
||||
name="people"
|
||||
size="sm"
|
||||
/>
|
||||
<span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
|
||||
<span class="stat-label">Membri coinvolti</span>
|
||||
</div>
|
||||
<div class="transaction-stat sent">
|
||||
<q-icon
|
||||
name="arrow_upward"
|
||||
size="sm"
|
||||
/>
|
||||
<span class="stat-number">{{ currentCircuitData.sentCount }}</span>
|
||||
<span class="stat-label">Inviate</span>
|
||||
</div>
|
||||
<div class="transaction-stat received">
|
||||
<q-icon
|
||||
name="arrow_downward"
|
||||
size="sm"
|
||||
/>
|
||||
<span class="stat-number">{{ currentCircuitData.receivedCount }}</span>
|
||||
<span class="stat-label">Ricevute</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showBannScambio"
|
||||
class="avviso-card"
|
||||
>
|
||||
<div class="wallet-activity-focus">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="close"
|
||||
class="close-btn"
|
||||
@click="
|
||||
showBannScambio = false;
|
||||
tools.setCookie('bann_scambio', '0');
|
||||
"
|
||||
/>
|
||||
<div class="activity-message">
|
||||
<q-icon
|
||||
name="people_outline"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="activity-text"
|
||||
>Continua a scambiare con più persone per far crescere la tua
|
||||
comunità!</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Prossimi Eventi -->
|
||||
<section
|
||||
v-if="hasEvents"
|
||||
class="content-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<q-icon name="event" />
|
||||
Prossimi Eventi
|
||||
</h2>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="arrow_forward"
|
||||
@click="goToAllEvents"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(event, idx) in recentEvents"
|
||||
:key="idx"
|
||||
class="event-card"
|
||||
@click="openEvent(event)"
|
||||
>
|
||||
<q-img
|
||||
:src="event.image || '/images/event-placeholder.png'"
|
||||
class="event-image"
|
||||
ratio="1"
|
||||
>
|
||||
<template
|
||||
v-if="!event.image"
|
||||
v-slot:error
|
||||
>
|
||||
<div class="event-image-placeholder">
|
||||
<q-icon
|
||||
name="event"
|
||||
size="2rem"
|
||||
color="grey-5"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
<div class="event-date">
|
||||
<span class="event-day">{{ event.day }}</span>
|
||||
<span class="event-month">{{ event.month }}</span>
|
||||
</div>
|
||||
<div class="event-info">
|
||||
<span class="event-title">{{ event.title }}</span>
|
||||
<span class="event-location">{{ event.location }}</span>
|
||||
</div>
|
||||
<q-icon name="chevron_right" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Organizzazioni -->
|
||||
<section
|
||||
v-if="hasOrganizations"
|
||||
class="content-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<q-icon name="fas fa-users" />
|
||||
Organizzazioni
|
||||
</h2>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="arrow_forward"
|
||||
@click="goToAllOrganizations"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="org-scroll">
|
||||
<div
|
||||
v-for="(org, idx) in organizations.slice(0, 10)"
|
||||
:key="idx"
|
||||
class="org-card-scroll"
|
||||
@click="openOrganization(org)"
|
||||
>
|
||||
<q-avatar
|
||||
size="50px"
|
||||
color="blue-6"
|
||||
text-color="white"
|
||||
>
|
||||
{{ org.initial }}
|
||||
</q-avatar>
|
||||
<span class="org-name">{{ org.name }}</span>
|
||||
<span class="org-members">{{ org.membersCount }} membri</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Circuiti RIS Overview -->
|
||||
<!--<section class="circuits-overview-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<q-icon name="account_balance" />
|
||||
Circuiti RIS
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="circuits-cards">
|
||||
<div class="circuit-info-card">
|
||||
<q-icon
|
||||
name="check_circle"
|
||||
color="positive"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
|
||||
<span class="circuit-stat-label">Circuiti Attivi</span>
|
||||
</div>
|
||||
<div class="circuit-info-card">
|
||||
<q-icon
|
||||
name="public"
|
||||
color="primary"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
|
||||
<span class="circuit-stat-label">Circuiti Disponibili</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="view-all-btn"
|
||||
label="Esplora tutti i Circuiti"
|
||||
icon-right="arrow_forward"
|
||||
color="primary"
|
||||
@click="goToAllCircuits"
|
||||
/>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<!-- Community Actions -->
|
||||
<section class="community-actions-section">
|
||||
<h2 class="section-title">
|
||||
<q-icon name="people" />
|
||||
Community
|
||||
</h2>
|
||||
|
||||
<div class="invite-banner">
|
||||
<div class="invite-message">
|
||||
<q-icon
|
||||
name="campaign"
|
||||
size="md"
|
||||
color="positive"
|
||||
/>
|
||||
<div class="invite-text">
|
||||
<span class="invite-main"
|
||||
>Aiuta la community a crescere, parla di RISO ed invita le persone alla
|
||||
App</span
|
||||
>
|
||||
<span class="invite-count"
|
||||
>Hai già inviato <strong>{{ invitesSent }}</strong> inviti</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="community-actions-grid">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="community-action-btn"
|
||||
icon="person_add"
|
||||
label="Invita Amici"
|
||||
color="positive"
|
||||
@click="inviteFriend"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="community-action-btn"
|
||||
icon="list"
|
||||
label="Lista Iscritti"
|
||||
color="info"
|
||||
@click="showMembers"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Attività Community
|
||||
<section class="community-section">
|
||||
<div class="community-card">
|
||||
<div class="community-header">
|
||||
<h3 class="community-title">
|
||||
<q-icon name="handshake" />
|
||||
Strette di Mano
|
||||
</h3>
|
||||
<q-btn-toggle
|
||||
v-model="handshakesView"
|
||||
dense
|
||||
no-caps
|
||||
unelevated
|
||||
rounded
|
||||
name="chevron_right"
|
||||
size="sm"
|
||||
toggle-color="primary"
|
||||
:options="[
|
||||
{ label: 'Tue', value: 'mine' },
|
||||
{ label: 'Generali', value: 'all' },
|
||||
]"
|
||||
class="hero-chevron"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="handshakesView === 'mine'"
|
||||
class="activity-list"
|
||||
>
|
||||
<div
|
||||
v-for="(handshake, idx) in myHandshakes.slice(0, 5)"
|
||||
:key="idx"
|
||||
class="activity-item"
|
||||
@click="openHandshake(handshake)"
|
||||
>
|
||||
<q-avatar
|
||||
size="40px"
|
||||
color="purple-6"
|
||||
text-color="white"
|
||||
>
|
||||
{{ handshake.userInitial }}
|
||||
</q-avatar>
|
||||
<div class="activity-content">
|
||||
<span class="activity-title">{{ handshake.name }}</span>
|
||||
<span class="activity-time">Stretta di mano {{ handshake.time }}</span>
|
||||
</div>
|
||||
<q-icon
|
||||
name="handshake"
|
||||
color="purple-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="handshakesView === 'all'"
|
||||
class="activity-list"
|
||||
>
|
||||
<div
|
||||
v-for="(handshake, idx) in allHandshakes.slice(0, 5)"
|
||||
:key="idx"
|
||||
class="activity-item"
|
||||
@click="openHandshake(handshake)"
|
||||
>
|
||||
<div class="handshake-avatars">
|
||||
<q-avatar
|
||||
size="32px"
|
||||
color="purple-6"
|
||||
text-color="white"
|
||||
>
|
||||
{{ handshake.user1Initial }}
|
||||
</q-avatar>
|
||||
<q-avatar
|
||||
size="32px"
|
||||
color="purple-4"
|
||||
text-color="white"
|
||||
class="avatar-overlap"
|
||||
>
|
||||
{{ handshake.user2Initial }}
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<span class="activity-title"
|
||||
>{{ handshake.user1Name }} e {{ handshake.user2Name }}</span
|
||||
>
|
||||
<span class="activity-time">{{ handshake.time }}</span>
|
||||
</div>
|
||||
<q-icon
|
||||
name="handshake"
|
||||
color="purple-6"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-card-body">
|
||||
<div class="card-title">Il mio profilo</div>
|
||||
<div class="card-subtitle text-italic">@{{ userStore.my.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Ultimi Scambi -->
|
||||
<!--<div class="community-card">
|
||||
<div class="community-header">
|
||||
<h3 class="community-title">
|
||||
<q-icon name="swap_horiz" />
|
||||
Ultimi Scambi
|
||||
</h3>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="arrow_forward"
|
||||
@click="goToAllTrades"
|
||||
/>
|
||||
</div>
|
||||
<div class="activity-list">
|
||||
<div
|
||||
v-for="(trade, idx) in recentTrades.slice(0, 3)"
|
||||
:key="idx"
|
||||
class="activity-item"
|
||||
@click="openTrade(trade)"
|
||||
>
|
||||
<q-avatar
|
||||
size="40px"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
>
|
||||
{{ trade.userInitial }}
|
||||
</q-avatar>
|
||||
<div class="activity-content">
|
||||
<span class="activity-title">{{ trade.description }}</span>
|
||||
<span class="activity-time">{{ trade.time }}</span>
|
||||
</div>
|
||||
<div class="activity-amount">
|
||||
<span :class="trade.amount > 0 ? 'positive' : 'negative'">
|
||||
{{ trade.amount > 0 ? '+' : '' }}{{ trade.amount }} RIS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>-->
|
||||
|
||||
<!-- Canali Telegram -->
|
||||
<!--<section
|
||||
v-if="hasTelegramLinks"
|
||||
class="content-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<q-icon name="telegram" />
|
||||
Unisciti ai Canali
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="telegram-grid-modern">
|
||||
<a
|
||||
v-for="(link, idx) in telegramLinks.slice(0, 3)"
|
||||
:key="idx"
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
class="telegram-card-modern"
|
||||
>
|
||||
<q-img
|
||||
v-if="link.image"
|
||||
:src="link.image"
|
||||
class="telegram-card-image"
|
||||
ratio="16/9"
|
||||
>
|
||||
<div class="telegram-overlay">
|
||||
<q-icon
|
||||
name="telegram"
|
||||
size="3rem"
|
||||
color="white"
|
||||
/>
|
||||
</div>
|
||||
</q-img>
|
||||
<div
|
||||
v-else
|
||||
class="telegram-icon-wrapper"
|
||||
>
|
||||
<q-icon
|
||||
name="telegram"
|
||||
size="3rem"
|
||||
color="white"
|
||||
/>
|
||||
</div>
|
||||
<div class="telegram-content-modern">
|
||||
<span class="telegram-title">{{ link.title }}</span>
|
||||
<q-icon
|
||||
name="open_in_new"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<!-- Footer Links -->
|
||||
<section class="footer-section-modern">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="footer-btn-modern"
|
||||
icon="help_outline"
|
||||
label="FAQ"
|
||||
color="primary"
|
||||
@click="openFAQ"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="footer-btn-modern"
|
||||
icon="school"
|
||||
label="Guida"
|
||||
color="secondary"
|
||||
@click="openGuide"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="footer-btn-modern"
|
||||
icon="support_agent"
|
||||
label="Assistenza"
|
||||
color="positive"
|
||||
@click="openInfo"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- Dialog Annunci -->
|
||||
@@ -619,65 +173,130 @@
|
||||
>
|
||||
<q-card class="annunci-dialog">
|
||||
<q-card-section class="dialog-header">
|
||||
<h3 class="dialog-title">Scegli Categoria</h3>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="close"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="dialog-content">
|
||||
<div class="annunci-options-mobile">
|
||||
<div
|
||||
class="annuncio-option gradient-indigo"
|
||||
@click="goToGoods"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-tshirt"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="option-title">Beni</span>
|
||||
<span class="option-subtitle">Autoproduzioni, cibo</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="annuncio-option gradient-red"
|
||||
@click="goToServices"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-house-user"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="option-title">Servizi</span>
|
||||
<span class="option-subtitle">Competenze, aiuti</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="annuncio-option gradient-lime"
|
||||
@click="goToHospitality"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-bed"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="option-title">Ospitalità</span>
|
||||
<span class="option-subtitle">Ospitare viaggiatori</span>
|
||||
</div>
|
||||
|
||||
<div class="annuncio-option gradient-teal">
|
||||
<q-icon
|
||||
name="directions_car"
|
||||
size="2.5rem"
|
||||
/>
|
||||
<span class="option-title">Trasporti</span>
|
||||
<span class="option-subtitle">Condivisione viaggi</span>
|
||||
<span class="option-subtitle">⚠️ (IN ARRIVO...)</span>
|
||||
</div>
|
||||
<div class="dialog-title-row">
|
||||
<h3 class="dialog-title">Scegli categoria</h3>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="close"
|
||||
aria-label="Chiudi"
|
||||
@click="showAnnunciDialog = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-subtitle">Apri la sezione giusta in un tap.</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-list class="annunci-list">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="annunci-item gradient-green"
|
||||
@click="goToGoods"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<div class="annunci-icon">
|
||||
<q-icon
|
||||
name="fas fa-tshirt"
|
||||
size="1.4rem"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="option-title">Beni</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="option-subtitle"
|
||||
>
|
||||
Autoproduzioni · Cibo · Oggetti
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="chevron_right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="annunci-item gradient-red"
|
||||
@click="goToServices"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<div class="annunci-icon">
|
||||
<q-icon
|
||||
name="fas fa-house-user"
|
||||
size="1.4rem"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="option-title">Servizi</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="option-subtitle"
|
||||
>
|
||||
Competenze · Aiuti · Consulenze
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="chevron_right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="annunci-item gradient-lime"
|
||||
@click="goToHospitality"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<div class="annunci-icon">
|
||||
<q-icon
|
||||
name="fas fa-bed"
|
||||
size="1.4rem"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="option-title">Ospitalità</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="option-subtitle"
|
||||
>
|
||||
Ospitare · Viaggi · Accoglienza
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="chevron_right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
class="annunci-item gradient-blue disabled"
|
||||
disable
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<div class="annunci-icon">
|
||||
<q-icon
|
||||
name="commute"
|
||||
size="1.4rem"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="option-title">Trasporti</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
class="option-subtitle"
|
||||
>
|
||||
In arrivo…
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user