kj
/
lms-app
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Teacher attendance UI

master
kj1352 5 年前
父节点
624cd97358
当前提交
6cca967caa
共有 6 个文件被更改，包括 549 次插入 和 242 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +417
    -237
      src/app/attendance/attendance.component.html
  2. +1
    -0
      src/app/attendance/attendance.component.scss
  3. +23
    -4
      src/app/attendance/attendance.component.ts
  4. +97
    -0
      src/app/services/demo.service.ts
  5. +1
    -1
      src/app/tabs/more/more.component.html
  6. +10
    -0
      src/app/tabs/more/more.component.scss

+ 417
- 237
src/app/attendance/attendance.component.html 查看文件

@@ -9,263 +9,443 @@
</h5> </h5>
</header> </header>


<ul class="segment-list">
<li [ngClass]="{'active' : selectedSegment === 'ALL'}"
(click)="selectedSegment = 'ALL'">
<div class="container">
<h4> ALL </h4>
<p> 50% </p>
</div>
</li>

<li [ngClass]="{'active' : selectedSegment === 'KAN'}"
(click)="selectedSegment = 'KAN'">
<div class="container">
<h4> KAN </h4>
<p> 50% </p>
</div>
</li>

<li [ngClass]="{'active' : selectedSegment === 'ENG'}"
(click)="selectedSegment = 'ENG'">
<div class="container">
<h4> ENG </h4>
<p> 50% </p>
</div>
</li>

<li [ngClass]="{'active' : selectedSegment === 'MAT'}"
(click)="selectedSegment = 'MAT'">
<div class="container">
<h4> MAT </h4>
<p> 50% </p>
</div>
</li>

<li [ngClass]="{'active' : selectedSegment === 'PHY'}"
(click)="selectedSegment = 'PHY'">
<div class="container">
<h4> PHY </h4>
<p> 50% </p>
</div>
</li>

<li [ngClass]="{'active' : selectedSegment === 'CHE'}"
(click)="selectedSegment = 'CHE'">
<div class="container">
<h4> CHE </h4>
<p> 50% </p>
</div>
</li>
</ul>


<section class="segment-tabs">
<button (click)="selectedSegmentTab = 'report'"
[ngClass]="{'active': selectedSegmentTab === 'report' }"> Report </button>
<button (click)="selectedSegmentTab = 'details'"
[ngClass]="{'active': selectedSegmentTab === 'details' }"> Details </button>
</section>
<section *ngIf="demoType === 'Student'">
<ul class="segment-list">
<li [ngClass]="{'active' : selectedSegment === 'ALL'}"
(click)="selectedSegment = 'ALL'">
<div class="container">
<h4> ALL </h4>
<p> 50% </p>
</div>
</li>


<ul class="attendance-report" *ngIf="selectedSegmentTab === 'report'">
<li class="year" [ngClass]="{'active' : selectedReportYear === 2020 }">
<header (click)="selectedReportYear === 2020 ? selectedReportYear = 0 : selectedReportYear = 2020">
<label> Year of 2020 - 2021 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>

<li class="year" [ngClass]="{'active' : selectedReportYear === 2019 }">
<header (click)="selectedReportYear === 2019 ? selectedReportYear = 0 : selectedReportYear = 2019">
<label> Year of 2019 - 2020 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content">
<label> June </label>
<p> 90 Class : 60 Hrs </p>
<li [ngClass]="{'active' : selectedSegment === 'KAN'}"
(click)="selectedSegment = 'KAN'">
<div class="container">
<h4> KAN </h4>
<p> 50% </p>
</div> </div>
<div class="progress">
50%
</li>

<li [ngClass]="{'active' : selectedSegment === 'ENG'}"
(click)="selectedSegment = 'ENG'">
<div class="container">
<h4> ENG </h4>
<p> 50% </p>
</div> </div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
</li>


<ul class="subject-list">
<header> <p> Today: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>
<li [ngClass]="{'active' : selectedSegment === 'MAT'}"
(click)="selectedSegment = 'MAT'">
<div class="container">
<h4> MAT </h4>
<p> 50% </p>
</div>
</li>


<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>
<li [ngClass]="{'active' : selectedSegment === 'PHY'}"
(click)="selectedSegment = 'PHY'">
<div class="container">
<h4> PHY </h4>
<p> 50% </p>
</div>
</li>


<li class="subject warning">
<li [ngClass]="{'active' : selectedSegment === 'CHE'}"
(click)="selectedSegment = 'CHE'">
<div class="container">
<h4> CHE </h4>
<p> 50% </p>
</div>
</li>
</ul>


