### File

`src/app/tasks/tasks.page.ts`

### Metadata

selector | `app-tasks`
styleUrls | `./tasks.page.scss`
templateUrl | `./tasks.page.html`

### Index

###### Properties

- tasks

###### Methods

- addTask
- clearTime
- deleteTask
- editTask
- formatHour
- formatMinute
- isValidTime
- padZero
- Async saveTask
- sortTasks

### Constructor

`constructor(alertController: AlertController)`
Defined in src/app/tasks/tasks.page.ts:15

Parameters :

Name | Type | Optional
alertController | `AlertController` | No

### Methods

addTask
`addTask()`
Defined in src/app/tasks/tasks.page.ts:40
Returns : `void`

clearTime
`clearTime(task: literal type, type: "start" | "end")`
Defined in src/app/tasks/tasks.page.ts:48

Parameters :

Name | Type | Optional
task | `literal type` | No
type | `"start" | "end"` | No

Returns : `void`

deleteTask
`deleteTask(index: number)`
Defined in src/app/tasks/tasks.page.ts:44

Parameters :

Name | Type | Optional
index | `number` | No

Returns : `void`

editTask
`editTask(index: number)`
Defined in src/app/tasks/tasks.page.ts:19

Parameters :

Name | Type | Optional
index | `number` | No

Returns : `void`

formatHour
`formatHour(task: literal type, type: "start" | "end")`
Defined in src/app/tasks/tasks.page.ts:58

Parameters :

Name | Type | Optional
task | `literal type` | No
type | `"start" | "end"` | No

Returns : `void`

formatMinute
`formatMinute(task: literal type, type: "start" | "end")`
Defined in src/app/tasks/tasks.page.ts:66

Parameters :

Name | Type | Optional
task | `literal type` | No
type | `"start" | "end"` | No

Returns : `void`

isValidTime
`isValidTime(hour: string, minute: string)`
Defined in src/app/tasks/tasks.page.ts:78

Parameters :

Name | Type | Optional
hour | `string` | No
minute | `string` | No

Returns : `boolean`

padZero
`padZero(num: string)`
Defined in src/app/tasks/tasks.page.ts:74

Parameters :

Name | Type | Optional
num | `string` | No

Returns : `string`

Async saveTask
`saveTask(index: number)`
Defined in src/app/tasks/tasks.page.ts:23

Parameters :

Name | Type | Optional
index | `number` | No

Returns : `any`

sortTasks
`sortTasks()`
Defined in src/app/tasks/tasks.page.ts:84
Returns : `void`

### Properties

tasks
Type : `literal type[]`

Default value : `[ { startTime: '08:00', endTime: '11:30', content: '早间任务', editing: false, startHour: '08', startMinute: '00', endHour: '11', endMinute: '30' }, { startTime: '12:00', endTime: '17:30', content: '中间任务', editing: false, startHour: '12', startMinute: '00', endHour: '17', endMinute: '30' }, { startTime: '18:00', endTime: '21:30', content: '晚间任务', editing: false, startHour: '18', startMinute: '00', endHour: '21', endMinute: '30' }, // Add more tasks as needed ]`

