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 Mission from '../modle/Mission'; 17import missionManager from '@ohos.application.missionManager'; 18import Logger from '../modle/Logger'; 19import image from '@ohos.multimedia.image'; 20 21const TAG: string = 'MissionInfoComponent'; 22 23@Component 24export struct MissionInfoComponent { 25 @State missionSnapshot: image.PixelMap | undefined = undefined; 26 @State isOn: boolean = undefined; 27 @State translateLeft: number = 0; 28 @State panDirection: PanDirection = PanDirection.Left; 29 private mission: Mission; 30 private index: number = 0; 31 private handlerRefresh: () => void; 32 33 onClickLockMission(missionId: number) { 34 this.isOn = true; 35 missionManager.lockMission(missionId).then(() => { 36 Logger.info(TAG, 'lockMission is called'); 37 this.handlerRefresh(); 38 }); 39 } 40 41 onClickUnlockMission(missionId: number) { 42 this.isOn = false; 43 missionManager.unlockMission(missionId).then(() => { 44 Logger.info(TAG, 'UnlockMission is called'); 45 this.handlerRefresh(); 46 }); 47 } 48 49 onClickClearMission(missionId: number) { 50 missionManager.clearMission(missionId).then(() => { 51 Logger.info(TAG, 'ClearMission is called'); 52 this.handlerRefresh(); 53 }); 54 } 55 56 onClickMoveMissionToFront(missionId: number) { 57 missionManager.moveMissionToFront(missionId).then(() => { 58 Logger.info(TAG, 'moveMissionToFront is called'); 59 }); 60 } 61 62 @Builder RowOfSquareTexts(key: string, resourceText: Resource, stringText: string | Resource) { 63 Row() { 64 Text(resourceText) 65 .fontSize(20) 66 .fontWeight(10) 67 Text(stringText) 68 .id(key + this.index) 69 .height(40) 70 .fontSize(16) 71 .textAlign(TextAlign.Center) 72 .maxLines(1) 73 .textOverflow({ overflow: TextOverflow.Ellipsis }) 74 } 75 } 76 77 @Builder RowOfSquareButtons(button: Resource, color, handlerClick) { 78 Text(button) 79 .width(100) 80 .height(200) 81 .fontSize(30) 82 .textAlign(TextAlign.Center) 83 .margin({ top: 10 }) 84 .backgroundColor(color) 85 .onClick(handlerClick) 86 } 87 88 async getSnapshot() { 89 Logger.info(TAG, `mission= ${JSON.stringify(this.mission)}`); 90 let missionSnapshot = await missionManager.getMissionSnapShot('', this.mission.missionId); 91 this.missionSnapshot = missionSnapshot.snapshot; 92 Logger.info(TAG, `getMissionSnapShot missionSnapshot = ${JSON.stringify(missionSnapshot)}`); 93 } 94 95 onRunningState(runningState: number) { 96 return runningState === 0 ? $r('app.string.is') : $r('app.string.no') 97 } 98 99 onLockedState(lockedState: boolean) { 100 return lockedState ? $r('app.string.is') : $r('app.string.no') 101 } 102 103 onContinuable(continuable: boolean) { 104 return continuable ? $r('app.string.is') : $r('app.string.no') 105 } 106 107 aboutToAppear() { 108 this.getSnapshot() 109 this.isOn = this.mission.lockedState 110 } 111 112 build() { 113 Row() { 114 Row() { 115 Image(this.missionSnapshot) 116 .objectFit(ImageFit.Contain) 117 .size({ width: 100, height: 200 }) 118 .margin({ left: 20, right: 10 }) 119 Column() { 120 this.RowOfSquareTexts('', $r('app.string.bundle_name'), this.mission.want.bundleName) 121 this.RowOfSquareTexts('', $r('app.string.running_state'), this.onRunningState(this.mission.runningState)) 122 this.RowOfSquareTexts('lockState', $r('app.string.locked_state'), this.onLockedState(this.mission.lockedState)) 123 this.RowOfSquareTexts('', $r('app.string.continuable'), this.onContinuable(this.mission.continuable)) 124 } 125 .width('50%') 126 .height(200) 127 .alignItems(HorizontalAlign.Start) 128 .justifyContent(FlexAlign.Center) 129 } 130 .width('100%') 131 .padding(10) 132 .backgroundColor('#f5f5f5') 133 .borderRadius(20) 134 .translate({ x: this.translateLeft, y: 0 }) 135 136 Row() { 137 if (this.isOn) { 138 this.RowOfSquareButtons($r('app.string.unlocked_mission'), '#0D9FFB', () => { 139 this.onClickUnlockMission(this.mission.missionId); 140 }) 141 } else { 142 this.RowOfSquareButtons($r('app.string.locked_mission'), '#0D9FFB', () => { 143 this.onClickLockMission(this.mission.missionId); 144 }) 145 } 146 this.RowOfSquareButtons($r('app.string.move_mission'), Color.Orange, () => { 147 this.onClickMoveMissionToFront(this.mission.missionId); 148 }) 149 this.RowOfSquareButtons($r('app.string.clear_mission'), '#ffea0606', () => { 150 this.onClickClearMission(this.mission.missionId); 151 }) 152 } 153 .translate({ x: this.translateLeft, y: 0 }) 154 .margin({ left: 20 }) 155 } 156 .width('100%') 157 .padding({ left: 10, right: 10 }) 158 .gesture( 159 PanGesture({ fingers: 1, direction: this.panDirection, distance: 20 }) 160 .onActionStart(() => { 161 Logger.info(TAG, `PanGesture onActionStart`); 162 if (this.panDirection === PanDirection.Left) { 163 this.panDirection = PanDirection.Right; 164 this.translateLeft = -300; 165 } else { 166 this.panDirection = PanDirection.Left; 167 this.translateLeft = 0; 168 } 169 }) 170 ) 171 } 172}