This is the 22nd day of my participation in Gwen Challenge

The main idea of the function we want to implement today comes from the following screenshots to configure the date display in our Tray bar:

However, we didn’t want to be so complicated at the beginning (it will be improved continuously with the recommendation of the project). We just want to make a reasonable use of Tray. The area that the menu bar can display is not large, and if it occupies too much area, it will not be friendly to display of other applications:

Each person has different needs for displaying data, so it is necessary to do a Setting to configure the display of Tray time.

Add Setting page

A Setting page is added to configure the parameter configuration of Tray display. Together with the previous Setting, many configuration items have been added. Therefore, I should use Naive UI NTabs to switch different configuration items in the Setting component.

Take a look at the renderings:

Specific code mainly refer to the official website documents, but also relatively simple:

<template> < n-pattern-content title=" Set "closable > <n-tabs default-value="normalSetting" size="large" > < N-tab-pane Name = "normalSetting TAB =" general Settings ">" < n - space vertical > < h4 > < / h4 > < get holiday n - switch v - model: value = "inputSwitchFestivalsModel" Size ="large" @update-value="updateFestivalsModel" /> <h4> <n-switch V-model :value="inputSwitchWeatherModel" size="large" @update-value="updateWeatherModel" /> <n-space v-if="inputSwitchWeatherModel" inline > <n-input-number V-model :value="longitude" :min=" longitude" : Max ="longitude" : v-model:value="longitude" :min=" longitude" : Max ="longitude" :value="longitude" @update:value="changeLocalLocation" /> <n-input-number v-model:value="latitude" :min="-90" :max="90" :show-button="false" placeholder=" latitude "@update:value="changeLocalLocation" /> </n-space> </n-space> </n-tab-pane> <n-tab-pane name="menuSetting" TAB ="menu bar setting "> < N-space vertical> < H4 > Display holiday (lunar calendar)</ H4 > < N-switch V-model :value="trayFestivalsModel" size="large" @update-value="updateTraySetting" /> <h4> Display weather forecast </h4> < N-switch V-model :value="trayWeatherModel" size="large" @update-value="updateTraySetting" /> <h4> show week </h4> <n-switch V-model :value="trayWeekModel" size="large" @update-value="updateTraySetting" /> <h4> Display seconds </h4> <n-switch v-model:value="traySecondsModel" size="large" @update-value="updateTraySetting" /> </n-space> </n-tab-pane> <n-tab-pane Name ="focusSetting" TAB ="focusSetting" > <n-space vertical> <n-slider v-model:value="focus_time" :step="5" :min="5" : Max ="120" /> <n-button type="primary" size="large" @click="focus" > <template #icon> <n-icon> <caret-right-icon /> </n-icon> </template> {{ focusLabel }} </n-button> </n-space> </n-tab-pane> </n-tabs> </n-drawer-content> </template>Copy the code

As long as the parameters of the menu bar changes, we can directly use electron. IpcRenderer. Send the parameters to the Main to the Main thread to get:

updateTraySetting(): void {
  window.electron.ipcRenderer.send('updateTraySetting', {
    trayFestivalsModel: this.trayFestivalsModel,
    trayWeatherModel: this.trayWeatherModel,
    trayWeekModel: this.trayWeekModel,
    traySecondsModel: this.traySecondsModel,
  });
},
Copy the code

Configure the Tray time display parameters

Every time we capture the changing parameters, we need to manipulate the parameters and stitch them together into a recognizable format for Momentjs. Here I would like to thank the Momentjs plugin for providing many format parameters.

moment().format('MMMM Do YYYY, h:mm:ss a'); // June 22nd 2021, 9:11:20 pm
moment().format('dddd');                    // Tuesday
moment().format("MMM Do YY");               // Jun 22nd 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-06-22T21:11:20+08:00
Copy the code

The specific format stitching method is as follows:

// ClockService.js
  /* {
    trayFestivalsModel: true,
    trayWeatherModel: false,
    trayWeekModel: true,
    traySecondsModel: true
  }*/
  setParams(params: any) {
    this.params = params;

    // MMMDo dddd HH:mm:ss
    let default_format = 'MMMDo ';

    if (this.params.trayWeekModel) {
      default_format = default_format.concat('dddd ');
    }

    default_format = default_format.concat('HH:mm');

    if (this.params.traySecondsModel) {
      default_format = default_format.concat(':ss');
    }

    return this.setFormat(default_format);
  }
