bat mirialta drawer needs styling

ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html

@@ -0,0 +1,12 @@
+<div class="batmirialtaHeader">
+  <div>
+    {{ ts.l.batmirialta }}
+    An Bat Mírialta
+  </div>
+  <div class="closeBatmirialtaBtn" (click)="closeEmitter.next(true)">
+    <i class="fa fa-times"></i>
+  </div>
+</div>
+<iframe src="https://bat-mirialta.abair.ie"  frameborder="0" style="overflow: hidden; height: 100%;
+        width: 100%; position: absolute;">
+</iframe>

ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss

@@ -0,0 +1,47 @@
+.batmirialtaHeader {
+  width: 100%;
+  padding: 25px;
+  height: 30px;
+  background-color: var(--scealai-green);
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.closeBatmirialtaBtn {
+  margin-left: auto;
+}
+
+.closeBatmirialtaBtn:hover {
+  cursor: pointer;
+}
+
+.textFieldContainer {
+  width: 100%;
+  resize: none;
+  z-index: 1;
+  color: var(--dark-text);
+  background: white;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+}
+
+.textField {
+  width: 100%;
+  resize: none;
+  z-index: 1;
+  color: var(--dark-text);
+  background: white;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  border: none;
+}
+
+.audioPlayer {
+  height: 30px;
+  width: 90%;
+  background-color: #f1f3f4;
+  border: 1px solid #8c806e86;
+}

ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+import { BatMirialtaDrawerComponent } from './batmirialta-drawer.component';
+
+describe('BatMirialtaDrawerComponent', () => {
+  let component: BatmirialtaDrawerComponent;
+  let fixture: ComponentFixture<BatmirialtaDrawerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ],
+      declarations: [ BatMirialtaDrawerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BatMirialtaDrawerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core";
+import { TranslationService } from "app/core/services/translation.service";
+import { StoryService } from "app/core/services/story.service";
+import { EngagementService } from "app/core/services/engagement.service";
+import { NotificationService } from "app/core/services/notification-service.service";
+import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
+import { Story } from "app/core/models/story";
+import { EventType } from "app/core/models/event";
+
+@Component({
+  selector: "app-bat-mirialta-drawer",
+  templateUrl: "./bat-mirialta-drawer.component.html",
+  styleUrls: ["./bat-mirialta-drawer.component.scss"],
+})
+export class BatMirialtaDrawerComponent implements OnInit {
+  @Output() closeEmitter = new EventEmitter();
+  @Input() story: Story;
+  @Input() hasBatmirialta: boolean;
+  audioSource: SafeUrl | null = null;
+
+  constructor(
+    protected ts: TranslationService,
+    protected sanitizer: DomSanitizer,
+    private storyService: StoryService,
+    private engagement: EngagementService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: any) {
+    if (!this.hasBatmirialta) {
+      this.closeEmitter.next(true)
+    }
+  }
+}

ngapp/src/app/student/dashboard/dashboard.component.html

@@ -107,6 +107,17 @@
     <i class="fas fa-spell-check optionsBtnIcon"></i>
   </div>
 
+  <!-- BAT MIRIALTA -->
+  <div
+    class="optionsBtn optionsPopupBtn"
+    [class.optionsBtnClicked]="rightDrawerOpened && selectedDrawer == 'bat-mirialta'"
+    (click)="dontToggle = true; toggleRightDrawer('bat-mirialta')"
+  >
+    {{ ts.l.batmirialta}}
+    An Bat Mírialta
+    <i class="fas fa-spell-check optionsBtnIcon"></i>
+  </div>
+
   <!-- DICTIONARY -->
   <div
     class="optionsBtn optionsPopupBtn"
@@ -191,5 +202,9 @@
       [checkBoxes]="checkBoxes"
       (closeGrammarEmitter)="toggleRightDrawer('grammar')"
     ></app-grammar-error-drawer>
+    <app-bat-mirialta-drawer
+        *ngIf="selectedDrawer == 'bat-mirialta'"
+        >
+    </app-bat-mirialta-drawer>
   </mat-drawer>
 </mat-drawer-container>

ngapp/src/app/student/dashboard/dashboard.component.ts

@@ -78,7 +78,7 @@ export class DashboardComponent implements OnInit {
   dontToggle = false;
   @ViewChild("rightDrawer") rightDrawer: MatDrawer;
   rightDrawerOpened: boolean = false;
-  selectedDrawer: "grammar" | "dictionary" | "feedback" | "synthesis" = "grammar";
+  selectedDrawer: "grammar" | "dictionary" | "feedback" | "synthesis" | "bat-mirialta" = "grammar";
 
   // WORD COUNT
   words: string[] = [];

ngapp/src/app/student/student.module.ts

@@ -8,6 +8,7 @@ import { StoryDrawerComponent } from './story-drawer/story-drawer.component';
 import { DictionaryDrawerComponent } from './dictionary-drawer/dictionary-drawer.component';
 import { GrammarErrorDrawerComponent } from './grammar-error-drawer/grammar-error-drawer.component';
 import { FeedbackDrawerComponent } from './feedback-drawer/feedback-drawer.component';
+import { BatMirialtaDrawerComponent } from './bat-mirialta-drawer/bat-mirialta-drawer.component';
 import { SynthesisDrawerComponent } from './synthesis-drawer/synthesis-drawer.component';
 import { HomePageComponent } from './home-page/home-page.component';
 
@@ -45,6 +46,7 @@ import { SafeHtmlPipe } from 'app/core/pipes/safe-html.pipe';
     DictionaryDrawerComponent,
     GrammarErrorDrawerComponent,
     FeedbackDrawerComponent,
+    BatMirialtaDrawerComponent,
     SynthesisDrawerComponent,
     HomePageComponent
   ],