Add seventh chords

1 files changed, 15 insertions, 4 deletions

diff --git a/src/view/form.ts b/src/view/form.ts
index a74a7de..67df0d4 100644
--- a/src/view/form.ts
+++ b/src/view/form.ts
@@ -16,8 +16,11 @@ export function view(): Element[] {
         className: 'g-Form', 
         onsubmit 
       },
-      labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
-      labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
+      chordCheckbox({ name: 'major', label: '', checked: opts.major }),
+      chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }),
+      chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }),
+      chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }),
+      chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }),
       labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
       labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
       h('input', { type: 'submit', value: 'Play' })
@@ -25,12 +28,19 @@ export function view(): Element[] {
   )
 }
 
+function chordCheckbox({ name, label, checked }: any): Element {
+  return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked })
+}
+
 function onsubmit(event: Event): void {
   event.preventDefault()
   let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
   let opts = {
     major: input('major').checked,
     minor: input('minor').checked,
+    seventh: input('seventh').checked,
+    minorSeventh: input('minorSeventh').checked,
+    majorSeventh: input('majorSeventh').checked,
     bpm: parseInt(input('bpm').value),
     beatsPerChord: parseInt(input('beatsPerChord').value)
   }
@@ -39,6 +49,7 @@ function onsubmit(event: Event): void {
 }
 
 type LabelInputParams = {
+  className?: string,
   type: string,
   name: string,
   label: string,
@@ -46,9 +57,9 @@ type LabelInputParams = {
   value?: string
 }
 
-function labelInput({ type, name, label, checked, value }: LabelInputParams) {
+function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
   return h('label',
-    {},
+    { className },
     h('input', { type, name, checked, value }),
     label
   )