|
|
@@ -18,35 +18,34 @@
|
|
|
|
|
|
<ion-list>
|
|
|
<ion-item-sliding *ngFor="let task of tasks">
|
|
|
- <ion-item [ngClass]="getTaskStatusClass(task)">
|
|
|
- <ion-checkbox slot="start"
|
|
|
- [(ngModel)]="task.completed"
|
|
|
- (ionChange)="toggleComplete(task)">
|
|
|
+ <ion-item [class]="getTaskStatusClass(task)">
|
|
|
+ <ion-checkbox
|
|
|
+ [checked]="task.completed"
|
|
|
+ (ionChange)="toggleComplete(task)"
|
|
|
+ slot="start">
|
|
|
</ion-checkbox>
|
|
|
<ion-label>
|
|
|
- <div class="task-header">
|
|
|
- <h2>{{ task.title }}</h2>
|
|
|
- <ion-badge [color]="getTaskStatusColor(task)">
|
|
|
- {{ getTaskStatusText(task) }}
|
|
|
- </ion-badge>
|
|
|
- </div>
|
|
|
- <p *ngIf="task.content">{{ task.content }}</p>
|
|
|
- <p *ngIf="task.startTime || task.endTime">
|
|
|
- <ion-icon name="calendar-outline"></ion-icon>
|
|
|
- {{ task.startTime | date:'short' }}
|
|
|
- <span *ngIf="task.endTime">
|
|
|
- - {{ task.endTime | date:'short' }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
+ <h2>{{ task.title }}</h2>
|
|
|
+ <p>{{ task.content }}</p>
|
|
|
+ <ion-badge color="{{ getTaskStatusColor(task) }}">
|
|
|
+ {{ getTaskStatusText(task) }}
|
|
|
+ </ion-badge>
|
|
|
</ion-label>
|
|
|
+ <ion-button
|
|
|
+ *ngIf="task.getStatus() === TaskStatus.InProgress"
|
|
|
+ slot="end"
|
|
|
+ color="success"
|
|
|
+ (click)="completeTask(task)">
|
|
|
+ <ion-icon name="checkmark-circle-outline"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
</ion-item>
|
|
|
|
|
|
<ion-item-options side="end">
|
|
|
<ion-item-option color="primary" (click)="editTask(task)">
|
|
|
- <ion-icon slot="icon-only" name="create-outline"></ion-icon>
|
|
|
+ <ion-icon name="create-outline" slot="icon-only"></ion-icon>
|
|
|
</ion-item-option>
|
|
|
<ion-item-option color="danger" (click)="deleteTask(task)">
|
|
|
- <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
|
|
|
+ <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
|
|
|
</ion-item-option>
|
|
|
</ion-item-options>
|
|
|
</ion-item-sliding>
|
|
|
@@ -55,4 +54,18 @@
|
|
|
<ion-text color="medium" class="ion-text-center ion-padding" *ngIf="tasks.length === 0">
|
|
|
<p>暂无任务</p>
|
|
|
</ion-text>
|
|
|
+
|
|
|
+ <ion-card *ngIf="currentTask">
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>当前任务</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-card-content>
|
|
|
+ <h2>{{ currentTask.get('title') }}</h2>
|
|
|
+ <p>{{ currentTask.get('category') }}</p>
|
|
|
+ <ion-button expand="block" color="success" (click)="completeTask(currentTask)">
|
|
|
+ <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
|
|
|
+ 完成任务
|
|
|
+ </ion-button>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
</ion-content>
|