<section class="segment-tabs">
<button (click)="selectedSegmentTab = 'report'"
[ngClass]="{'active': selectedSegmentTab === 'report' }"> Report </button>
<button (click)="selectedSegmentTab = 'details'"
[ngClass]="{'active': selectedSegmentTab === 'details' }"> Details </button>
</section>

<ul class="attendance-report" *ngIf="selectedSegmentTab === 'report'">
<li class="year" [ngClass]="{'active' : selectedReportYear === 2020 }">
<header (click)="selectedReportYear === 2020 ? selectedReportYear = 0 : selectedReportYear = 2020">
<label> Year of 2020 - 2021 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>

<li class="year" [ngClass]="{'active' : selectedReportYear === 2019 }">
<header (click)="selectedReportYear === 2019 ? selectedReportYear = 0 : selectedReportYear = 2019">
<label> Year of 2019 - 2020 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content"> <div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 10 Mins late </p>
<label> June </label>
<p> 90 Class : 60 Hrs </p>
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<header> <p> Yesterday: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
<div class="progress">
50%
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>


<li class="subject failed">
<ul class="subject-list">
<header> <p> Today: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 10 Mins late </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<header> <p> Yesterday: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 15 Mins late </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>


<li class="month" [ngClass]="{'active' : selectedList === 2}"
(click)="selectedList === 2 ? selectedList = 0 : selectedList = 2">
<div class="list-header">
<div class="content"> <div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
<label> July </label>
<p> 90 Class : 60 Hrs </p>
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 15 Mins late </p>
<div class="progress">
50%
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>


<li class="month" [ngClass]="{'active' : selectedList === 2}"
(click)="selectedList === 2 ? selectedList = 0 : selectedList = 2">
<div class="list-header">
<div class="content">
<label> July </label>
<p> 90 Class : 60 Hrs </p>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div> </div>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>


<ul class="subject-list">
<header> <p> 30th: </p> <div class="progress"> 50% </div> </header>
<li class="subject warning">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
<ul class="subject-list">
<header> <p> 30th: </p> <div class="progress"> 50% </div> </header>
<li class="subject warning">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Chemistry </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</section>


<li class="subject warning">
<section *ngIf="demoType === 'Teacher'">
<ul class="segment-list">
<li [ngClass]="{'active' : selectedSegment === classAttendance}"
(click)="selectedSegment = classAttendance" *ngFor="let classAttendance of attendanceList">
<div class="container">
<h4> {{ classAttendance.classLevel }} Std </h4>
</div>
</li>
<li [ngClass]="{'active' : selectedSegment === 'My'}"
(click)="selectedSegment = 'My'; selectedSegmentTab = 'details'">
<div class="container">
<h4> Self </h4>
</div>
</li>
</ul>

<section class="segment-tabs" *ngIf="selectedSegment && selectedSegment !== 'My'">
<button (click)="selectedSegmentTab = subject"
[ngClass]="{'active': selectedSegmentTab === subject }"
*ngFor="let subject of selectedSegment.subjects"> {{ subject.name }} </button>
</section>

<ul class="attendance-report" *ngIf="selectedSegmentTab">
<li class="year" [ngClass]="{'active' : selectedReportYear === attendance.year }" *ngFor="let attendance of selectedSegmentTab.attendance">
<header (click)="selectedReportYear === attendance.year ? selectedReportYear = '0' : selectedReportYear = attendance.year">
<label> Year of {{ attendance.year }} </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Student </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr *ngFor="let student of attendance.students">
<td> {{ student.name }} </td>
<td> {{ attendance.totalClasses - student.present }} </td>
<td> {{ student.present }} </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content"> <div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
<label> June </label>
<p> 90 Class : 60 Hrs </p>
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Chemistry </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
<div class="progress">
50%
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>


<li class="subject warning">
<ul class="subject-list">
<header> <p> Today: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 10 Mins late </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<header> <p> Yesterday: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 15 Mins late </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>


<li class="month" [ngClass]="{'active' : selectedList === 2}"
(click)="selectedList === 2 ? selectedList = 0 : selectedList = 2">
<div class="list-header">
<div class="content"> <div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
<label> July </label>
<p> 90 Class : 60 Hrs </p>
</div>
<div class="progress">
50%
</div> </div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>

<ul class="subject-list">
<header> <p> 30th: </p> <div class="progress"> 50% </div> </header>
<li class="subject warning">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Chemistry </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</section>
</section> </section>

+ 1
- 0
src/app/attendance/attendance.component.scss 查看文件