Copy the code

Another parameter is whether to display the lunar calendar:

// ClockService.js toString(): string { let showString = ''; if (this.params.trayFestivalsModel) { const lunarService = new LunarService(); const dayTextInChinese = lunarService.showNongliData(true); showString = showString.concat(... [dayTextInChinese, ' ']); } return showString.concat(Moment().format(this.getFormat())); }Copy the code

In this way, the changes of Tray display can be seen in real time after Setting configuration.

Of course, in the fetch event, add a catch method:

ipcMain.on('updateTraySetting', (_, params) => {
  if (mainApp == null) {
    mainApp = new App();
  }
  mainApp.setClockParams(params);
});
Copy the code

You can fork the code to see how it works

Continue refactoring

To continue our discussion yesterday, how to merge multiple N-drawers into one:

<n-drawer
    v-model:show="visibleFullSetting"
    :width="settingDrawerWidth"
    placement="left"
  >
    <setting-sub
      v-model:changeShowWeather="changeShowWeather"
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:location="location"
      @focusClick="focusClick"
    />
  </n-drawer>
  <n-drawer
    v-model:show="visibleFullDateView"
    :width="hlDrawerWidth"
    placement="left"
  >
    <date-view-sub
      v-model:date="date"
    />
  </n-drawer>
  <n-drawer
    v-model:show="visibleECSub"
    :width="ecDrawerWidth"
    placement="left"
  >
    <event-create-sub
      v-model:event="event"
      @addEventClick="addEventClick"
    />
  </n-drawer>
Copy the code

The main use here is of a concept described in the Vue official website documentation: compute properties and listeners

Vue provides a more general way to observe and respond to changes in data on a currently active instance: listening properties. It’s easy to abuse Watch when you have some data that needs to change with other data — especially if you’ve used AngularJS before. However, it is often better to use computed properties rather than imperative Watch callbacks. Consider this refactoring:

<n-drawer v-model:show="showDrawer" :width="settingDrawerWidth" placement="left" > <setting-sub v-if="visibleFullSetting" v-model:changeShowWeather="changeShowWeather" v-model:changeShowFestivals="changeShowFestivals" v-model:location="location" @focusClick="focusClick" /> <date-view-sub  v-if="visibleFullDateView" v-model:date="date" /> <event-create-sub v-if="visibleECSub" v-model:event="event" @addEventClick="addEventClick" /> </n-drawer> // watch visibleFullSetting(newValue) { this.showDrawer = newValue || this.visibleFullDateView || this.visibleECSub; }, visibleFullDateView(newValue) { this.showDrawer = this.visibleFullSetting || newValue || this.visibleECSub; }, visibleECSub(newValue) { this.showDrawer = this.visibleFullSetting || this.visibleFullDateView || newValue; },Copy the code

The code above is imperative and repetitive, and the showDrawer is dynamically bound to the Model. Modifying the showDrawer itself does not change these three variables, so we take it one step further and compare it to the version that evaluates properties:

computed: { showDrawer(): boolean { return this.visibleFullSetting || this.visibleFullDateView || this.visibleECSub; }},Copy the code

Much better, isn’t it?

But it says showDrawer is read-only, so we need to add the Setter.

Evaluate the Setter for the property

/ /... computed: { showDrawer: { // getter get(): boolean { return this.visibleFullSetting || this.visibleFullDateView || this.visibleECSub; }, // setter set(newValue: boolean) { this.visibleFullSetting = newValue; this.visibleFullDateView = newValue; this.visibleECSub = newValue; }},}, //...Copy the code

If the set method is triggered after clicking the “close” N-drawer button, reset the human variables to false. Ensure the accuracy and integrity of the code.

summary

Tonight, I mainly finished the dynamic configuration function of Tray display and continued to reconstruct the known left small tail.

Tomorrow we’ll continue with the weather Tray presentation that we didn’t finish today. To be continued!

The code has been synced to Github: github.com/fanly/fanly…