Redesign basic form (#69)

Fix issue with countries not being selected
ajwalkiewicz · Jan 15, 2023 · 4f32630 · 4f32630
1 parent 987f697
commit 4f32630
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git a/webapp/static/script.js b/webapp/static/script.js
@@ -13,7 +13,12 @@
 
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { validateForm, eraMap, occupationSetMap } from "./validators.js";
+import {
+  validateForm,
+  eraMap,
+  countriesMap,
+  occupationSetMap,
+} from "./validators.js";
 // Cards and buttons
 // const characterCard = document.getElementById("character-card");
 const generateBasicButton = document.getElementById("generate-basic-btn");
@@ -65,8 +70,9 @@ const advancedForm = {
 // Basic Form
 const basicForm = {
   HTMLElement: document.getElementById("form-basic"),
-  eraForm: document.getElementById("validation-era"),
-  occupationSetForm: document.getElementById("validation-occupation-set"),
+  countryForm: document.getElementById("validation-country-basic"),
+  sexForm: document.getElementById("validation-sex-basic"),
+  occupationForm: document.getElementById("validation-occupation-basic"),
 };
 
 function delay(time) {
@@ -213,7 +219,7 @@ function generateCharacter(form) {
 
   let firstName = form?.firstNameForm?.value ?? "";
   let lastName = form?.lastNameForm?.value ?? "";
-  let country = form?.countriesMap?.get(countryForm.value);
+  let country = countriesMap.get(form?.countryForm.value);
   let age = form?.ageForm?.value;
   let sex = form?.sexForm?.value.toLowerCase();
   let year = form?.yearForm?.value;

diff --git a/webapp/static/validators.js b/webapp/static/validators.js
@@ -162,4 +162,4 @@ function validateTags(tags) {
   return true;
 }
 
-export { validateForm, eraMap, occupationSetMap };
+export { validateForm, eraMap, countriesMap, occupationSetMap };
diff --git a/webapp/templates/generator.html b/webapp/templates/generator.html
@@ -79,49 +79,68 @@ <h4 class="modal-title">Feature not implemented</h4>
           <div id="basic" class="container tab-pane active">
             <br />
             <form id="form-basic"" class="row needs-validation" novalidate>
-              <!-- ERA -->
-              <div class="row mb-2 gx-0">
+
+              <!-- Country -->
+              <div class="row gx-0">
                 <div class="col-lg-12 mt-2">
-                  <label for="validation-era" class="form-label">Era</label>
+                  <label for="validation-country-basic" class="form-label"
+                    >Country</label
+                  >
                   <div class="input-group has-validation">
+                    <!-- <span class="input-group-text" id="inputGroupPrepend">@</span> -->
                     <select
                       class="form-select"
-                      id="validation-era"
+                      id="validation-country-basic"
                       aria-describedby="inputGroupPrepend"
                       required
                     >
-                      <option selected>Classic 1920</option>
-                      <option>Modern</option>
-                      <option>All</option>
+                      <option>(PL) Poland</option>
+                      <option>(ES) Spain</option>
+                      <option selected>(US) United States</option>
                     </select>
-                    <div class="invalid-feedback">Please use valid era</div>
+                    <div class="invalid-feedback">
+                      Please use valid country.
+                    </div>
                   </div>
                 </div>
               </div>
 
-              <!-- OCCUPATION SET -->
-              <div class="row mb-2 gx-0">
+              <!-- Gender -->
+              <div class="row ml-0 gx-0">
                 <div class="col-lg-12 mt-2">
-                  <label for="validation-occupation-set" class="form-label"
-                    >Occupation set</label
-                  >
+                  <label for="validation-sex" class="form-label">Gender</label>
                   <div class="input-group has-validation">
+                    <!-- <span class="input-group-text" id="inputGroupPrepend">@</span> -->
                     <select
                       class="form-select"
-                      id="validation-occupation-set"
+                      id="validation-sex-basic"
                       aria-describedby="inputGroupPrepend"
                       required
                     >
-                      <option selected>Keeper Rulebook</option>
-                      <option>Investigators Handbook</option>
-                      <!-- <option>Custom</option> -->
-                      <option>All</option>
+                      <option active>Random</option>
+                      <option>Male</option>
+                      <option>Female</option>
                     </select>
-                    <div class="invalid-feedback">Please use valid era</div>
+                    <div class="invalid-feedback">Please use valid gender.</div>
                   </div>
                 </div>
               </div>
 
+              <!-- Occupation -->
+              <div class="row gx-0 mt-2">
+                <label for="validation-occupation" class="form-label"
+                  >Occupation</label
+                >
+                <select class="form-select" id="validation-occupation-basic" required>
+                  <option selected>optimal (max skill points)</option>
+                  <option>random (ignore characteristics)</option>
+                  {% for occup in occupations %}
+                  <option>{{ occup }}</option>
+                  {% endfor %}
+                </select>
+                <div class="invalid-feedback">Please select an occupation.</div>
+              </div>
+
               <!-- Generate Button -->
               <button
                 id="generate-basic-btn"