Defined in src/app/tasks/tasks.page.ts:10

    import { Component } from '@angular/core';
    import { AlertController } from '@ionic/angular';

    @Component({
      selector: 'app-tasks',
      templateUrl: './tasks.page.html',
      styleUrls: ['./tasks.page.scss'],
    })
    export class TasksPage {
      tasks: { startTime: string; endTime: string; content: string; editing: boolean; startHour: string; startMinute: string; endHour: string; endMinute: string; }[] = [
        { startTime: '08:00', endTime: '11:30', content: '早间任务', editing: false, startHour: '08', startMinute: '00', endHour: '11', endMinute: '30' },
        { startTime: '12:00', endTime: '17:30', content: '中间任务', editing: false, startHour: '12', startMinute: '00', endHour: '17', endMinute: '30' },
        { startTime: '18:00', endTime: '21:30', content: '晚间任务', editing: false, startHour: '18', startMinute: '00', endHour: '21', endMinute: '30' },
        // Add more tasks as needed
      ];

      constructor(private alertController: AlertController) {}

      editTask(index: number) {
        this.tasks[index].editing = true;
      }

      async saveTask(index: number) {
        const task = this.tasks[index];
        if (this.isValidTime(task.startHour, task.startMinute) && this.isValidTime(task.endHour, task.endMinute)) {
          task.startTime = `${this.padZero(task.startHour)}:${this.padZero(task.startMinute)}`;
          task.endTime = `${this.padZero(task.endHour)}:${this.padZero(task.endMinute)}`;
          task.editing = false;
          this.sortTasks();
        } else {
          const alert = await this.alertController.create({
            header: '时间错误',
            message: '小时不能超过24，分钟不能超过60。',
            buttons: ['确定']
          });
          await alert.present();
        }
      }

      addTask() {
        this.tasks.push({ startTime: '00:00', endTime: '00:00', content: '新任务', editing: true, startHour: '00', startMinute: '00', endHour: '00', endMinute: '00' });
      }

      deleteTask(index: number) {
        this.tasks.splice(index, 1);
      }

      clearTime(task: { startHour: string; startMinute: string; endHour: string; endMinute: string; }, type: 'start' | 'end') {
        if (type === 'start') {
          task.startHour = '';
          task.startMinute = '';
        } else {
          task.endHour = '';
          task.endMinute = '';
        }
      }

      formatHour(task: { startHour: string; endHour: string; }, type: 'start' | 'end') {
        if (type === 'start' && task.startHour) {
          task.startHour = this.padZero(task.startHour);
        } else if (type === 'end' && task.endHour) {
          task.endHour = this.padZero(task.endHour);
        }
      }

      formatMinute(task: { startMinute: string; endMinute: string; }, type: 'start' | 'end') {
        if (type === 'start' && task.startMinute) {
          task.startMinute = this.padZero(task.startMinute);
        } else if (type === 'end' && task.endMinute) {
          task.endMinute = this.padZero(task.endMinute);
        }
      }

      padZero(num: string): string {
        return num.length < 2 ? '0' + num : num;
      }

      isValidTime(hour: string, minute: string): boolean {
        const h = parseInt(hour, 10);
        const m = parseInt(minute, 10);
        return h >= 0 && h < 24 && m >= 0 && m < 60;
      }

      sortTasks() {
        this.tasks.sort((a, b) => {
          const aStart = parseInt(a.startHour) * 60 + parseInt(a.startMinute);
          const bStart = parseInt(b.startHour) * 60 + parseInt(b.startMinute);
          return aStart - bStart;
        });
      }
    }

    <ion-header>
      <ion-toolbar>
        <ion-title>任务管理</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div *ngIf="tasks.length === 0" class="empty-tasks">
        <ion-text color="medium">
          <h2>您的任务空空如也，来添加一些任务吧！</h2>
        </ion-text>
      </div>

      <ion-list *ngIf="tasks.length > 0">
        <ion-item-sliding *ngFor="let task of tasks; let i = index">
          <ion-item>
            <ion-button fill="outline" (click)="editTask(i)" slot="start" class="edit-button">
              <ion-icon name="create-outline"></ion-icon>
            </ion-button>
            <ion-label *ngIf="!task.editing" class="time-label">{{task.startTime}} - {{task.endTime}}</ion-label>
            <div *ngIf="task.editing" class="time-edit">
              <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
              <span>:</span>
              <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
              <span> - </span>
              <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
              <span>:</span>
              <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
            </div>
            <ion-label *ngIf="!task.editing" class="content-label">{{task.content}}</ion-label>
            <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
            <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
              <ion-icon name="checkmark-outline"></ion-icon>
            </ion-button>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option color="danger" (click)="deleteTask(i)" class="delete-button">删除</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>

      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button (click)="addTask()">
          <ion-icon name="add-outline"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>

`./tasks.page.scss`

    ion-content {
      --background: #f0f0f5;

      .empty-tasks {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-align: center;
      }

      ion-list {
        margin: 20px;

        ion-item {
          --background: #ffffff;
          --border-radius: 8px;
          margin-bottom: 15px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          height: 100px; /* Increased height for better touch area */
          align-items: center; /* Center content vertically */
          display: flex; /* Use flexbox for vertical alignment */
          font-size: 18px;

          .edit-button, .save-button {
            font-size: 24px;
          }

          .time-label, .content-label, .content-input, .time-input {
            flex: 1; /* Ensure content takes up available space */
            text-align: center; /* Center text horizontally */
          }

          .time-edit {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1; /* Ensure the time-edit div takes up available space */
            font-size: 18px;

            ion-input {
              max-width: 50px;
              margin: 0 5px;
              text-align: center;
              --padding-start: 0;
              --padding-end: 0;
              --border: none; /* Remove underline */
            }

            span {
              margin: 0 5px;
            }
          }
        }
      }

      .delete-button {
        width: 100px; /* Increased width for better touch area */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; /* Ensure button height matches item height */
      }

      ion-fab {
        margin-bottom: 20px;

        ion-fab-button {
          --background: #3880ff;
          --color: white;
        }
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""