Add input switches

ui/src/app/input/input.component.html

@@ -31,6 +31,82 @@
 
       <div [class.locked]="locked">
 
+        <div class="switch-field">
+          <div class="switch-title">format </div>
+
+          <input type="radio"
+                 id="type_video"
+                 name="episode_format"
+                 value="video"
+                 [disabled]="locked"
+                 [(ngModel)]="format" />
+          <label for="type_video">video</label>
+
+          <input type="radio"
+                 id="type_audio"
+                 name="episode_format"
+                 value="audio"
+                 [disabled]="locked"
+                 [(ngModel)]="format" />
+          <label for="type_audio">audio</label>
+        </div>
+
+        <div class="switch-field" >
+          <div class="switch-title">quality </div>
+
+          <input type="radio"
+                 id="type_low"
+                 name="episode_quality"
+                 value="low"
+                 [disabled]="locked"
+                 [(ngModel)]="quality" />
+          <label for="type_low">low</label>
+
+          <input type="radio"
+                 id="type_high"
+                 name="episode_quality"
+                 value="high"
+                 [disabled]="locked"
+                 [(ngModel)]="quality" />
+          <label for="type_high">high</label>
+        </div>
+
+        <div class="switch-field">
+          <div class="switch-title">episode count </div>
+
+          <input type="radio"
+                 id="type_50"
+                 name="page_count"
+                 [value]="50"
+                 [disabled]="locked"
+                 [(ngModel)]="pageSize" />
+          <label for="type_50">50</label>
+
+          <input type="radio"
+                 id="type_100"
+                 name="page_count"
+                 [value]="100"
+                 [disabled]="locked"
+                 [(ngModel)]="pageSize" />
+          <label for="type_100">100</label>
+
+          <input type="radio"
+                 id="type_150"
+                 name="page_count"
+                 [value]="150"
+                 [disabled]="locked"
+                 [(ngModel)]="pageSize" />
+          <label for="type_150">150</label>
+
+          <input type="radio"
+                 id="type_600"
+                 name="page_count"
+                 [value]="600"
+                 [disabled]="!allow600()"
+                 [(ngModel)]="pageSize" />
+          <label for="type_600" [class.locked]="!allow600()">600</label>
+        </div>
+
       </div>
     </div>
 

ui/src/app/input/input.component.scss

@@ -77,3 +77,48 @@
   -ms-opacity: 0.3;
   opacity: 0.2;
 }
+
+/* Switch */
+
+.switch-field {
+  float: left;
+  font-size: 1em;
+  padding-right: 7px;
+
+  input {
+    position: absolute !important;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    width: 1px;
+    border: 0;
+    overflow: hidden;
+  }
+
+  label {
+    float: left;
+    display: inline-block;
+    color: #EB8C11;
+    padding: 0 2px;
+  }
+
+  label:hover {
+    cursor: pointer;
+  }
+
+  input:checked + label {
+    background: orange;
+    color: whitesmoke;
+    border: 1px orange;
+    -ms-border-top-right-radius: 3px;
+    -ms-border-top-left-radius: 3px;
+    -ms-border-bottom-right-radius: 3px;
+    -ms-border-bottom-left-radius: 3px;
+    border-radius: 3px;
+  }
+}
+
+.switch-title {
+  display: inline-block;
+  float: left;
+  padding-right: 5px;
+}

ui/src/app/input/input.component.ts

@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./input.component.scss']
 })
 export class InputComponent implements OnInit {
+  featureLevel = 0;
   popupOpened: boolean;
   locked = false;
   format = 'video';
@@ -21,4 +22,8 @@ export class InputComponent implements OnInit {
   submit() {
     console.log('input submit');
   }
+
+  allow600() {
+    return !this.locked && this.featureLevel >= 2;
+  }
 }