1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../BaseElement'; 17import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil'; 18 19@element('lit-like') 20export class LitLike extends BaseElement { 21 private likeEl: HTMLDivElement | undefined | null; 22 private dislikeEl: HTMLDivElement | undefined | null; 23 private isFeedBacked: boolean = false; 24 private _type?: string; 25 private _content?: string; 26 27 28 static get observedAttributes(): string[] { 29 return ['type', 'content']; 30 }; 31 32 get type(): string { 33 return this.getAttribute('type') || ''; 34 } 35 36 set type(value: string) { 37 this._type = value; 38 this.setAttribute('type', value); 39 } 40 41 get content(): string { 42 return this.getAttribute('content') || ''; 43 } 44 45 set content(value: string) { 46 this._type = value; 47 this.setAttribute('content', value); 48 } 49 initElements(): void { 50 this.likeEl = this.shadowRoot?.querySelector('.like'); 51 this.dislikeEl = this.shadowRoot?.querySelector('.dislike'); 52 53 this.likeEl?.addEventListener('click', (e) => { 54 if (!this.isFeedBacked) { 55 this.likeEl!.style.backgroundImage = 'url("img/like-active.png")'; 56 let secondCat = this.type === 'chat' ? 'user_feedback' : 'feedback_good'; 57 let thirdCat = this.type === 'chat' ? ['1'] : [this.content]; 58 SpStatisticsHttpUtil.generalRecord('AI_statistic', secondCat, thirdCat); 59 this.isFeedBacked = true; 60 } else { 61 return; 62 } 63 }); 64 65 this.dislikeEl?.addEventListener('click', (e) => { 66 if (!this.isFeedBacked) { 67 this.dislikeEl!.style.backgroundImage = 'url("img/dislike-active.png")'; 68 let secondCat = this.type === 'chat' ? 'user_feedback' : 'feedback_bad'; 69 let thirdCat = this.type === 'chat' ? ['0'] : [this.content]; 70 SpStatisticsHttpUtil.generalRecord('AI_statistic', secondCat, thirdCat); 71 this.isFeedBacked = true; 72 } else { 73 return; 74 } 75 }); 76 } 77 78 79 initHtml(): string { 80 return ` 81 <style> 82 .likeAndDislike { 83 width:60px; 84 height:25px; 85 display:flex; 86 align-items:center; 87 justify-content:space-between; 88 position:absolute; 89 right:10px; 90 } 91 92 .like,.dislike { 93 width:25px; 94 height:25px; 95 background-size:25px; 96 } 97 98 .like { 99 background-image:url('img/like.png'); 100 } 101 102 .dislike { 103 background-image:url('img/dislike.png'); 104 } 105 106 .like:hover { 107 background-image:url('img/like-active.png'); 108 background-size:25px; 109 } 110 111 .dislike:hover { 112 background-image:url('img/dislike-active.png'); 113 background-size:25px; 114 } 115 </style> 116 117 <div class = 'likeAndDislike'> 118 <div class = 'like'> 119 </div> 120 <div class = 'dislike'> 121 </div> 122 </div> 123 `; 124 } 125 126 127} 128
