settingsPage.js (9352B)
1 // settings-input component 2 const settingsInput = Vue.component("settingsInput", { 3 props: { 4 value: { 5 type: Object, 6 default: getSettings, 7 }, 8 }, 9 10 watch: { 11 value: { 12 handler: function(value) { 13 setSettings(value); 14 15 this.$emit("input", value); 16 }, 17 deep: true, 18 }, 19 }, 20 21 methods: { 22 reset: function(args) { 23 localStorage.removeItem("settings"); 24 this.value = getSettings(); 25 args.target.blur(); 26 }, 27 }, 28 29 activated: function() { 30 // Refresh settings 31 this.value = getSettings(); 32 }, 33 34 template: ` 35 <div class="settingsInput" ref="container"> 36 <div class="appearanceSettings"> 37 <h2>Appearance</h2> 38 <div> 39 <input type="checkbox" id="settingsDarkTheme" v-model="value.darkTheme"> 40 <label for="settingsDarkTheme">Dark Mode</label> 41 </div> 42 <div> 43 <input type="checkbox" id="settingsConjugationColors" v-model="value.conjugationColors"> 44 <label for="settingsConjugationColors">Colored conjugations in reference tables</label> 45 </div> 46 </div> 47 48 <div class="quizzerPromptsSettings"> 49 <h2>Quizzer Prompts</h2> 50 <div> 51 <label for="settingsPromptType">Prompt type</label> 52 <select id="settingsPromptType" v-model="value.promptType"> 53 <option>Text</option> 54 <option>Audio</option> 55 <option>Both</option> 56 </select> 57 </div> 58 <div> 59 <label for="settingsInputType">Input type</label> 60 <select id="settingsInputType" v-model="value.inputType"> 61 <option>Text</option> 62 <option>Voice</option> 63 <option>Either</option> 64 </select> 65 </div> 66 <div> 67 <label for="settingsMultiplePrompts">Multiple prompts</label> 68 <select id="settingsMultiplePrompts" v-model="value.multiplePrompts"> 69 <option>Show together</option> 70 <option>Show separately</option> 71 <option>Show one</option> 72 </select> 73 </div> 74 <div> 75 <input type="checkbox" id="settingsRemoveDuplicates" v-model="value.removeDuplicates"> 76 <label for="settingsRemoveDuplicates">Remove duplicate prompts</label> 77 </div> 78 </div> 79 80 <div class="quizzerGradingSettings"> 81 <h2>Quizzer Grading</h2> 82 <div> 83 <label for="settingsOnMissedPrompt">When I miss a prompt</label> 84 <select id="settingsOnMissedPrompt" v-model="value.onMissedPrompt"> 85 <option>Correct me</option> 86 <option>Tell me</option> 87 <option>Ignore it</option> 88 </select> 89 </div> 90 <div> 91 <label for="settingsRepeatPrompts">Repeat missed prompts</label> 92 <select id="settingsRepeatPrompts" v-model="value.repeatPrompts"> 93 <option>Never</option> 94 <option>Immediately</option> 95 <option>5 prompts later</option> 96 <option>5 & 10 prompts later</option> 97 <option>At the end</option> 98 </select> 99 </div> 100 <div> 101 <label for="settingsMultipleAnswers">Multiple answers</label> 102 <select id="settingsMultipleAnswers" v-model="value.multipleAnswers"> 103 <option>Require all</option> 104 <option>Require any</option> 105 </select> 106 </div> 107 <div> 108 <label for="settingsShowDiff">Show differences with answer</label> 109 <select id="settingsShowDiff" v-model="value.showDiff"> 110 <option>Never</option> 111 <option>For single answers</option> 112 <option>Always</option> 113 </select> 114 </div> 115 </div> 116 117 <div class="defaultFiltersSettings"> 118 <h2>Default Verb Filter</h2> 119 <div> 120 <select v-model="value.defaultFilters.verbs.tense"> 121 <option>All Tenses</option> 122 <option>Present Participles</option> 123 <option>Past Participles</option> 124 <option>Present Tense</option> 125 <option>Preterite Tense</option> 126 <option>Imperfect Tense</option> 127 <option>Simple Future Tense</option> 128 <option>Present Subjunctive Tense</option> 129 </select> 130 <select v-model="value.defaultFilters.verbs.type"> 131 <option>All Types</option> 132 <option>Reflexive</option> 133 <option>Regular</option> 134 <option>Nonregular</option> 135 <option>Stem Changing</option> 136 <option>Orthographic</option> 137 <option>Irregular</option> 138 </select> 139 <select v-model="value.defaultFilters.verbs.subject"> 140 <option>All Subjects</option> 141 <option>Type</option> 142 <option>Yo</option> 143 <option>Tú</option> 144 <option>Él</option> 145 <option>Nosotros</option> 146 <option>Ellos</option> 147 </select> 148 <select v-model="value.defaultFilters.verbs.direction"> 149 <option>Eng. → Conj.</option> 150 <option>Esp. → Conj.</option> 151 <option>Conj. → Eng.</option> 152 <option>Conj. → Esp.</option> 153 </select> 154 </div> 155 <h2>Default Vocab Filter</h2> 156 <div> 157 <select v-model="value.defaultFilters.vocab.category"> 158 <option>All Categories</option> 159 <optgroup label="Common Words"> 160 <option>Adjectives</option> 161 <option>Adverbs</option> 162 <option>Prepositions</option> 163 <option>Transitions</option> 164 <option>Verbs</option> 165 </optgroup> 166 <optgroup label="Basic Words"> 167 <option>Colors</option> 168 <option>Days</option> 169 <option>Months</option> 170 <option>Numbers</option> 171 <option>Questions</option> 172 </optgroup> 173 <optgroup label="Advanced Words"> 174 <option>Childhood</option> 175 <option>Clothes</option> 176 <option>Family</option> 177 <option>Food</option> 178 <option>Health</option> 179 <option>House</option> 180 <option>Nature</option> 181 <option>Professions</option> 182 <option>Vacation</option> 183 <option>Weather</option> 184 </optgroup> 185 </select> 186 <select v-model="value.defaultFilters.vocab.type"> 187 <option>All Types</option> 188 <option>Adjectives</option> 189 <option>Nouns</option> 190 <option>Verbs</option> 191 </select> 192 <select v-model="value.defaultFilters.vocab.direction"> 193 <option>Eng. ↔ Esp.</option> 194 <option>Eng. → Esp.</option> 195 <option>Esp. → Eng.</option> 196 </select> 197 </div> 198 </div> 199 200 <div class="resetSettings"> 201 <button title="Reset" @click="reset">Reset</button> 202 </div> 203 </div> 204 `, 205 }); 206 207 208 209 // settings-page component 210 const settingsPage = Vue.component("settingsPage", { 211 props: { 212 referer: { 213 type: String, 214 default: "home", 215 }, 216 }, 217 218 template: ` 219 <div class="settingsPage"> 220 <page-header @click1="$emit('back', referer);" icon1="x" label1="Back"></page-header> 221 <main> 222 <h1>Settings</h1> 223 <settings-input></settings-input> 224 </main> 225 </div> 226 `, 227 });