https://casadecultura.org/View/ModulesVue/Web/SingleImage/SingleImage.js?1790282716

1
2Vue.component('single-image', {
3    props: {        
4        InputColor: String, 
5        InputTitol: String,
6        InputDades: Object        
7    },          
8    data: function() {
9        return { ActivitatHome: {} }
10    },    
11    computed: {
12    },
13    watch: {              
14        InputDades: {
15            deep: true,
16            immediate: true,
17            handler(newVal) {
18                this.ActivitatHome = newVal;
19            }
20        }  
21    },
22    methods: {
23        getTagStyle: function() {
24            let R = parseInt(parseInt(this.InputColor.substring(1, 3), 16).toString(10)) + 20;
25            let G = parseInt(parseInt(this.InputColor.substring(3, 5), 16).toString(10)) + 20;
26            let B = parseInt(parseInt(this.InputColor.substring(5, 7), 16).toString(10)) + 20;
27            let NewColor = '#' + R.toString(16) + G.toString(16) + B.toString(16);
28        
29            let Style = {};
30            Style['background-color'] = this.InputColor;
31            Style['border-left-color'] = NewColor;
32            Style['border-bottom-color'] = NewColor;
33            Style['border-top-color'] = this.InputColor;
34            Style['border-right-color'] = this.InputColor;
35        
36            return Style;
37        },
38        gUrlImatgeCategoriaVinculadaBlanca: function(ActivitatHome) {
39
40            if (ActivitatHome.CategoriaVinculada) {
41                return '/WebFiles/Web/img/TipusActivitats/B' + ActivitatHome.CategoriaVinculada.toString() + '.png';
42              //  this.UrlImatgeCategoriaVinculadaNegra = '/WebFiles/Web/img/TipusActivitats/N' + this.CategoriaVinculada.toString() + '.png';
43              } else {
44                return '/WebFiles/Web/img/TipusActivitats/B0.png';
45//                this.UrlImatgeCategoriaVinculadaNegra = '/WebFiles/Web/img/TipusActivitats/N0.png';
46              }            
47        },
48        gURLImatge: function( ActivitatHome ) {
49            if ( ActivitatHome.idActivitat > 0) {
50                return CONST_url_activitats_img + ActivitatHome.idActivitat + '-L.jpg';                
51            } else {                
52                return CONST_url_cicles_img + ActivitatHome.idCicle + '-L.jpg';                
53            }
54        },
55        getUrl: function( ActivitatHome ) {            
56            if( ActivitatHome.idActivitat == 0 ) { return '/cicles/' + ActivitatHome.idCicle + '/' + normalize(ActivitatHome.NomActivitat); }
57            else if( ActivitatHome.idActivitat > 0 ) { return '/detall/' + ActivitatHome.idActivitat + '/' + normalize(ActivitatHome.NomActivitat); }
58        },
59        gTextDies: function( ActivitatHome ) {
60            if( ActivitatHome.Dia == ActivitatHome.DiaMax ) {
61                return "El " + ConvertirData(ActivitatHome.Dia, 'TDM'); 
62            } else {
63                return "Del " + ConvertirData(ActivitatHome.Dia, 'TDM') + ' al ' + ConvertirData(ActivitatHome.DiaMax, 'TDM'); 
64            }            
65        },
66        gTextHores: function( ActivitatHome ) {            
67            if(this.InputTitol == 'EXPOSICIONS') {
68                return "De " + ConvertirHora(ActivitatHome.HoraInici, 'THM') + ' a ' + ConvertirHora(ActivitatHome.HoraFi, 'THM');
69            } else {
70                return "A les " + ConvertirHora(ActivitatHome.HoraInici, 'THM') + 'h';
71            }
72        },        
73        NoExisteixImatge: function($event) {
74            $event.target.style = 'background-color: black;';
75            $event.target.src = '/WebFiles/Web/img/NoImage.jpg';
76        },
77        goTo: function($Where) {
78            console.log("GoTo");
79            window.location.href = this.getUrl( $Where );
80        }
81    },
82    template: `        
83
84    <!-- REQUADRE VERTICAL -->
85    
86    <div @click="goTo(ActivitatHome)" class="SingleImage_requadre_imatge" >
87        <div class="SingleImage_tag" v-if="ActivitatHome.CategoriaVinculada != '0'" > <!-- :style="getTagStyle( ActivitatHome )" -->
88            <i class="fas fa-bookmark"></i>
89            <img :src="gUrlImatgeCategoriaVinculadaBlanca( ActivitatHome )" alt="Tag de categoria" />
90        </div>
91        <img :src="gURLImatge( ActivitatHome )" class="SingleImage_requadre_imatge_img" @error="NoExisteixImatge($event)" :alt="ActivitatHome.NomActivitat.substring(0,100)" />
92
93        <div class="SingleImage_requadre_text">
94            <p class="SingleImage_requadre_text_titol"><a :href="getUrl( ActivitatHome )">{{ ActivitatHome.NomActivitat }}</a></p>
95            <div class="SingleImage_requadre_text_data">
96                <div class="SingleImage_requadre_text_data_calendari">
97                    <i class="far fa-calendar"></i> {{ gTextDies( ActivitatHome ) }}
98                </div>
99            </div>
100            <div class="SingleImage_requadre_text_espai">
101                <div class="SingleImage_requadre_text_data_horari">
102                    <i class="far fa-clock"></i> {{ gTextHores( ActivitatHome ) }}
103                </div>
104            </div>
105        </div>
106    </div>    
107
108                `
109});