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 CallRecord from './callRecord/CallRecord'
17import { HiLog } from '../../../../../../common/src/main/ets/util/HiLog';
18import { DialerInitialPage } from '../../component/dialer/DialerInitialPage';
19import DialerPresenter from '../../presenter/dialer/DialerPresenter';
20import EnvironmentProp from '../../feature/EnvironmentProp';
21import PreferencesUtil from '../../util/PreferencesUtil';
22
23const TAG = 'DialerTablet'
24
25@Component
26struct DialButton {
27  @State button_number: string = '';
28  @State button_char: string = '';
29  @Link mPresenter: DialerPresenter;
30
31  build() {
32    Column() {
33      Button() {
34        Flex({
35          direction: FlexDirection.Column,
36          alignItems: ItemAlign.Center,
37          justifyContent: FlexAlign.Center
38        }) {
39          if (`${this.button_number}` == '*') {
40            Image($r('app.media.symbol'))
41              .width($r('app.float.id_item_height_sm'))
42              .height($r('app.float.id_item_height_sm'))
43          } else if (`${this.button_number}` == '#') {
44            Image($r('app.media.symbols'))
45              .width($r('app.float.id_item_height_sm'))
46              .height($r('app.float.id_item_height_sm'))
47          } else if (`${this.button_number}` == '0') {
48            Text(`${this.button_number}`)
49              .fontSize($r('sys.float.ohos_id_text_size_headline6'))
50              .fontColor($r('sys.color.ohos_id_color_text_primary'))
51              .fontWeight(FontWeight.Medium)
52              .margin({ top: $r('app.float.id_card_margin_mid') })
53          } else {
54            Text(`${this.button_number}`)
55              .fontSize($r('sys.float.ohos_id_text_size_headline6'))
56              .fontColor($r('sys.color.ohos_id_color_text_primary'))
57              .fontWeight(FontWeight.Medium)
58          }
59
60          if ((this.button_char == 'ic')) {
61            Image($r('app.media.ic_contacts_voicemail_mini'))
62              .width($r('app.float.id_card_margin_xxl'))
63              .height($r('app.float.id_card_margin_xxl'))
64          } else if ((this.button_char == '+')) {
65            Image($r('app.media.ic_public_add'))
66              .width($r('app.float.id_card_margin_xl'))
67              .height($r('app.float.id_card_margin_xl'))
68          } else {
69            Text(`${this.button_char}`)
70              .fontSize($r('sys.float.ohos_id_text_size_body3'))
71              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
72          }
73        }
74      }
75      .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
76      .type(ButtonType.Circle)
77      .width($r('app.float.dialer_keypad_button_height'))
78      .height($r('app.float.dialer_keypad_button_height'))
79      .onClick(() => {
80        this.mPresenter.ifNeedSpace();
81        AppStorage.SetOrCreate('tele_number', AppStorage.Get('tele_number') + this.button_number);
82        this.mPresenter.all_number += this.button_number
83        this.mPresenter.viewNumberTextProc();
84        this.mPresenter.playAudio(this.button_number);
85      })
86    }
87    .flexGrow(1)
88  }
89}
90
91@Component
92struct DialPad {
93  @Link mPresenter: DialerPresenter;
94
95  build() {
96    Column() {
97      Flex({ direction: FlexDirection.Row }) {
98        DialButton({
99          button_number: '1',
100          button_char: 'ic',
101          mPresenter: $mPresenter,
102        })
103
104        DialButton({
105          button_number: '2',
106          button_char: 'ABC',
107          mPresenter: $mPresenter,
108        })
109
110        DialButton({
111          button_number: '3',
112          button_char: 'DEF',
113          mPresenter: $mPresenter,
114        })
115      }
116
117      Flex({ direction: FlexDirection.Row }) {
118        DialButton({
119          button_number: '4',
120          button_char: 'GHI',
121          mPresenter: $mPresenter,
122        })
123
124        DialButton({
125          button_number: '5',
126          button_char: 'JKL',
127          mPresenter: $mPresenter,
128        })
129
130        DialButton({
131          button_number: '6',
132          button_char: 'MNO',
133          mPresenter: $mPresenter,
134        })
135      }
136
137      Flex({ direction: FlexDirection.Row }) {
138        DialButton({
139          button_number: '7',
140          button_char: 'PQRS',
141          mPresenter: $mPresenter,
142        })
143
144        DialButton({
145          button_number: '8',
146          button_char: 'TUV',
147          mPresenter: $mPresenter,
148        })
149
150        DialButton({
151          button_number: '9',
152          button_char: 'WXYZ',
153          mPresenter: $mPresenter,
154        })
155      }
156
157      Flex({ direction: FlexDirection.Row }) {
158        DialButton({
159          button_number: '*',
160          button_char: '(P)',
161          mPresenter: $mPresenter,
162        })
163
164        DialButton({
165          button_number: '0',
166          button_char: '+',
167          mPresenter: $mPresenter,
168        })
169
170        DialButton({
171          button_number: '#',
172          button_char: '(W)',
173          mPresenter: $mPresenter,
174        })
175      }
176    }
177    .width('100%')
178    .padding({ left: $r('app.float.dialer_keypad_button_height'), right: $r('app.float.dialer_keypad_button_height') })
179    .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
180  }
181}
182
183@Entry
184@Component
185export default struct CallTablet {
186  @State mPresenter: DialerPresenter = DialerPresenter.getInstance();
187  @StorageLink('tele_number') tele_number: string = '';
188  menuRes: Resource[] = [$r('app.string.call_setting_type_paste'),
189  $r('app.string.call_setting_type_batch_delete'),
190  $r('app.string.call_setting_type_harassment_interception'),
191  $r('app.string.call_setting_type_setting')];
192  @State callmenu: { [key: string]: any } = [{ value: '', action: () => {
193  } }];
194  @StorageLink('haveSimCard') haveSimCard: boolean = false;
195  @StorageLink('haveMultiSimCard') haveMultiSimCard: boolean = false;
196
197  aboutToAppear() {
198    HiLog.i(TAG, 'aboutToAppear CallTablet ');
199    this.getMenu();
200    this.mPresenter.aboutToAppear();
201  }
202
203  aboutToDisappear() {
204    this.mPresenter.onDestroy();
205  }
206
207  getMenu() {
208    let tmpPhoneMenu = [];
209    this.menuRes.forEach(element => {
210      tmpPhoneMenu.push({});
211    });
212    this.callmenu = tmpPhoneMenu;
213    this.menuRes.forEach((element, i) => {
214      globalThis.context.resourceManager.getString(element.id, (err, typeName) => {
215        HiLog.i(TAG, typeName);
216        this.callmenu[i] = {
217          value: typeName,
218          action: () => {
219          }
220        };
221      });
222    });
223  }
224
225  build() {
226    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
227
228      Column() {
229        if (this.tele_number.length > 0) {
230          Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
231            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
232              Text(`${this.tele_number}`)
233                .fontSize(this.mPresenter.tele_num_size)
234                .fontColor($r('sys.color.ohos_id_color_text_primary'))
235                .maxLines(1)
236            }
237            .width('100%')
238            .height('112vp')
239
240            if (this.tele_number.length >= 3) {
241              Row() {
242                Image($r('app.media.ic_public_add'))
243                  .width($r('app.float.id_card_margin_max'))
244                  .height($r('app.float.id_card_margin_max'))
245                  .margin({
246                    left: $r('app.float.id_card_margin_max'),
247                    right: $r('app.float.id_card_margin_xxl')
248                  })
249
250                Text($r('app.string.new_contact'))
251                  .fontSize($r('sys.float.ohos_id_text_size_body1'))
252                  .fontColor($r('sys.color.ohos_id_color_text_primary'))
253              }
254              .width('100%')
255              .height($r('app.float.id_item_height_large'))
256              .onClick(() => {
257                this.mPresenter.jumpToAccountants()
258              })
259
260              Divider()
261                .color($r('sys.color.ohos_id_color_list_separator'))
262                .lineCap(LineCapStyle.Square)
263                .width('100%')
264                .padding({ left: $r('app.float.id_item_height_max') })
265
266              //This component is temporarily shielded because there is no requirement currently.
267//              Row() {
268//                Image($r('app.media.ic_public_contacts'))
269//                  .width($r('app.float.id_card_margin_max'))
270//                  .height($r('app.float.id_card_margin_max'))
271//                  .margin({
272//                    left: $r('app.float.id_card_margin_max'),
273//                    right: $r('app.float.id_card_margin_xxl')
274//                  })
275//
276//                Text($r('app.string.save_to_existing_contacts'))
277//                  .fontSize($r('sys.float.ohos_id_text_size_body1'))
278//                  .fontColor($r('sys.color.ohos_id_color_text_primary'))
279//              }
280//              .width('100%')
281//              .height($r('app.float.id_item_height_large'))
282//              .onClick(() => {
283//              })
284
285              Divider()
286                .color($r('sys.color.ohos_id_color_list_separator'))
287                .lineCap(LineCapStyle.Square)
288                .width('100%')
289                .padding({ left: $r('app.float.id_item_height_max') })
290
291              Row() {
292                Image($r('app.media.ic_public_message'))
293                  .width($r('app.float.id_card_margin_max'))
294                  .height($r('app.float.id_card_margin_max'))
295                  .margin({
296                    left: $r('app.float.id_card_margin_max'),
297                    right: $r('app.float.id_card_margin_xxl')
298                  })
299
300                Text($r('app.string.send_messages'))
301                  .fontSize($r('sys.float.ohos_id_text_size_body1'))
302                  .fontColor($r('sys.color.ohos_id_color_text_primary'))
303              }
304              .width('100%')
305              .height($r('app.float.id_item_height_large'))
306              .onClick(() => {
307                this.mPresenter.sendMessage();
308              })
309
310              Divider()
311                .color($r('sys.color.ohos_id_color_list_separator'))
312                .lineCap(LineCapStyle.Square)
313                .width('100%')
314                .padding({ left: $r('app.float.id_item_height_max') })
315            }
316
317          }
318          .width('100%')
319          .height('100%')
320          .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
321        } else {
322          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
323            Button() {
324              Image($r('app.media.ic_public_more'))
325                .width($r('app.float.id_card_margin_max'))
326                .height($r('app.float.id_card_margin_max'))
327            }
328            .width($r('app.float.id_item_height_mid'))
329            .height($r('app.float.id_item_height_mid'))
330            .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
331            .margin({ right: $r('app.float.id_card_margin_xl') })
332            .type(ButtonType.Normal)
333            .opacity(0.4)
334          }
335          .width('100%')
336          .height($r('app.float.id_item_height_large'))
337          .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
338          .zIndex(3)
339
340          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
341            Text($r('app.string.dialer'))
342              .fontSize($r('sys.float.ohos_id_text_size_headline6'))
343              .fontWeight(FontWeight.Bold)
344              .fontColor($r('sys.color.ohos_id_color_text_primary'))
345              .margin({ left: $r('app.float.id_card_margin_max') })
346          }
347          .width('100%')
348          .height($r('app.float.id_item_height_large'))
349          .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
350          .zIndex(3)
351
352          Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
353            CallRecord()
354          }
355          .height('100%')
356          .zIndex(1)
357        }
358      }
359      .width('40%')
360      .height('100%')
361      .alignItems(HorizontalAlign.Center)
362      .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
363
364      Column() {
365        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
366
367          DialPad({ mPresenter: $mPresenter })
368
369          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
370            //TODO 双卡拨号按钮
371            Button()
372              .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
373              .width($r('app.float.id_item_height_max'))
374              .height($r('app.float.id_item_height_max'))
375              .enabled(false)
376
377            Button() {
378              Image($r('app.media.ic_public_phone_filled_white'))
379                .width($r('app.float.id_item_height_sm'))
380                .height($r('app.float.id_item_height_sm'))
381            }
382            .width('68vp')
383            .height('68vp')
384            .backgroundColor($r('sys.color.ohos_id_color_connected'))
385            // Currently, it is not possible to tell whether the device has dial capability.
386            // 1. The dial button in phone is enable.
387            // 2. The dial button in tablet is enable only when sim card is inserted.
388            .opacity(!EnvironmentProp.isTablet() || this.haveSimCard
389              ? 1 : $r('sys.float.ohos_id_alpha_disabled'))
390            .onClick(() => {
391              if (this.tele_number.length > 0) {
392                this.mPresenter.dialing(this.mPresenter.all_number);
393                AppStorage.SetOrCreate('tele_number', '');
394                this.mPresenter.all_number = '';
395              }
396            })
397
398            Button() {
399              Image($r('app.media.ic_public_dial_delete'))
400                .width('28vp')
401                .height('28vp')
402            }
403            .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
404            .width($r('app.float.id_item_height_max'))
405            .height($r('app.float.id_item_height_max'))
406            .type(ButtonType.Normal)
407            .opacity(this.tele_number.length > 0 ? 1 : 0.6)
408            .enabled(this.tele_number.length > 0 ? true : false)
409            .gesture(
410            LongPressGesture({ repeat: false, fingers: 1, duration: 700 })
411              .onAction((event: GestureEvent) => {
412                AppStorage.SetOrCreate('tele_number', '');
413                this.mPresenter.all_number = '';
414              })
415            )
416            .onClick(() => {
417              this.mPresenter.pressVibrate();
418              this.mPresenter.all_number = this.mPresenter.all_number.substr(0, this.mPresenter.all_number.length - 1)
419              this.mPresenter.deleteTeleNum();
420              this.mPresenter.deleteAddSpace();
421            })
422          }
423          .width('100%')
424          .height($r('app.float.dialer_keypad_button_height'))
425          .padding({
426            left: $r('app.float.dialer_keypad_button_height'),
427            right: $r('app.float.dialer_keypad_button_height')
428          })
429        }
430        .width('100%')
431        .height('100%')
432        .padding({ bottom: $r('app.float.dialer_keypad_button_height') })
433      }
434      .width('60%')
435      .height('100%')
436      .backgroundColor($r('sys.color.ohos_id_color_primary_contrary'))
437    }
438    .width('100%')
439    .height('100%')
440  }
441}