\\r\\n
\\r\\n\"","import { Component, ViewChild, ElementRef } from '@angular/core';\r\nimport { ServerService } from '../../server.service';\r\nimport { CourseService } from '../../course.service';\r\nimport { Course } from '../../interfaces';\r\n\r\n/**\r\n * Provides the user management for the selected courses, including a course search.\r\n * overlay to add/remove courses.\r\n */\r\n@Component({\r\n selector: 'app-course-selection',\r\n templateUrl: './course-selection.component.html',\r\n styleUrls: ['./course-selection.component.css']\r\n})\r\nexport class CourseSelectionComponent {\r\n /** Element reference to the sub-account filter input. */\r\n @ViewChild('subAccount') private subAccount: ElementRef;\r\n /** Element reference to the term filter input. */\r\n @ViewChild('term') private term: ElementRef;\r\n /** Element reference to the blueprint filter input. */\r\n @ViewChild('blueprint') private blueprint: ElementRef;\r\n /** Element reference to the search-by filter input. */\r\n @ViewChild('searchBy') private searchBy: ElementRef;\r\n /** Element reference to the search text input. */\r\n @ViewChild('searchText') private searchText: ElementRef;\r\n\r\n /** Whether or not a search is currently processing */\r\n searching = false;\r\n\r\n /** Holds what the last search was sorted by. */\r\n lastSortedBy: string;\r\n\r\n /** Results of a search. */\r\n courseResults: Course[] = [];\r\n\r\n /**\r\n * Constructor\r\n * @param {ServerService} serverService Provides functionality for making API calls to the Katana server.\r\n * @param {CourseService} courseService Provides information and management for selected courses.\r\n */\r\n constructor(private serverService: ServerService,\r\n public courseService: CourseService) { }\r\n\r\n /**\r\n * This retrieves all courses that match the given parameters from Canvas\r\n * and returns them as an array of course objects that have been modified\r\n * by us. The returned results will populate the 'courseResults' array and\r\n * will display in the results table in the course-selection html file.\r\n */\r\n async getCourses() {\r\n // Canvas makes you have an input of at least three characters to use the search_term in the API\r\n if (this.searchText.nativeElement.value.length > 2) {\r\n\r\n // Replace any whitespaces with '%20' for the query parameter and make everything lowercase\r\n const searchPhrase = this.searchText.nativeElement.value.replace(/\\s/g, '%20');\r\n // Set the loading circle to display before retrieving the courses\r\n this.searching = true;\r\n\r\n // Send the search parameters to the katana service to build the correct URI\r\n this.serverService.getCourses({\r\n subAccount: this.subAccount.nativeElement.value,\r\n term: this.term.nativeElement.value,\r\n blueprint: this.blueprint.nativeElement.value,\r\n searchPhrase: searchPhrase,\r\n searchBy: this.searchBy.nativeElement.value\r\n })\r\n /* After getting the courses from Canvas, check to make sure what you\r\n got back matches what is currently in the search text input box */\r\n .then((courses: Course[]) => {\r\n if (searchPhrase === this.searchText.nativeElement.value.replace(/\\s/g, '%20')) {\r\n this.searching = false;\r\n this.courseResults = courses;\r\n }\r\n })\r\n .catch(console.error);\r\n } else {\r\n /* If the string in the search box is less than three characters\r\n then stop searching and set the returned course results to an empty array\r\n instead of leaving the last results in the table */\r\n this.searching = false;\r\n this.courseResults = [];\r\n }\r\n }\r\n\r\n /**\r\n * Sorts the courseResults array according to the course attribute defined by 'param'.\r\n * @param {string} param The object key to be sorted.\r\n * @returns {void}\r\n */\r\n sortBy(param: any) {\r\n // If they click on the same category more than once, it will reverse the order of the results\r\n if (this.lastSortedBy === param) {\r\n this.courseResults = this.courseResults.reverse();\r\n this.lastSortedBy = param;\r\n return;\r\n }\r\n\r\n this.lastSortedBy = param;\r\n // Sort numerically\r\n if (param === 'id' || param === 'account' || param === 'blueprint') {\r\n this.courseResults.sort((a, b) => {\r\n return a[param] - b[param];\r\n });\r\n } else {\r\n // Sort alphabetically\r\n this.courseResults.sort((a, b) => {\r\n const name1 = a[param].toLowerCase();\r\n const name2 = b[param].toLowerCase();\r\n if (name1 < name2) {\r\n return -1;\r\n }\r\n if (name1 > name2) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Checks to see if the selected course from courseResults\r\n * is already in the courses array in courseService.\r\n * @param {object} course The course that is being checked.\r\n * @returns {boolean} Whether the course is already added.\r\n */\r\n isAdded(course: any) {\r\n return this.courseService.courses.find(c => c.id === course.id) !== undefined;\r\n }\r\n\r\n /** Deselects all selected courses. */\r\n removeAll() {\r\n this.courseService.courses.forEach(c => this.courseService.removeCourse(c));\r\n }\r\n\r\n /** Selects all courses found in the search */\r\n addAll() {\r\n this.courseResults.forEach(c => {\r\n if (!this.isAdded(c)) {\r\n this.courseService.addCourse(c);\r\n }\r\n });\r\n }\r\n\r\n /** Closes the courseSelect page when the user clicks on the margins of the page */\r\n closeCourseSelect() {\r\n this.courseService.courseSelectionOpen = false;\r\n }\r\n\r\n /** Stops the courseSelect page from closing when the user interacts with the page (area that is not in the margins)\r\n * @param {object} event The JS onClick event\r\n */\r\n stopEvent(event) {\r\n event.stopPropagation();\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MaterializeModule } from 'angular2-materialize';\r\nimport { RouterModule } from '@angular/router';\r\n\r\nimport { CourseSelectionComponent } from './course-selection/course-selection.component';\r\nimport { CourseTabsComponent } from './course-tabs/course-tabs.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n RouterModule,\r\n MaterializeModule\r\n ],\r\n exports: [\r\n CourseTabsComponent\r\n ],\r\n declarations: [\r\n CourseSelectionComponent,\r\n CourseTabsComponent\r\n ]\r\n})\r\nexport class CourseTabsModule { }\r\n","module.exports = \"/* Overrides Materialize tab CSS */\\r\\n\\r\\n.tabs-container ::-webkit-scrollbar {\\r\\n height: 5px;\\r\\n}\\r\\n\\r\\n.tabs-container ::-webkit-scrollbar-thumb {\\r\\n background: var(--primary-3);\\r\\n border-top: 1px solid var(--primary-4);\\r\\n border-left: none;\\r\\n }\\r\\n\\r\\n.tabs-container {\\r\\n position: fixed;\\r\\n top: var(--breadcrumbs-height);\\r\\n width: 100vw;\\r\\n z-index: 2;\\r\\n}\\r\\n\\r\\n.tabs {\\r\\n height: var(--breadcrumbs-height) !important;\\r\\n}\\r\\n\\r\\n.tabs .tab {\\r\\n display: inline-flex;\\r\\n height: var(--breadcrumbs-height);\\r\\n line-height: var(--breadcrumbs-height);\\r\\n transition: all .1s ease-in-out;\\r\\n}\\r\\n\\r\\n.tabs .tab div {\\r\\n padding: 0 24px;\\r\\n}\\r\\n\\r\\n.tabs .tab:not(.selectable):hover {\\r\\n cursor: default;\\r\\n}\\r\\n\\r\\n.tabs .tab.selectable:hover {\\r\\n background-color: var(--navy-light) !important;\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.tabs .indicator {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n.tabs .selected {\\r\\n background-color: var(--navy-light) !important;\\r\\n}\\r\\n\\r\\n.issue-badge {\\r\\n padding: 2px 4px;\\r\\n border-radius: 2px;\\r\\n margin-left: 5px;\\r\\n text-align: center;\\r\\n font-size: 12px;\\r\\n color: white;\\r\\n background-color: var(--navy-dark);\\r\\n}\\r\\n\\r\\n/* Close/open in Canvas buttons on the tabs in edit mode */\\r\\n\\r\\n.course-action-container {\\r\\n margin-left: -40px;\\r\\n}\\r\\n\\r\\n.course-action {\\r\\n color: var(--cobalt);\\r\\n cursor: pointer;\\r\\n line-height: var(--breadcrumbs-height) !important;\\r\\n padding: 0 2px;\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.addButton {\\r\\n background-color: var(--navy);\\r\\n cursor: pointer;\\r\\n height: calc(var(--breadcrumbs-height) + 1px);\\r\\n}\\r\\n\\r\\n/* Action buttons on the course tabs bar */\\r\\n\\r\\n.action-button-container {\\r\\n display: flex;\\r\\n position: -webkit-sticky;\\r\\n position: sticky;\\r\\n right: 0;\\r\\n z-index: 5;\\r\\n margin-left: auto;\\r\\n}\\r\\n\\r\\n.addButton>i {\\r\\n cursor: pointer;\\r\\n line-height: var(--breadcrumbs-height);\\r\\n padding: 0 20px;\\r\\n transition: all .1s ease-in-out;\\r\\n}\\r\\n\\r\\n.addButton>i:hover {\\r\\n background-color: var(--navy-light);\\r\\n}\\r\\n\\r\\n/* Adjusts the size for the feedback modal */\\r\\n\\r\\n.modal-content iframe {\\r\\n width: 100%;\\r\\n height: 70vh;\\r\\n}\\r\\n\\r\\n/* Fixes some CSS issues with the settings menu */\\r\\n\\r\\nul.dropdown-content {\\r\\n background-color: white !important;\\r\\n width: auto !important;\\r\\n position: fixed !important;\\r\\n top: auto !important;\\r\\n margin-top: 20px;\\r\\n left: auto !important;\\r\\n right: 20px !important;\\r\\n}\\r\\n\\r\\nul.dropdown-content:hover {\\r\\n background-color: white !important;\\r\\n}\\r\\n\\r\\n.dropdown-content a {\\r\\n color: var(--cobalt);\\r\\n padding: 14px 16px;\\r\\n}\\r\\n\\r\\n.dropdown-content a:hover {\\r\\n background-color: var(--ashen);\\r\\n}\\r\\n\\r\\n/* Animation used by the tabs when processing courses */\\r\\n\\r\\n.pulseypulse {\\r\\n -webkit-animation: pulseypulse 2s infinite ease-in-out;\\r\\n animation: pulseypulse 2s infinite ease-in-out;\\r\\n}\\r\\n\\r\\n@-webkit-keyframes pulseypulse {\\r\\n\\t0% {\\r\\n color: var(--ashen);\\r\\n }\\r\\n 75% {\\r\\n color: var(--cobalt);\\r\\n }\\r\\n 100% {\\r\\n color: var(--ashen);\\r\\n\\t}\\r\\n}\\r\\n\\r\\n@keyframes pulseypulse {\\r\\n\\t0% {\\r\\n color: var(--ashen);\\r\\n }\\r\\n 75% {\\r\\n color: var(--cobalt);\\r\\n }\\r\\n 100% {\\r\\n color: var(--ashen);\\r\\n\\t}\\r\\n}\"","module.exports = \"\\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n\\r\\n Course Selection\\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n\\r\\n\\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n\\r\\n | +/- | \\r\\n \\r\\nName | \\r\\nCode | \\r\\nInstructor | \\r\\nAccount | \\r\\nTerm | \\r\\nBlueprint | \\r\\nID | \\r\\nOpen in Canvas | \\r\\n
|---|---|---|---|---|---|---|---|---|
| \\r\\n {{isAdded(course) ? 'remove_circle' : 'add_circle'}}\\r\\n | \\r\\n{{course.course_name}} | \\r\\n{{course.course_code}} | \\r\\n{{course.instructor}} | \\r\\n{{course.account}} | \\r\\n{{course.term}} | \\r\\n{{course.blueprint}} | \\r\\n{{course.id}} | \\r\\n\\r\\n \\r\\n open_in_new\\r\\n \\r\\n | \\r\\n
\\r\\n
\\r\\n\\r\\n \\r\\n - \\r\\n
- \\r\\n
- \\r\\n\\r\\n \\r\\n {{course.course_code}}\\r\\n 0\\\" class=\\\"issue-badge\\\">{{getIssueCount(course, 'untouched')}}\\r\\n\\r\\n\\r\\n\\r\\n \\r\\n open_in_new\\r\\n \\r\\n \\r\\n clear\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n
\"","import { Component, EventEmitter } from '@angular/core';\r\nimport { CourseService } from '../../course.service';\r\nimport { ToolService } from '../../tool.service';\r\nimport { MaterializeAction } from 'angular2-materialize';\r\nimport { SettingsService } from '../../settings.service';\r\nimport { ServerService } from '../../server.service';\r\n\r\n/** The Course Tabs bar, along with the action buttons (settings, feedback, etc.). */\r\n@Component({\r\n selector: 'app-course-tabs',\r\n templateUrl: './course-tabs.component.html',\r\n styleUrls: ['./course-tabs.component.css']\r\n})\r\nexport class CourseTabsComponent {\r\n\r\n /**\r\n * Used to open and close the modal for feedback.\r\n */\r\n modalActions = new EventEmitter\\r\\n
\\r\\n\"","import { Component, EventEmitter } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { ToolService } from '../../tool.service';\r\nimport { AuthGuardService } from '../../authguard.service'; // Being used in breadcrumbs.component.html (i.e. DO NOT DELETE)\r\n\r\n/**\r\n * Builds the breadcrumbs for navigation, as well as the feedback and\r\n * user details in the navigation bar.\r\n */\r\n@Component({\r\n selector: 'app-breadcrumbs',\r\n templateUrl: './breadcrumbs.component.html',\r\n styleUrls: ['./breadcrumbs.component.css']\r\n})\r\nexport class BreadcrumbsComponent {\r\n\r\n /**\r\n * Constructor\r\n * @param router Used to verify current location and navigate user to new page.\r\n * @param toolService Used to verify currently selected tool.\r\n * @param authGuardService Enables Sign Out button. Being used in\r\n * breadcrumbs.component.html (i.e. DO NOT DELETE)\r\n */\r\n constructor(public router: Router,\r\n public toolService: ToolService,\r\n public authGuardService: AuthGuardService) { }\r\n\r\n /**\r\n * Builds a URL, then navigates the router to it.\r\n * @param pathPieces - Array of each piece of the path to navigate to.\r\n * @returns boolean - Returns false to prevent full page reload.\r\n */\r\n buildRouterLink(pathPieces) {\r\n this.router.navigate(pathPieces);\r\n return false;\r\n }\r\n}\r\n","module.exports = \".categories {\\r\\n margin: auto;\\r\\n padding: 25px 50px;\\r\\n max-height: calc(100vh - var(--header-height));\\r\\n margin-top: var(--header-height);\\r\\n overflow-y: auto;\\r\\n}\\r\\n\\r\\n.categories.frosted {\\r\\n overflow: hidden;\\r\\n z-index: -1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n.tools {\\r\\n display: flex;\\r\\n flex-flow: row wrap;\\r\\n margin: auto;\\r\\n height: calc(100vh - var(--course-sidebar-height));\\r\\n}\\r\\n\\r\\n.toolIcon {\\r\\n display: flex;\\r\\n padding: 20px;\\r\\n font-size: 25px;\\r\\n box-sizing: border-box;\\r\\n width: 300px;\\r\\n justify-content: center;\\r\\n text-align: center;\\r\\n margin: 20px;\\r\\n transition: all .1s ease-in-out;\\r\\n cursor: pointer;\\r\\n -webkit-animation: .5s fadeIn;\\r\\n animation: .5s fadeIn;\\r\\n}\\r\\n\\r\\n.toolIcon i {\\r\\n font-size: 90px;\\r\\n padding: 30px;\\r\\n border-radius: calc(((100vw - var(--course-sidebar-width)) / 4) - 30px);\\r\\n transition: all .1s ease-in-out;\\r\\n}\\r\\n\\r\\n.toolIcon:hover {\\r\\n background-color: var(--primary-4);\\r\\n}\\r\\n\\r\\n.toolIcon p {\\r\\n color: var(--primary-3);\\r\\n margin: 0;\\r\\n}\"","module.exports = \"\\r\\n
\\r\\n\\r\\n\\r\\n Home\\r\\n {{toolService.selectedTool.title}}\\r\\n\\r\\n
\\r\\n \\r\\n ![]()
\\r\\n \\r\\n
\\r\\n\\r\\n \\r\\n {{authGuardService.userDetails.displayName}}\\r\\n
\\r\\n \\r\\n - \\r\\n
- \\r\\n Sign Out\\r\\n \\r\\n
\\r\\n
\\r\\n\"","import { Component } from '@angular/core';\r\nimport { ToolService } from '../../tool.service';\r\nimport { CourseService } from '../../course.service'; // Being used in categories.component.html (i.e. DO NOT DELETE)\r\nimport { Category } from '../../interfaces';\r\n\r\n/** **********************************************************\r\n * Container for all available tool categories. Each {@link Category} is generated\r\n * based on the available tools.\r\n ************************************************************/\r\n@Component({\r\n selector: 'app-categories',\r\n templateUrl: './categories.component.html',\r\n styleUrls: ['./categories.component.css']\r\n})\r\nexport class CategoriesComponent {\r\n\r\n /** **********************************************************\r\n * Constructor\r\n * @param toolService Used to generate each available category\r\n * @param courseService Verifies if course selection is open, \r\n * so styling can be applied. Used in \r\n * categories.component.html (i.e. DO NOT DELETE)\r\n ************************************************************/\r\n constructor(public toolService: ToolService,\r\n public courseService: CourseService) { }\r\n\r\n /** **********************************************************\r\n * This sets the selected {@link Category} on the Tool service.\r\n * @param {object} category The category to be set as the selected category\r\n * @returns {false} Returns false to prevent the entire page (just the router) from reloading\r\n ************************************************************/\r\n setSelectedCategory(category: Category) {\r\n this.toolService.selectedCategory = category;\r\n return false;\r\n }\r\n}\r\n","module.exports = \"#errorPage {\\r\\n background-color: white;\\r\\n margin: calc(50px + var(--header-height)) auto 0 auto;\\r\\n padding: 20px;\\r\\n overflow: auto;\\r\\n width: var(--courseSelect-width);\\r\\n}\\r\\n\\r\\nh1 {\\r\\n color: red;\\r\\n}\\r\\n\"","module.exports = \"\\r\\n
\\r\\n{{category.title}}
\\r\\n\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n {{tool.icon}}\\r\\n
\\r\\n {{tool.title}}
\\r\\n\\r\\n\\r\\n
\\r\\n\"","import { Component } from '@angular/core';\r\nimport { ServerService } from '../../server.service'; // Being used in error-page.component.html (i.e. DO NOT DELETE)\r\n\r\n/** An error page to display various client-side errors, and errors received from the server. */\r\n@Component({\r\n selector: 'app-error-page',\r\n templateUrl: './error-page.component.html',\r\n styleUrls: ['./error-page.component.css']\r\n})\r\nexport class ErrorPageComponent {\r\n\r\n /** **********************************************************\r\n * Constructor\r\n * @param serverService Collects errors in Katana and allows\r\n * them to be read and displayed to the user. Used in \r\n * error-page.component.html (i.e. DO NOT DELETE)\r\n ************************************************************/\r\n constructor(public serverService: ServerService) { }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MaterializeModule } from 'angular2-materialize';\r\n\r\nimport { CategoriesComponent } from './categories/categories.component';\r\nimport { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';\r\nimport { OptionsViewComponent } from './options-view/options-view.component';\r\nimport { RouterModule } from '@angular/router';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { ErrorPageComponent } from './error-page/error-page.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n RouterModule,\r\n MaterializeModule,\r\n FormsModule,\r\n ReactiveFormsModule\r\n ],\r\n exports: [\r\n BreadcrumbsComponent,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n ErrorPageComponent\r\n ],\r\n declarations: [\r\n BreadcrumbsComponent,\r\n CategoriesComponent,\r\n OptionsViewComponent,\r\n ErrorPageComponent\r\n ]\r\n})\r\nexport class HomePageModule { }\r\n","module.exports = \".optionsView {\\r\\n width: 100%;\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n padding: 55px;\\r\\n margin-top: var(--header-height);\\r\\n}\\r\\n\\r\\n.optionsView__container {\\r\\n color: black;\\r\\n width: 100%;\\r\\n -webkit-animation: .5s fadeIn;\\r\\n animation: .5s fadeIn;\\r\\n}\\r\\n\\r\\n.optionsView__title {\\r\\n padding: 10px 20px;\\r\\n}\\r\\n\\r\\n.optionsView.frosted {\\r\\n position: relative;\\r\\n z-index: -1;\\r\\n}\\r\\n\\r\\n.categories-container>label {\\r\\n margin-right: 20px;\\r\\n font-size: 16px;\\r\\n padding-left: 30px;\\r\\n}\\r\\n\\r\\n.arrowIndicator {\\r\\n display: flex;\\r\\n position: absolute;\\r\\n top: calc(var(--breadcrumbs-height) + 5px);\\r\\n right: 160px;\\r\\n color: white;\\r\\n z-index: 2000;\\r\\n font-size: 20px;\\r\\n}\\r\\n\\r\\n.arrowIndicator>div {\\r\\n line-height: 40px;\\r\\n}\\r\\n\\r\\n.card-content>div{\\r\\n margin: 20px 0;\\r\\n}\\r\\n\\r\\n.card-content>div:first-of-type {\\r\\n margin-top: 0 !important;\\r\\n}\\r\\n\\r\\n.card-content:last-child {\\r\\n margin-bottom: 0 !important;\\r\\n}\\r\\n\\r\\n[type=\\\"checkbox\\\"].filled-in:checked + label::after {\\r\\n border-color: #2979FF !important;\\r\\n background-color: #2979FF !important;\\r\\n}\\r\\n\\r\\ndiv.option__text {\\r\\n padding-right: 10px;\\r\\n}\\r\\n\\r\\ndiv.option__text>input{\\r\\n padding-left: 10px;\\r\\n}\\r\\n\\r\\nbutton[type=\\\"submit\\\"] {\\r\\n margin-left: 10px;\\r\\n}\"","module.exports = \"\\r\\n\\r\\n\\r\\n{{serverService.error ? serverService.error.message : 'There isn\\\\'t any error information available to display'}}
\\r\\n\\r\\nStatus: {{serverService.error ? serverService.error.status : '---'}}
\\r\\n\\r\\nIf this error persists, please contact a Katana admin.
\\r\\n\\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n\\r\\n
\\r\\n\"","import { Component, EventEmitter } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { ToolService } from '../../tool.service';\r\nimport { CourseService } from '../../course.service';\r\nimport { ServerService } from '../../server.service';\r\nimport { MaterializeAction } from 'angular2-materialize';\r\nimport { FormGroup } from '@angular/forms';\r\nimport { DiscoverOption } from '../../interfaces';\r\nimport { OptionModel } from '../../classes';\r\n\r\n/**\r\n * Container for the options page. Holds all related\r\n * options components.\r\n */\r\n@Component({\r\n selector: 'app-options-view',\r\n templateUrl: './options-view.component.html',\r\n styleUrls: ['./options-view.component.css']\r\n})\r\nexport class OptionsViewComponent {\r\n\r\n /**\r\n * The options to display on the page.\r\n */\r\n options: DiscoverOption[];\r\n /**\r\n * The {@link OptionModel} to use for the form.\r\n */\r\n optionModel: OptionModel;\r\n /**\r\n * The FormGroup to use for the form.\r\n */\r\n formGroup: FormGroup;\r\n\r\n /**\r\n * From [angular2-materialize]{@link https://www.npmjs.com/package/angular2-materialize},\r\n * which allows the modal to open and close.\r\n */\r\n modalActions: EventEmitter\\r\\n Click here to Add Courses\\r\\n
\\r\\n arrow_forward\\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n\"","import { Component, OnInit, Input, Output, ViewChild, ElementRef, EventEmitter } from '@angular/core';\r\nimport { Issue } from '../../interfaces';\r\n\r\n/**\r\n * Integrates the Ace code editor to allow viewing and editing HTML from an issue's canvas item.\r\n */\r\n@Component({\r\n selector: 'app-code-editor',\r\n templateUrl: './code-editor.component.html',\r\n styleUrls: ['./code-editor.component.css']\r\n})\r\nexport class CodeEditorComponent implements OnInit {\r\n\r\n /**\r\n * The tabs to add to the code editor. This may include tabs\r\n * like \"Current HTML\" and \"Updated HTML\" to show the user how\r\n * the HTML will be changed by the tool.\r\n */\r\n @Input('tabs') tabs: any[];\r\n\r\n /**\r\n * If certain key words should be highlighted by the editor's\r\n * search functionality, this should be passed as\r\n * a string. It will be converted into a regex, so\r\n * a regex string (to be passed into the RegExp constructor)\r\n * can also be passed in.\r\n */\r\n @Input('highlight') highlight: string;\r\n\r\n /**\r\n * The issue the code editor is displaying code for.\r\n */\r\n @Input('issue') issue: Issue;\r\n\r\n /**\r\n * Element reference to the editor div itself so we can\r\n * initiate the Ace editor instance.\r\n */\r\n @ViewChild('editor') editorEl: ElementRef;\r\n\r\n /**\r\n * The editor instance. This is set after it has been initialized.\r\n */\r\n editor: any;\r\n\r\n /**\r\n * The currently active tab on the tabs bar of the editor.\r\n */\r\n activeTab: any;\r\n\r\n /**\r\n * Whether or not the editor is in \"edit\" mode. This just means that\r\n * it is expanded, currently. Whether or not it can be edited is\r\n * determined by the tab's \"readOnly\" property.\r\n */\r\n viewExpanded = true;\r\n\r\n /**\r\n * Stores the tab objects passed in to the \"tabs\" input. For whatever reason,\r\n * the passed in tabs don't store as references correctly, so adding\r\n * the session to them doesn't carry over to the rest of the methods.\r\n * This helps with those reference issues. This is set during the \"ngOnInit\"\r\n * method.\r\n */\r\n private _tabs: any[] = [];\r\n\r\n /**\r\n * Constructor\r\n */\r\n constructor() { }\r\n\r\n /**\r\n * Fired on component load, this sets up the editor, creates the tabs provided\r\n * by the selected tool, creates the sessions for each tab, beautifies their code,\r\n * inserts their code, and then sets the settings and options for the editor.\r\n */\r\n ngOnInit() {\r\n // The EditSession class is used to spawn new sessions in the editor\r\n const EditSession = window['ace'].require('ace/edit_session').EditSession;\r\n // Allows Ctrl+F Search functionality (keep, even though it says the var is unused)\r\n const searchBox = window['ace'].require('ace/searchbox');\r\n // Save a correct reference to the tab objects that is safe to use\r\n this._tabs = this.tabs;\r\n\r\n // Create and add an editor session to each tab, beautify its code, and insert it\r\n this._tabs.forEach(tab => {\r\n const code = window['html_beautify'](tab['htmlString'] || ' '); // Beautifies the code\r\n tab.session = new EditSession(code);\r\n tab.session.setMode('ace/mode/html');\r\n tab.session.setUseWrapMode(true);\r\n tab.session.setUseWorker(false); // Disables the linter/syntax checker\r\n tab.session.setTabSize(4); // Sets the tab size to 4 spaces\r\n });\r\n\r\n // Create the editor, set the options, and set the first session\r\n this.editor = window['ace'].edit(this.editorEl.nativeElement);\r\n this.editor.setOption('minLines', 10);\r\n this.editor.setOption('maxLines', 30);\r\n this.editor.setTheme('ace/theme/terminal');\r\n this.editor.setReadOnly(true);\r\n this.editor.setHighlightActiveLine(true);\r\n this.setEditorSession(this._tabs[0]);\r\n }\r\n\r\n /**\r\n * Sets the editor's session to the selected tab's session\r\n * @param tab The tab (and it's related info) to set as the\r\n * editor's current session.\r\n */\r\n setEditorSession(tab) {\r\n if (!tab.session) { return; }\r\n this.editor.setReadOnly(tab.readOnly);\r\n this.editor.setSession(tab.session);\r\n this.activeTab = tab;\r\n\r\n // If the user changes the code in the editor, it will change this issue status to untouched\r\n this.editor.on('change', () => {\r\n if (this.issue.status === 'approved') {\r\n this.issue.status = 'untouched';\r\n }\r\n this.issue.html['updatedHtml'] = this.editor.getSession().getValue();\r\n });\r\n\r\n // This \"if\" prevents it from searching with an empty search phrase,\r\n // which finds pretty much every empty character...\r\n if (this.highlight) {\r\n // Converts the provided search phrase to a RegExp\r\n const reg = new RegExp(this.highlight, 'gi');\r\n // Finds and highlights all matches to the RegExp\r\n this.editor.findAll(reg, {\r\n needle: reg,\r\n wrap: true,\r\n regExp: true\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Toggles the height of the editor window using Ace's \"maxLines\" editor setting.\r\n */\r\n expandView() {\r\n this.viewExpanded = !this.viewExpanded;\r\n this.editor.setOption('maxLines', this.viewExpanded ? 30 : 10);\r\n }\r\n\r\n}\r\n","module.exports = \"/** Container for this component\\r\\n * Note: z-index must be higher than 1 so buttons in the Issues\\r\\n * column do not overlap. */\\r\\n\\r\\ntd {\\r\\n padding: 5px 0;\\r\\n}\\r\\n\\r\\n.issueApproval {\\r\\n bottom: 20px;\\r\\n display: flex;\\r\\n height: 50px;\\r\\n justify-content: space-between;\\r\\n border-radius: 4px;\\r\\n position: fixed;\\r\\n right: 35px;\\r\\n z-index: 2;\\r\\n}\\r\\n\\r\\n/* Container to hold the \\\"fix approved\\\" and kebob menu */\\r\\n\\r\\n.issueApproval__buttonContainer {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n}\\r\\n\\r\\n/* Buttons within this component */\\r\\n\\r\\n.issueApproval__button {\\r\\n border-radius: 3px;\\r\\n margin: auto;\\r\\n}\\r\\n\\r\\n.issueApproval__button a {\\r\\n padding: 0 15px;\\r\\n margin: 0 15px;\\r\\n}\\r\\n\\r\\n/* The kebob menu */\\r\\n\\r\\n.issueApproval_moreButton>i {\\r\\n color: var(--primary-5);\\r\\n cursor: pointer;\\r\\n font-size: 30px;\\r\\n line-height: 50px;\\r\\n margin: 0 10px 0 0;\\r\\n\\r\\n}\\r\\n\\r\\n/* The kebob menu's dropdown content */\\r\\n\\r\\n.dropdown-content {\\r\\n /* important has to be here b/c we're overwriting materialize */\\r\\n top: 37px !important;\\r\\n width: 200px !important;\\r\\n -webkit-transform: translate(0, -87px);\\r\\n transform: translate(0, -87px);\\r\\n}\\r\\n\\r\\n.dropdown-content>li>a {\\r\\n transition: none;\\r\\n color: var(--cobalt);\\r\\n}\\r\\n\\r\\n.dropdown-content>li>a:hover {\\r\\n transition: none;\\r\\n background-color: #eee;\\r\\n}\\r\\n\\r\\n.modal-footer {\\r\\n border-top: solid 1px var(--primary-2);\\r\\n}\\r\\n\\r\\n.issueIcon {\\r\\n -webkit-transform: translateY(3px);\\r\\n transform: translateY(3px);\\r\\n font-size: 18px;\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.disabled, .disabled:hover {\\r\\n opacity: 0.5;\\r\\n pointer-events: none;\\r\\n cursor: default;\\r\\n background-color: #DFDFDF;\\r\\n color: #9F9F9F;\\r\\n box-shadow: none;\\r\\n}\\r\\n\"","module.exports = \"\\r\\n\\r\\n \\r\\n \\r\\n\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n- \\r\\n
- \\r\\n \\r\\n cloud_download\\r\\n Download CSV\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n more_vert\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n \\r\\n \\r\\n\\r\\n
\"","import { Component } from '@angular/core';\r\nimport { CourseService } from '../../course.service';\r\nimport { ServerService } from '../../server.service';\r\nimport { MaterializeAction } from 'angular2-materialize';\r\nimport { EventEmitter } from '@angular/core';\r\nimport { ToolService } from '../../tool.service';\r\nimport { csvFormatRows } from 'd3-dsv';\r\n\r\n/**\r\n * Container for managing various actions on the tool view page,\r\n * such as the \"Fix All Approved\" button.\r\n */\r\n@Component({\r\n selector: 'app-issue-nav',\r\n templateUrl: './issue-nav.component.html',\r\n styleUrls: ['./issue-nav.component.css']\r\n})\r\nexport class IssueNavComponent {\r\n\r\n /**\r\n * From [angular2-materialize]{@link https://www.npmjs.com/package/angular2-materialize},\r\n * which allows the modal to open and close.\r\n */\r\n modalActions: EventEmitter\\r\\n
\\r\\n\"","import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\r\nimport { CourseService } from '../../course.service';\r\nimport { ItemCard } from '../../interfaces';\r\n\r\n/**\r\n * Manages the display for a single {@link ItemCard}.\r\n */\r\n@Component({\r\n selector: 'app-item-card',\r\n templateUrl: './item-card.component.html',\r\n styleUrls: ['./item-card.component.css']\r\n})\r\nexport class ItemCardComponent implements AfterViewInit {\r\n /**\r\n * The {@link ItemCard} used by this component.\r\n */\r\n @Input('itemCard') itemCard: ItemCard;\r\n /**\r\n * The position of the component in the {@link IssueListComponent}.\r\n */\r\n @Input('position') position: number;\r\n /**\r\n * Reference to the element in the view for this component that\r\n * contains it's item type icon (ex. Page, Discussion, Quiz).\r\n */\r\n @ViewChild('typeIcon') typeIcon: ElementRef;\r\n\r\n /**\r\n * Constructor\r\n * @param courseService Provides information and management for selected courses.\r\n */\r\n constructor(public courseService: CourseService) { }\r\n\r\n /**\r\n * This class implements AfterViewInit, which runs after the element\r\n * is rendered completely on the page. This is so we can add the tooltip\r\n * data correctly to the type icon.\r\n */\r\n ngAfterViewInit() {\r\n if (!this.typeIcon) { return; }\r\n const types = {\r\n 'pages': 'Page',\r\n 'assignments': 'Assignment',\r\n 'discussions': 'Discussion',\r\n 'files': 'File',\r\n 'folders': 'Folder',\r\n 'quizzes': 'Quiz',\r\n 'quizQuestions': 'Quiz Question',\r\n 'modules': 'Module',\r\n 'moduleItems': 'Module Item',\r\n };\r\n this.typeIcon.nativeElement.setAttribute('data-tooltip', types[this.itemCard.category]);\r\n }\r\n\r\n /**\r\n * This is used to determine the icon shown at the top left of a card.\r\n * It is based on the ItemCard's item_type property, or the type of\r\n * the item in Canvas. (i.e. Page)\r\n * @returns {string} The icon title to use to display the icon.\r\n */\r\n getTypeIcon() {\r\n const typeIcons = {\r\n 'pages': 'insert_drive_file',\r\n 'assignments': 'assignment',\r\n 'discussions': 'question_answer',\r\n 'files': 'attach_file',\r\n 'folders': 'folder',\r\n 'quizzes': 'gavel',\r\n 'quizQuestions': 'help_outline',\r\n 'modules': 'view_agenda',\r\n 'moduleItems': 'view_list',\r\n };\r\n return typeIcons[this.itemCard.category];\r\n }\r\n\r\n /**\r\n * This is used in place of typical anchors. It will look scroll to the issue card selected from the itemCard card\r\n * @param itemCardId Provides the itemCard's id that helps form the issue card's id for the anchor tag to work\r\n * @param i Provides the index of the issue in ItemCard.issues[] to help form the unique id for the issue card\r\n */\r\n viewIssueCard(itemCardId, i) {\r\n const el = document.getElementById(`${itemCardId}-${i}`);\r\n el.scrollIntoView();\r\n }\r\n}\r\n","module.exports = \"/* Container for the issue-list element */\\r\\n\\r\\n.issueList {\\r\\n width: var(--issueList-width);\\r\\n box-sizing: border-box;\\r\\n padding: 0 15px;\\r\\n}\\r\\n\\r\\n/* The container for all of the issue items */\\r\\n\\r\\n.issueList__list {\\r\\n max-height: calc(100vh - var(--header-height) - var(--toolView-titleBar-height));\\r\\n overflow-y: auto;\\r\\n padding-right: var(--scrollbar-offset);\\r\\n}\\r\\n\\r\\n/* The message that appears if no issue items are avaiable */\\r\\n\\r\\n.noIssuesMessage {\\r\\n color: var(--ashen);\\r\\n position: absolute;\\r\\n width: 100vw;\\r\\n padding-top: 200px;\\r\\n z-index: 100;\\r\\n font-size: 30px;\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.noIssuesMessage i { \\r\\n font-size: 40px;\\r\\n}\"","module.exports = \"\\r\\n
\\r\\n \\r\\n \\r\\n {{getTypeIcon()}}\\r\\n \\r\\n
\\r\\n \\r\\n open_in_new\\r\\n \\r\\n \\r\\n {{itemCard.title}}\\r\\n
\\r\\n - \\r\\n
- \\r\\n \\r\\n {{courseService.getStatusIcon(issue.status)}}\\r\\n \\r\\n \\r\\n {{issue.title}}\\r\\n \\r\\n
\\r\\n
\\r\\n\"","import { Component, ViewChild, ElementRef } from '@angular/core';\r\nimport { CourseService } from '../../course.service';\r\nimport { ItemCard } from '../../interfaces';\r\n\r\n/**\r\n * Display for the list of {@link ItemCard}s in the currently selected course.\r\n */\r\n@Component({\r\n selector: 'app-item-list',\r\n templateUrl: './item-list.component.html',\r\n styleUrls: ['./item-list.component.css']\r\n})\r\nexport class ItemListComponent {\r\n\r\n /** Element reference to the issue list. */\r\n @ViewChild('issueList') issueListEl: ElementRef;\r\n\r\n /** The number of {@link ItemCard}s currently loaded in the list. Used for lazy loading. */\r\n itemCardCount = 15;\r\n\r\n /**\r\n * Constructor\r\n * @param courseService Provides information and management for selected courses.\r\n */\r\n constructor(public courseService: CourseService) {\r\n this.courseService.courseChange.subscribe(() => {\r\n this.itemCardCount = 15;\r\n this.issueListEl.nativeElement.scrollTop = 0;\r\n });\r\n }\r\n\r\n /**\r\n * Runs as the user scrolls down the list. If the user reaches near the bottom of the list, it will\r\n * load more {@link ItemCard}s into the list. This is, essentially, lazy loading. It helps prevent\r\n * poor load times with massive amounts of ItemCards, but does cause a little bit of stuttering.\r\n */\r\n onScroll() {\r\n const maxScrollTop = this.issueListEl.nativeElement.scrollHeight - this.issueListEl.nativeElement.clientHeight;\r\n if (maxScrollTop - this.issueListEl.nativeElement.scrollTop < 500) {\r\n if (this.courseService.selectedCourse.itemCards.length > this.itemCardCount) {\r\n this.itemCardCount += 15;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Provides {@link ItemCard}s to load into the list as {@link IssueCard}s, based on the\r\n * number allowed (itemCardCount).\r\n */\r\n getItemCards(): ItemCard[] {\r\n if (this.courseService.selectedCourse.itemCards.length < this.itemCardCount) {\r\n return this.courseService.selectedCourse.itemCards;\r\n } else {\r\n return this.courseService.selectedCourse.itemCards.slice(0, this.itemCardCount);\r\n }\r\n }\r\n}\r\n","module.exports = \"/* A container for a single issue */\\r\\n\\r\\n.issueContainer {\\r\\n box-sizing: border-box;\\r\\n border: solid 1px var(--background-light);\\r\\n border-bottom: none;\\r\\n -webkit-animation: 0.5s fadeIn;\\r\\n animation: 0.5s fadeIn;\\r\\n margin-right: var(--scrollbar-offset);\\r\\n}\\r\\n\\r\\n/* Overwrites the card class from materialize */\\r\\n\\r\\n.issueContainer.card {\\r\\n border-radius: 2px;\\r\\n}\\r\\n\\r\\n/* Overwrites the card content class from materialize */\\r\\n\\r\\n.issueContainer.card .card-content {\\r\\n padding: 20px;\\r\\n}\\r\\n\\r\\n.issueContainer.card .card-action a {\\r\\n width: 141px;\\r\\n text-align: center;\\r\\n margin: 0;\\r\\n padding: 0 15px;\\r\\n border-radius: 0;\\r\\n}\\r\\n\\r\\n/* Overwrites materialize button focus so it doesn't show up on the issue cards */\\r\\n\\r\\n.btn-flat:focus {\\r\\n background-color: none !important;\\r\\n}\\r\\n\\r\\n.card .card-action {\\r\\n background-color: transparent !important;\\r\\n border-top: none;\\r\\n}\\r\\n\\r\\n.issueContainer.card .card-content>h2:first-of-type {\\r\\n padding-top: 0;\\r\\n}\\r\\n\\r\\n.card .card-action>button {\\r\\n width: 175px;\\r\\n margin-right: 15px;\\r\\n}\\r\\n\\r\\n.option__text {\\r\\n padding: 0 10px;\\r\\n}\"","module.exports = \"\\r\\n Items\\r\\n ({{courseService.selectedCourse && courseService.selectedCourse.itemCards ? courseService.selectedCourse.itemCards.length\\r\\n : 0}})\\r\\n
\\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n\\r\\n No issues were discovered in this course.\\r\\n
\\r\\n \\r\\n tag_faces\\r\\n
\\r\\n \\r\\n
\\r\\n This course failed to process.
\\r\\n Please contact a Katana developer with the tool name and course ID.\\r\\n\\r\\n sentiment_very_dissatisfied\\r\\n
\\r\\n \\r\\n\\r\\n
\\r\\n\"","import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';\r\nimport { CourseService } from '../../course.service'; // Being used in issue-container.component.html (i.e. DO NOT DELETE)\r\nimport { ToolService } from '../../tool.service';\r\nimport { Issue } from '../../interfaces';\r\nimport { OptionModel } from '../../classes';\r\n\r\n/**\r\n * Container for the display of a single {@link Issue}.\r\n */\r\n@Component({\r\n selector: 'app-result-card',\r\n templateUrl: './result-card.component.html',\r\n styleUrls: ['./result-card.component.css']\r\n})\r\nexport class ResultCardComponent implements OnInit {\r\n /** The issue attached to the display. */\r\n @Input('issue') issue: Issue;\r\n\r\n /** The index of the item's issues array the issue is at. */\r\n @Input('index') index: number;\r\n\r\n /** Element reference to the card containing details about the issue. */\r\n @ViewChild('issueDetails') issueDetails: ElementRef;\r\n\r\n /** A reference to the code editor element for the respective issue. */\r\n @ViewChild('codeEditor') codeEditor: ElementRef;\r\n\r\n /**\r\n * Constructor\r\n * @param toolService Provides information and management for available tools.\r\n * @param courseService Provides information and management for selected courses.\r\n * Being used in issue-container.component.html (i.e. DO NOT DELETE)\r\n */\r\n constructor(public toolService: ToolService,\r\n public courseService: CourseService) { }\r\n\r\n /**\r\n * Fired when the component is initialized, this manages the item's display.\r\n * It inserts the form for the {@link Issue}'s {@link FixOption}s if available.\r\n */\r\n ngOnInit() {\r\n this.issueDetails.nativeElement.innerHTML = this.issue.display;\r\n this.issue.optionModel = new OptionModel(this.toolService.selectedTool.fixOptions);\r\n this.issue.formGroup = this.issue.optionModel.toGroup();\r\n\r\n // Update option values if there are values saved for any options\r\n if (this.issue.tempValues) {\r\n Object.keys(this.issue.tempValues).forEach(optionKey => {\r\n const control = this.issue.formGroup.get(optionKey);\r\n control.setValue(this.issue.tempValues[optionKey], { onlySelf: true });\r\n control.updateValueAndValidity();\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Using the {@link Tab}s provided by the Node Tool, builds\r\n * useable tab objects for each issue.\r\n * @returns {Object[]} The tabs to use to build the editor instance.\r\n */\r\n buildEditorTabs() {\r\n if (!this.toolService.selectedTool.editorTabs) { return; }\r\n return this.toolService.selectedTool.editorTabs.map(editorTab => {\r\n return {\r\n title: editorTab.title,\r\n htmlString: this.issue.html[editorTab.htmlKey],\r\n readOnly: editorTab.readOnly\r\n };\r\n });\r\n }\r\n\r\n /**\r\n * Sets the status of the issue.\r\n * @param newStatus The new status to set the issue to.\r\n */\r\n setIssueStatus(newStatus) {\r\n // if the status is already 'fixed', don't change it or do anything\r\n if (this.issue.status === 'fixed') {\r\n return;\r\n } else if (newStatus === this.issue.status) {\r\n this.issue.status = 'untouched';\r\n } else {\r\n this.issue.status = newStatus;\r\n }\r\n // check if you need to move to the next itemCard or not\r\n this.getNextItem();\r\n }\r\n\r\n /**\r\n * Checks if all of the issue status's have been set\r\n * then it sets the selectedItemCard to the next one in the list automatically\r\n */\r\n getNextItem() {\r\n // check if there are any issues that are still untouched on the canvas item\r\n const untouched = this.courseService.selectedItemCard.issues.find(issue => issue.status === 'untouched');\r\n // if there are no more untouched issues, move to the next canvas item automatically\r\n if (!untouched) {\r\n // get the index of the selectedItemCard in the selected course's itemCards array\r\n const index = this.courseService.selectedCourse.itemCards.indexOf(this.courseService.selectedItemCard);\r\n // if you are not on the last itemCard, then move to the next one\r\n if (index <= this.courseService.selectedCourse.itemCards.length) {\r\n this.courseService.selectedItemCard = this.courseService.selectedCourse.itemCards[index + 1];\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Determines the classes used to style buttons based on the\r\n * current status of the issue they belong to.\r\n * @param {string} desiredStatus What status the issue current is.\r\n * @param {string} elType Either \"button\" or \"icon\".\r\n * @returns {string} The classes to apply to the element.\r\n */\r\n getButtonClasses(desiredStatus: string, elType: string) {\r\n let classes = '';\r\n if (elType === 'button') {\r\n classes += 'waves-effect waves btn white';\r\n }\r\n if (this.issue.status !== 'untouched' && this.issue.status !== desiredStatus) {\r\n classes += ' text-lighten-4';\r\n } else if (desiredStatus === 'approved') {\r\n classes += ' text-accent-4';\r\n } else if (desiredStatus === 'skipped') {\r\n classes += ' text-darken-2';\r\n }\r\n return classes;\r\n }\r\n\r\n /**\r\n * Manages the validity of the form on each keystroke.\r\n * @param optionKey The key of the option this came from.\r\n */\r\n onChange(optionKey) {\r\n if (['untouched', 'fixed', 'failed'].includes(this.issue.status)) {\r\n this.issue.status = 'untouched';\r\n }\r\n if (!this.issue.tempValues) {\r\n this.issue.tempValues = {};\r\n }\r\n this.issue.tempValues[optionKey] = this.issue.formGroup.value[optionKey];\r\n }\r\n\r\n /**\r\n * Returns whether or not the item's status is fixed or failed.\r\n * @returns {boolean} Whether or not this issue's status is fixed or failed.\r\n */\r\n isFixed() {\r\n return ['fixed', 'failed'].includes(this.issue.status);\r\n }\r\n\r\n /**\r\n * Since Object.keys does not work in angular templating, this is\r\n * a workaround. It checks if the issue has any HTML to display in\r\n * the editor. Used by the app-code-editor tag to determine if it\r\n * should display.\r\n */\r\n showEditor() {\r\n return Object.keys(this.issue.html).length > 0;\r\n }\r\n}\r\n","module.exports = \"/* The container for all issue-container elements */\\r\\n\\r\\n.issueDetails {\\r\\n width: calc(100vw - var(--issueList-width));\\r\\n max-height: calc(100vh - var(--header-height));\\r\\n padding: 0 15px 0 0;\\r\\n}\\r\\n\\r\\n/* The header for issue-details */\\r\\n\\r\\n.issueDetails__header {\\r\\n box-sizing: border-box;\\r\\n font-size: 20px;\\r\\n height: var(--toolView-titleBar-height);\\r\\n line-height: var(--toolView-titleBar-height);\\r\\n padding: 0 10px;\\r\\n}\\r\\n\\r\\n/* The currently selected item's title */\\r\\n\\r\\n.issueDetails__itemTitle {\\r\\n background-color: var(--cobalt);\\r\\n margin-left: 15px;\\r\\n font-size: 20px;\\r\\n}\\r\\n\\r\\n/* The box that holds all of the issue-container elements */\\r\\n\\r\\n.issueDetails__issueBox {\\r\\n box-sizing: border-box;\\r\\n overflow-x: hidden;\\r\\n overflow: auto;\\r\\n max-height: calc(100vh - (var(--header-height) + 52px));\\r\\n}\"","module.exports = \"\\r\\n
\\r\\n\\r\\n \\r\\n {{issue.title}}
\\r\\n \\r\\n\\r\\n \\r\\n\\r\\n
\\r\\n\\r\\n \\r\\n \\r\\n\\r\\n \\r\\n\\r\\n \\r\\n\\r\\n
\\r\\n\\r\\n\\r\\n FIXED {{toolService.selectedTool.fixedMessage ? ' - ' + toolService.selectedTool.fixedMessage : ''}}\\r\\n
\\r\\n \\r\\n FAILED - Please contact a Katana developer with the course ID, item name, and issue title.\\r\\n
\\r\\n\\r\\n \\r\\n
\\r\\n\"","import { Component } from '@angular/core';\r\nimport { CourseService } from '../../course.service'; // Being used in issue-details.component.html (i.e. DO NOT DELETE)\r\n\r\n/**\r\n * Container for all {@link IssueContainerComponent}s used to display\r\n * issues within the currently selected {@link ItemCard}.\r\n */\r\n@Component({\r\n selector: 'app-result-list',\r\n templateUrl: './result-list.component.html',\r\n styleUrls: ['./result-list.component.css']\r\n})\r\nexport class ResultListComponent {\r\n /**\r\n * Constructor\r\n * @param courseService Provides information and management for selected courses.\r\n * Being used in issue-details.component.html (i.e. DO NOT DELETE)\r\n */\r\n constructor(public courseService: CourseService) { }\r\n}\r\n","module.exports = \".statBadge {\\r\\n height: 36px;\\r\\n line-height: 36px;\\r\\n border-radius: 36px;\\r\\n display: inline-flex;\\r\\n margin: 5px 0;\\r\\n}\\r\\n\\r\\n.statBadge>div {\\r\\n display: inline-flex;\\r\\n}\\r\\n\\r\\n.statBadge__title {\\r\\n font-size: 16px;\\r\\n}\\r\\n\\r\\n.left-side {\\r\\n padding: 0 15px 0 10px;\\r\\n}\\r\\n\\r\\n.right-side {\\r\\n padding: 0 10px 0 15px;\\r\\n}\\r\\n\\r\\n.statBadge__count {\\r\\n height: 38px;\\r\\n min-width: 38px;\\r\\n margin: -1px -1px 0 0;\\r\\n line-height: 38px;\\r\\n font-size: 18px;\\r\\n font-weight: bold;\\r\\n border-radius: 38px;\\r\\n background-color: white;\\r\\n text-align: center;\\r\\n padding: 0 5px;\\r\\n}\"","module.exports = \"\\r\\n Results\\r\\n
\\r\\n {{this.courseService.selectedItemCard ? this.courseService.selectedItemCard.title : ''}}\\r\\n\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n
\\r\\n\"","import { Component, Input } from '@angular/core';\r\n\r\n/**\r\n * Displays a single number and title in a pill container.\r\n */\r\n@Component({\r\n selector: 'app-stat-badge',\r\n templateUrl: './stat-badge.component.html',\r\n styleUrls: ['./stat-badge.component.css']\r\n})\r\nexport class StatBadgeComponent {\r\n /**\r\n * The title to display on the pill.\r\n */\r\n @Input('statTitle') statTitle: string;\r\n /**\r\n * The number to display.\r\n */\r\n @Input('statCount') statCount: number;\r\n /**\r\n * The color of the title.\r\n */\r\n @Input('titleColor') titleColor: string = 'white';\r\n /**\r\n * The side of the pill the number should be display on.\r\n */\r\n @Input('side') side: string = 'right';\r\n\r\n /**\r\n * Constructor\r\n */\r\n constructor() { }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MaterializeModule } from 'angular2-materialize';\r\nimport { RouterModule } from '@angular/router';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { ItemListComponent } from './item-list/item-list.component';\r\nimport { ItemCardComponent } from './item-card/item-card.component';\r\nimport { ResultListComponent } from './result-list/result-list.component';\r\nimport { IssueNavComponent } from './issue-nav/issue-nav.component';\r\nimport { ResultCardComponent } from './result-card/result-card.component';\r\nimport { ToolViewComponent } from './tool-view/tool-view.component';\r\nimport { StatBadgeComponent } from './stat-badge/stat-badge.component';\r\nimport { CodeEditorComponent } from './code-editor/code-editor.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n RouterModule,\r\n MaterializeModule,\r\n FormsModule,\r\n ReactiveFormsModule\r\n ],\r\n exports: [\r\n FormsModule,\r\n ReactiveFormsModule\r\n ],\r\n declarations: [\r\n ItemListComponent,\r\n ItemCardComponent,\r\n ResultListComponent,\r\n IssueNavComponent,\r\n ResultCardComponent,\r\n ToolViewComponent,\r\n StatBadgeComponent,\r\n CodeEditorComponent,\r\n ]\r\n})\r\nexport class ToolPageModule { }\r\n","module.exports = \".statContainer {\\r\\n position: absolute;\\r\\n bottom: 0;\\r\\n left: 0;\\r\\n z-index: 10;\\r\\n padding: 20px;\\r\\n}\\r\\n\\r\\n.statContainer>div {\\r\\n width: 50%;\\r\\n}\\r\\n\\r\\napp-stat-badge>div {\\r\\n margin: 5px 0;\\r\\n}\\r\\n\\r\\n.issueContainer {\\r\\n margin-top: var(--header-height);\\r\\n display: flex;\\r\\n}\\r\\n\\r\\n.progress {\\r\\n background-color: var(--cobalt);\\r\\n position: absolute;\\r\\n bottom: 0;\\r\\n left: 0;\\r\\n width: 100vw;\\r\\n height: 5px;\\r\\n margin: 0;\\r\\n z-index: 9999;\\r\\n}\\r\\n\\r\\n.progress + div {\\r\\n font-size: 28px;\\r\\n padding: 50px;\\r\\n text-align: center;\\r\\n margin-top: 250px;\\r\\n}\\r\\n\\r\\n.indeterminate {\\r\\n background-color: var(--ashen);\\r\\n}\"","module.exports = \"\\r\\n
\\r\\n\\r\\n \\r\\n {{statTitle}}\\r\\n
\\r\\n \\r\\n {{statCount || '--'}}\\r\\n
\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n {{statCount || '--'}}\\r\\n
\\r\\n \\r\\n {{statTitle}}\\r\\n
\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n \\r\\n
\\r\\n \\r\\n {{settingsService.checkLocalStorage('goofMessages') ? settingsService.buildProcessingMessage() : toolService.processingMessage}}\\r\\n
\\r\\n\\r\\n
\\r\\n\"","import { Component } from '@angular/core';\r\nimport { CourseService } from '../../course.service';\r\nimport { ToolService } from '../../tool.service';\r\nimport { SettingsService } from '../../settings.service';\r\n\r\n/**\r\n * Container for the tool view.\r\n */\r\n@Component({\r\n selector: 'app-tool-view',\r\n templateUrl: './tool-view.component.html',\r\n styleUrls: ['./tool-view.component.css']\r\n})\r\nexport class ToolViewComponent {\r\n\r\n /**\r\n * Constructor\r\n * @param courseService Provides information and management for the currently selected courses.\r\n * @param toolService Provides information and management for available tools.\r\n * @param settingsService Provides this component with access to user settings.\r\n */\r\n constructor(public courseService: CourseService,\r\n public toolService: ToolService,\r\n public settingsService: SettingsService) { }\r\n\r\n /**\r\n * Determines the current total count of issues from all selected courses\r\n * discovered by the currently selected tool.\r\n */\r\n getIssueCount() {\r\n return this.courseService.courses.reduce((acc, course) => {\r\n if (!course.itemCards) { return acc; }\r\n return acc += course.itemCards.reduce((acc2, itemCard) => {\r\n if (!itemCard.issues) { return acc2; }\r\n return acc2 += itemCard.issues.length;\r\n }, 0);\r\n }, 0);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { Tool, Category } from './interfaces';\r\n\r\n/**\r\n * The Tool Service contains information and management for\r\n * all tools available from the service. It handles information\r\n * like which tool is currently selected, whether or not the user\r\n * is currently using a tool, and what categories are available to\r\n * the user.\r\n */\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class ToolService {\r\n\r\n /**\r\n * The categories available to the user. This will be replaced with\r\n * dynamic generation at a later point.\r\n */\r\n categories = [{\r\n icon: 'code',\r\n title: 'HTML',\r\n toolCategory: 'html'\r\n }, {\r\n icon: 'settings',\r\n title: 'Item Settings',\r\n toolCategory: 'itemSettings'\r\n }];\r\n\r\n /**\r\n * Whether or not a tool is currently doing it's magic.\r\n */\r\n processing = false;\r\n /**\r\n * The message to display on the screen while a tool is processing.\r\n */\r\n processingMessage = '';\r\n /**\r\n * Whether or not the user is currently looking at the tool view.\r\n */\r\n toolViewOpen = false;\r\n\r\n /**\r\n * The list of available tools, as retrieved from the server.\r\n */\r\n toolList: Tool[] = [];\r\n\r\n /**\r\n * The category selected by the user.\r\n */\r\n private _selectedCategory: Category;\r\n /**\r\n * The tool selected by the user.\r\n */\r\n private _selectedTool: Tool;\r\n /**\r\n * The discovery options chosen by the user on the options page for the selected tool.\r\n */\r\n selectedDiscoverOptions;\r\n\r\n get selectedCategory() {\r\n return this._selectedCategory;\r\n }\r\n set selectedCategory(category) {\r\n sessionStorage.selectedCategory = category.title;\r\n this._selectedCategory = category;\r\n }\r\n\r\n get selectedTool() {\r\n return this._selectedTool;\r\n }\r\n set selectedTool(tool) {\r\n sessionStorage.selectedTool = tool.id;\r\n this._selectedTool = tool;\r\n }\r\n\r\n /**\r\n * Constructor\r\n * @param router Used to navigate the user as needed.\r\n */\r\n constructor(private router: Router) {\r\n\r\n const loc = window.location.href;\r\n\r\n if (loc.includes('options') && !this._selectedTool && sessionStorage.selectedTool) {\r\n this._selectedTool = this.toolList.find(tool => tool.id === sessionStorage.selectedTool);\r\n }\r\n\r\n if (loc.includes('tools') && !this._selectedCategory && sessionStorage.selectedCategory) {\r\n this._selectedCategory = this.categories.find(category => category.title === sessionStorage.selectedCategory);\r\n }\r\n\r\n // I don't feel like this is the right place for this...\r\n if (loc.includes('options') && !this._selectedTool) {\r\n router.navigate(['/']);\r\n }\r\n\r\n // I don't feel like this is the right place for this...\r\n if (loc.includes('tools') && !this._selectedCategory) {\r\n router.navigate(['/']);\r\n }\r\n }\r\n}\r\n","// This file can be replaced during build by using the `fileReplacements` array.\r\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\r\n// The list of file replacements can be found in `angular.json`.\r\n\r\n/**\r\n * @ignore\r\n */\r\nexport const environment = {\r\n production: false\r\n};\r\n\r\n/*\r\n * In development mode, to ignore zone related error stack frames such as\r\n * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can\r\n * import the following file, but please comment it out in production mode\r\n * because it will have performance impact when throw error\r\n */\r\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\r\n","import { enableProdMode } from '@angular/core';\r\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\n\r\nimport { AppModule } from './app/app.module';\r\nimport { environment } from './environments/environment';\r\n\r\nif (environment.production) {\r\n enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule)\r\n .catch(err => console.log(err));\r\n"],"sourceRoot":""}\\r\\n
\\r\\n