@@ -118,6 +118,7 @@
background-color: transparent; background-color: transparent;
color: var(--light-grey); color: var(--light-grey);
border-radius: 7px; border-radius: 7px;
flex-grow: 1;


&.active { &.active {
background-color: var(--teal-green); background-color: var(--teal-green);


+ 23
- 4
src/app/attendance/attendance.component.ts 查看文件

@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { DemoService } from '../services/demo.service';


@Component({ @Component({
selector: 'app-attendance', selector: 'app-attendance',
@@ -8,15 +9,33 @@ import { Location } from '@angular/common';
}) })
export class AttendanceComponent implements OnInit { export class AttendanceComponent implements OnInit {
selectedList: number = 1; selectedList: number = 1;
selectedSegment: string = 'ALL';
selectedSegmentTab: string = 'report';
selectedReportYear: number = 2020;
selectedSegment: any;
selectedSegmentTab: any;
selectedReportYear: any;
demoType: string;
attendanceList = [];


constructor( constructor(
private location: Location
private location: Location,
private demoService: DemoService
) { } ) { }


ngOnInit(): void { ngOnInit(): void {
this.demoType = localStorage.demoType;

this.attendanceList = this.demoService.attendanceList;

if (this.demoType === 'Teacher') {
this.selectedList = 1;
this.selectedSegment = this.attendanceList[0];
this.selectedSegmentTab = this.attendanceList[0].subjects[0];
this.selectedReportYear = this.attendanceList[0].subjects[0].attendance[0].year;
} else {
this.selectedList = 1;
this.selectedSegment = 'ALL';
this.selectedSegmentTab = 'report';
this.selectedReportYear = 2020;
}
} }


back() { back() {


+ 97
- 0
src/app/services/demo.service.ts 查看文件

@@ -323,6 +323,103 @@ export class DemoService {
}] }]
}]; }];


attendanceList = [{
classLevel: '10',
subjects: [{
name: 'MAT',
attendance: [{
year: '2020',
totalClasses: 30,
students: [{
name: 'Anand',
present: 25,
}, {
name: 'Bhagya',
present: 24,
}, {
name: 'Chintu',
present: 20
}, {
name: 'Dinesh',
present: 30,
}]
}, {
year: '2019',
totalClasses: 50,
students: [{
name: 'Anand',
present: 45,
}, {
name: 'Bhagya',
present: 44,
}, {
name: 'Chintu',
present: 40
}, {
name: 'Dinesh',
present: 40,
}]
}]
}, {
name: 'EVS',
attendance: [{
year: '2020',
totalClasses: 30,
students: [{
name: 'Anand',
present: 25,
}, {
name: 'Bhagya',
present: 24,
}, {
name: 'Chintu',
present: 20
}, {
name: 'Dinesh',
present: 30,
}]
}]
}]
}, {
classLevel: '8',
subjects: [{
name: 'MAT',
attendance: [{
year: '2020',
totalClasses: 20,
students: [{
name: 'Meghana',
present: 15,
}, {
name: 'Sandhya',
present: 14,
}, {
name: 'Zaid',
present: 10
}, {
name: 'Tchalabala',
present: 10,
}]
}, {
year: '2019',
totalClasses: 30,
students: [{
name: 'Meghana',
present: 25,
}, {
name: 'Sandhya',
present: 24,
}, {
name: 'Zaid',
present: 20
}, {
name: 'Tchalabala',
present: 30,
}]
}]
}]
}]

constructor() { constructor() {
} }
} }

+ 1
- 1
src/app/tabs/more/more.component.html 查看文件

@@ -29,7 +29,7 @@
</div> </div>


<section *ngIf="profileDetails" class="profile-details-holder"> <section *ngIf="profileDetails" class="profile-details-holder">
<section class="segment-buttons">
<section class="segment-buttons" [ngClass]="{'hide-scores' : demoType === 'Teacher'}">
<button (click)="selectedSegment='badges'" <button (click)="selectedSegment='badges'"
[ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button> [ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
<button (click)="selectedSegment='friends'" <button (click)="selectedSegment='friends'"


+ 10
- 0
src/app/tabs/more/more.component.scss 查看文件

@@ -120,6 +120,16 @@
background-color: var(--dark-grey); background-color: var(--dark-grey);
padding: 1px; padding: 1px;


&.hide-scores {
button {
width: calc(100% / 2);

&:nth-child(3) {
display: none;
}
}
}

button { button {
flex-grow: 1; flex-grow: 1;
border-radius: 7px; border-radius: 7px;