src/app/course-tabs/course-tabs/course-tabs.component.ts
The Course Tabs bar, along with the action buttons (settings, feedback, etc.).
| selector | app-course-tabs |
| styleUrls | course-tabs.component.css |
| templateUrl | ./course-tabs.component.html |
Properties |
|
Methods |
constructor(courseService: CourseService, toolService: ToolService, settingsService: SettingsService)
|
||||||||||||||||
|
Constructor
Parameters :
|
| closeModal |
closeModal()
|
|
Closes the feedback modal.
Returns :
void
|
| courseOverlay |
courseOverlay()
|
|
Toggles the course overlay open and closed.
Returns :
void
|
| openCourse | ||||||||
openCourse(courseId: number)
|
||||||||
|
Opens the course in Canvas in a new tab.
Parameters :
Returns :
void
|
| openModal |
openModal()
|
|
Opens the feedback modal.
Returns :
void
|
| Public courseService |
courseService:
|
Type : CourseService
|
|
Provides information and functionality for courses selected by the user.
|
| modalActions |
modalActions:
|
Default value : new EventEmitter<string | MaterializeAction>()
|
|
Used to open and close the modal for feedback. |
| Public settingsService |
settingsService:
|
Type : SettingsService
|
| Public toolService |
toolService:
|
Type : ToolService
|
|
Provides information and functionality for tools available on the server.
|
import { Component, EventEmitter } from '@angular/core';
import { CourseService } from '../../course.service';
import { ToolService } from '../../tool.service';
import { MaterializeAction } from 'angular2-materialize';
import { SettingsService } from '../../settings.service';
import { KatanaService } from '../../katana.service';
/** The Course Tabs bar, along with the action buttons (settings, feedback, etc.). */
@Component({
selector: 'app-course-tabs',
templateUrl: './course-tabs.component.html',
styleUrls: ['./course-tabs.component.css']
})
export class CourseTabsComponent {
/**
* Used to open and close the modal for feedback.
*/
modalActions = new EventEmitter<string | MaterializeAction>();
/**
* Constructor
* @param courseService Provides information and functionality for courses selected by the user.
* @param toolService Provides information and functionality for tools available on the server.
*/
constructor(public courseService: CourseService,
public toolService: ToolService,
public settingsService: SettingsService) { }
/**
* Toggles the course overlay open and closed.
*/
courseOverlay() {
this.courseService.courseSelectionOpen = !this.courseService.courseSelectionOpen;
}
/**
* Opens the feedback modal.
*/
openModal() {
this.modalActions.emit({ action: 'modal', params: ['open'] });
}
/**
* Closes the feedback modal.
*/
closeModal() {
this.modalActions.emit({ action: 'modal', params: ['close'] });
}
/**
* Opens the course in Canvas in a new tab.
* @param {number} courseId The Canvas ID of the course
*/
openCourse(courseId: number): void {
window.open('https://byui.instructure.com/courses/' + courseId, '_blank');
}
/**
* Opens the course in Canvas in a new tab.
* @param {Course} course - The course to count issues in
* @param {string} status - Issue status to match
* @returns {number} The total number of issues matching the provided status.
*/
getIssueCount(course, status): number | string {
if (!course.issueItems) return 0;
if (course.error) return 'E';
return course.issueItems.reduce((acc, issueItem) => {
let issues = issueItem.issues.filter(issue => {
if (!status) return true;
return issue.status === status;
});
return acc + issues.length;
}, 0);
}
}
<div class="tabs-container">
<ul materialize class="tabs navy flex-container">
<li class="tab" style="display: none;"><a class="active"></a></li> <!-- make materialize not worry about the active tab -->
<li *ngFor="let course of courseService.courses" class="tab" [class.selectable]="toolService.toolViewOpen || courseService.courseSelectionOpen"
[class.selected]="courseService.selectedCourse === course && (toolService.toolViewOpen || courseService.courseSelectionOpen)"
(click)="courseService.selectedCourse = course">
<div class="ashen-text" [class.pulseypulse]="course.processing">
{{course.course_code}}
<span *ngIf="course.issueItems.length > 0" class="issue-badge">{{getIssueCount(course, 'untouched')}}</span>
</div>
<div class="course-action-container" *ngIf="courseService.courseSelectionOpen">
<i class="course-action material-icons" (click)="openCourse(course.id)">
open_in_new
</i>
<i class="course-action material-icons smooth-width danger-text" (click)="courseService.removeCourse(course)">
clear
</i>
</div>
</li>
<li class="indicator"></li>
<!-- Action Buttons -->
<div class="action-button-container">
<!-- Edit Courses Button -->
<div class="addButton" *ngIf="!toolService.toolViewOpen" materialize="tooltip" data-position="left" data-tooltip="Edit Courses">
<i class="ashen-text material-icons no-select" [class.pulseypulse]="courseService.courses.length === 0 && !courseService.courseSelectionOpen"
(click)="courseOverlay()">edit</i>
</div>
<!-- Feedback Button -->
<div class="addButton" materialize="tooltip" data-position="left" data-tooltip="Feedback">
<i class="ashen-text material-icons no-select" (click)="openModal()" materialize="dropdown">feedback</i>
</div>
<!-- Settings Button -->
<div class="addButton">
<i materialize="dropdown" class="dropdown-trigger ashen-text material-icons no-select" [materializeParams]="[{constrain_width: false, alignment: 'left', coverTrigger: false}]"
data-activates="settingsDropdown">settings</i>
<!-- Settings Menu Dropdown -->
<ul id='settingsDropdown' class='dropdown-content'>
<li>
<a (click)="settingsService.setTheme('classic')">
<i class="material-icons">invert_colors</i>
Classic Theme
</a>
</li>
<li>
<a (click)="settingsService.setTheme('charcoal')">
<i class="material-icons">invert_colors</i>
Charcoal Theme
</a>
</li>
<li>
<a (click)="settingsService.setTheme('navy')">
<i class="material-icons">invert_colors</i>
Navy Theme
</a>
</li>
<li class="divider" tabindex="-1"></li>
<li>
<a (click)="settingsService.setLocalStorage('goofMessages')">
<i class="material-icons">scatter_plot</i>
Turn Loading Messages {{settingsService.checkLocalStorage('goofMessages') ? 'Off' : 'On'}}
</a>
</li>
<li>
<a href="/release-notes" target="_blank">
<i class="material-icons">notes</i>
Release Notes
</a>
</li>
</ul>
</div>
</div>
</ul>
<!-- Course Selection Overlay -->
<app-course-selection></app-course-selection>
</div>
<!-- Feedback Modal - Must stay outside of .tabs-container -->
<div id="feedbackModal" class="modal" materialize="modal" [materializeActions]="modalActions">
<div class="modal-content no-padding">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeMqVujrTfgj056YfvnhtOWEKB3Y1-Ziyp73JB0yqNjx0cwyg/viewform?embedded=true"
frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
</div>