- primo aggiornamento myreccard
- aggiunta sito germogliamo.app - aggiornato login con il parametro "browser_random" che serve per fare un login anche su 2 pagine contemporaneamente.
This commit is contained in:
Surya Paolo
@@ -1,131 +1,99 @@
|
||||
<!--suppress ALL -->
|
||||
<template>
|
||||
<div class="q-py-xs centermydiv cardrec" :style="{ maxWidth: computedWidth }">
|
||||
<div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
|
||||
<div class="row">
|
||||
<div class="col-2 q-my-sm">
|
||||
<div class="column">
|
||||
<span class="ev_dayofweek">{{
|
||||
tools.getDayOfWeek(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_day">{{
|
||||
tools.getstrDay(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_month">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_hour">{{
|
||||
tools.getstrTime(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) ===
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_hour_end"
|
||||
>{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="q-mx-sm self-center"
|
||||
>
|
||||
-----
|
||||
</div>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_dayofweek"
|
||||
>{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_day"
|
||||
>{{ tools.getstrDay(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_month"
|
||||
>{{ tools.getstrMonth3Letters(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_hour_end"
|
||||
>{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<q-avatar size="50px" class="q-my-sm self-center">
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="50px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<q-img
|
||||
:src="
|
||||
tools.getFullFileName(myrec.photos, table, myrec.username, '')
|
||||
<div
|
||||
class="rec-card-wrapper"
|
||||
:style="{ maxWidth: computedWidth() }"
|
||||
>
|
||||
<!-- Evento Calendar con data grande -->
|
||||
<div
|
||||
v-if="myrec && table === shared_consts.TABLES_MYBACHECAS"
|
||||
class="event-card"
|
||||
>
|
||||
<div class="event-date-column">
|
||||
<div class="date-stack">
|
||||
<span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeStart) }}</span>
|
||||
<span class="day-number">{{ tools.getstrDay(myrec.dateTimeStart) }}</span>
|
||||
<span class="month-name">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="time-start">{{ tools.getstrTime(myrec.dateTimeStart) }}</span>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) === tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="270px"
|
||||
fit="cover"
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
/>
|
||||
<!--<div class="event_date">
|
||||
<span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
|
||||
</div>-->
|
||||
class="time-end"
|
||||
>
|
||||
{{ tools.getstrTime(myrec.dateTimeEnd) }}
|
||||
</span>
|
||||
|
||||
<!-- Data fine se diversa -->
|
||||
<template
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !== tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
>
|
||||
<div class="date-separator">→</div>
|
||||
<span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span>
|
||||
<span class="day-number">{{ tools.getstrDay(myrec.dateTimeEnd) }}</span>
|
||||
<span class="month-name">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeEnd)
|
||||
}}</span>
|
||||
<span class="time-end">{{ tools.getstrTime(myrec.dateTimeEnd) }}</span>
|
||||
</template>
|
||||
|
||||
<q-avatar
|
||||
size="40px"
|
||||
class="user-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-image-container">
|
||||
<q-img
|
||||
:src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
|
||||
:alt="myrec.descr"
|
||||
class="event-image"
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Record Principale -->
|
||||
<q-item
|
||||
v-if="myrec"
|
||||
clickable
|
||||
v-ripple
|
||||
:class="
|
||||
`shadow-2 butt_rounded ` +
|
||||
(tools.isPartecipero(myrec) ? ` butt_green ` : '')
|
||||
"
|
||||
class="modern-rec-card"
|
||||
:class="{ 'is-attending': tools.isPartecipero(myrec) }"
|
||||
>
|
||||
<!-- Avatar / Immagine -->
|
||||
<q-item-section
|
||||
v-if="
|
||||
(shared_consts.TABLES_VISU_IMG.includes(table) &&
|
||||
myrec.photos &&
|
||||
myrec.photos.length > 0) ||
|
||||
(myrec.mygrp && myrec.mygrp.photos.length > 0)
|
||||
myrec.photos?.length > 0) ||
|
||||
(myrec.mygrp && myrec.mygrp.photos?.length > 0)
|
||||
"
|
||||
avatar
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
class="avatar-section"
|
||||
>
|
||||
<q-badge
|
||||
v-if="showBadge()"
|
||||
class="q-my-xs self-center"
|
||||
:color="fieldsTable.getColByAdType(myrec.adType)"
|
||||
class="type-badge"
|
||||
>
|
||||
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
|
||||
<!--<q-icon
|
||||
:name="fieldsTable.getIconByAdType(myrec.adType)"
|
||||
color="white"
|
||||
class="q-ml-xs"
|
||||
/>-->
|
||||
</q-badge>
|
||||
|
||||
<q-avatar size="60px">
|
||||
<q-avatar
|
||||
size="56px"
|
||||
class="record-avatar"
|
||||
>
|
||||
<q-img
|
||||
v-if="
|
||||
myrec.mygrp &&
|
||||
@@ -140,18 +108,12 @@
|
||||
myrec.groupname
|
||||
)
|
||||
"
|
||||
class="img"
|
||||
alt="immagine del gruppo"
|
||||
>
|
||||
</q-img>
|
||||
/>
|
||||
<q-img
|
||||
v-else
|
||||
:src="
|
||||
tools.getFullFileName(myrec.photos, table, myrec.username, '')
|
||||
"
|
||||
:src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
@@ -160,224 +122,222 @@
|
||||
v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
|
||||
avatar
|
||||
@click="naviga(`/my/` + myrec.username)"
|
||||
class="avatar-section"
|
||||
>
|
||||
<q-badge
|
||||
v-if="showBadge()"
|
||||
class="q-my-xs self-center"
|
||||
:color="fieldsTable.getColByAdType(myrec.adType)"
|
||||
class="type-badge"
|
||||
>
|
||||
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
|
||||
</q-badge>
|
||||
<q-avatar size="60px" class="self-center">
|
||||
<q-avatar
|
||||
size="56px"
|
||||
class="record-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section @click="navigaExt(myrec)">
|
||||
<q-item-label lines="2" class="full-width">
|
||||
<span
|
||||
<!-- Contenuto Principale -->
|
||||
<q-item-section
|
||||
@click="navigaExt(myrec)"
|
||||
class="content-section"
|
||||
>
|
||||
<!-- Tags e Chips -->
|
||||
<q-item-label class="tags-row">
|
||||
<q-chip
|
||||
v-for="(rec, ind) of tools.getArrSubSector(table, myrec)"
|
||||
:key="ind"
|
||||
:key="'sub-' + ind"
|
||||
dense
|
||||
class="tag-chip subsector"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
class="text-center shadow-5 glossy text-white bg-green"
|
||||
>{{ rec.descr }}</q-chip
|
||||
>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
v-for="(rec, ind) of tools.getArrSector(table, myrec)"
|
||||
:key="ind"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
class="text-center shadow-5 glossy text-white bg-blue"
|
||||
>{{ rec.descr }}</q-chip
|
||||
></span
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-for="(recstatus, index) in myrec.idStatusSkill"
|
||||
:key="index"
|
||||
class="q-ml-xs"
|
||||
style="vertical-align: middle"
|
||||
{{ rec.descr }}
|
||||
</q-chip>
|
||||
<q-chip
|
||||
v-for="(rec, ind) of tools.getArrSector(table, myrec)"
|
||||
:key="'sec-' + ind"
|
||||
dense
|
||||
class="tag-chip sector"
|
||||
>
|
||||
{{ rec.descr }}
|
||||
</q-chip>
|
||||
<template v-for="(recstatus, index) in myrec.idStatusSkill">
|
||||
<q-badge
|
||||
v-if="
|
||||
recstatus === shared_consts.STATUSSKILL_ONLINE ||
|
||||
myrec.idStatusSkill.length > 1
|
||||
myrec.idStatusSkill?.length > 1
|
||||
"
|
||||
dense
|
||||
:key="'stat-' + index"
|
||||
:color="globalStore.getColByStatusSkills(recstatus)"
|
||||
text-color="white"
|
||||
class="status-badge"
|
||||
>
|
||||
<q-icon
|
||||
:name="globalStore.getStatusSkillIconById(recstatus)"
|
||||
color="white"
|
||||
/>
|
||||
size="14px"
|
||||
/>
|
||||
{{ globalStore.getStatusSkillById(recstatus) }}
|
||||
</q-badge>
|
||||
</span>
|
||||
|
||||
<!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
|
||||
</span>-->
|
||||
</template>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Descrizione -->
|
||||
<q-item-label
|
||||
lines="4"
|
||||
:class="table === shared_consts.TABLES_MYBACHECAS ? 'text-bold' : ''"
|
||||
lines="3"
|
||||
:class="[
|
||||
'description-text',
|
||||
{ 'event-title': table === shared_consts.TABLES_MYBACHECAS },
|
||||
]"
|
||||
v-if="myrec.descr"
|
||||
>{{ myrec.descr }}<br />
|
||||
>
|
||||
{{ myrec.descr }}
|
||||
</q-item-label>
|
||||
<q-item-label lines="1" style="" class="text_user_city">
|
||||
<div class="row justify-between">
|
||||
<div class="text-weight-bold text-italic">
|
||||
<span
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy
|
||||
"
|
||||
>
|
||||
<span>{{ myrec.organisedBy }} </span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ getNameToShow(myrec) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-mx-sm">
|
||||
(
|
||||
<span
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS &&
|
||||
tools.getNumPartecipantes(myrec) > 0
|
||||
"
|
||||
>
|
||||
<span class="q-mx-xxs-left text-bold">{{
|
||||
tools.getNumPartecipantes(myrec)
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon dense color="blue" name="far fa-check-circle" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="q-mx-xxs-left">{{
|
||||
myrec.numseen ? myrec.numseen : 0
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon dense color="blue" name="far fa-eye" />
|
||||
</span>
|
||||
<span class="q-mx-xxs-left"> </span>
|
||||
<span class="" v-if="myrec">{{
|
||||
myrec.numfav ? myrec.numfav : 0
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon
|
||||
dense
|
||||
color="red"
|
||||
:name="
|
||||
userStore.isFavorite(myrec._id, table)
|
||||
? 'favorite'
|
||||
: 'far fa-heart'
|
||||
"
|
||||
|
||||
<!-- Info Utente e Stats -->
|
||||
<q-item-label class="user-stats-row">
|
||||
<div class="user-name">
|
||||
<span v-if="table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy">
|
||||
{{ myrec.organisedBy }}
|
||||
</span>
|
||||
<span v-else>{{ getNameToShow(myrec) }}</span>
|
||||
</div>
|
||||
<div class="stats-container">
|
||||
(
|
||||
<template
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS &&
|
||||
tools.getNumPartecipantes(myrec) > 0
|
||||
"
|
||||
>
|
||||
<span class="stat-item">
|
||||
{{ tools.getNumPartecipantes(myrec) }}
|
||||
<q-icon
|
||||
name="check_circle"
|
||||
size="14px"
|
||||
color="positive"
|
||||
/>
|
||||
</span>
|
||||
<!--<span class="q-mx-xxs"> </span>
|
||||
<span class="">{{ myrec.mybook.length }}</span>
|
||||
<span class="q-mx-xxs"
|
||||
><q-icon
|
||||
dense
|
||||
color="teal"
|
||||
:name="
|
||||
userStore.isBookmarked(myrec._id, table)
|
||||
? 'bookmark'
|
||||
: 'far fa-bookmark'
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
-->
|
||||
)
|
||||
</div>
|
||||
</template>
|
||||
<span class="stat-item">
|
||||
{{ myrec.numseen || 0 }}
|
||||
<q-icon
|
||||
name="visibility"
|
||||
size="14px"
|
||||
color="primary"
|
||||
/>
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
{{ myrec.numfav || 0 }}
|
||||
<q-icon
|
||||
:name="
|
||||
userStore.isFavorite(myrec._id, table) ? 'favorite' : 'favorite_border'
|
||||
"
|
||||
size="14px"
|
||||
color="negative"
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
</div>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Badge Partecipazione -->
|
||||
<q-item-label
|
||||
v-if="tools.isPartecipero(myrec)"
|
||||
lines="1"
|
||||
style="text-align: left"
|
||||
class="text_user_city"
|
||||
class="attending-badge"
|
||||
>
|
||||
<span class="text-bold text-green text-h7">
|
||||
<q-icon name="fas fa-user-check" color="green"></q-icon>
|
||||
{{ t('event.attend') }}</span
|
||||
>
|
||||
<q-icon
|
||||
name="check_circle"
|
||||
size="16px"
|
||||
/>
|
||||
{{ t('event.attend') }}
|
||||
</q-item-label>
|
||||
|
||||
<!-- Città -->
|
||||
<q-item-label
|
||||
lines="3"
|
||||
style="text-align: right"
|
||||
class="text_user_city"
|
||||
lines="2"
|
||||
class="cities-text"
|
||||
>
|
||||
<span v-for="(rec, ind) of myrec.mycities" :key="ind"
|
||||
><span v-if="ind > 0">, </span>{{ rec.comune }} ({{
|
||||
rec.prov
|
||||
}})</span
|
||||
<span
|
||||
v-for="(rec, ind) of myrec.mycities"
|
||||
:key="ind"
|
||||
>
|
||||
<span v-if="ind > 0">, </span>{{ rec.comune }} ({{ rec.prov }})
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side v-if="tools.canModifyThisRec(myrec, table) || editOn">
|
||||
<q-item-label>
|
||||
<q-btn rounded dense icon="fas fa-pencil-alt">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-pencil-alt" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.edit') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-copy" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('event.duplicate') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-trash-alt" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.elimina') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Menu Azioni -->
|
||||
<q-item-section
|
||||
v-if="tools.canModifyThisRec(myrec, table) || editOn"
|
||||
side
|
||||
class="actions-section"
|
||||
>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
dense
|
||||
icon="more_vert"
|
||||
size="sm"
|
||||
class="action-menu-btn"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="edit"
|
||||
size="18px"
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.edit') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="content_copy"
|
||||
size="18px"
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('event.duplicate') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="delete"
|
||||
size="18px"
|
||||
color="negative"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.elimina') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset="item" />
|
||||
<q-separator />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyRecCard.ts">
|
||||
</script>
|
||||
<script lang="ts" src="./CMyRecCard.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyRecCard.scss';
|
||||
|
||||
Reference in New Issue
Block a user