updated course creation

app/templates/admin/edit_course.html

@@ -44,16 +44,16 @@
       </div>
     </div>
 
-    <div class="card">
+    <div class="card"
-      {% set course_par = holes | sum(attribute='par') %}
+         x-data="{ pars: { {% for h in holes %}'{{ h.hole_number }}': {{ h.par or 4 }}{% if not loop.last %}, {% endif %}{% endfor %} }, coursePar() { return Object.values(this.pars).reduce((a, b) => a + parseInt(b), 0); } }">
       <h2 style="font-size:0.95rem; color:var(--text-muted); margin-bottom:0.75rem;">
-        Hole details <span style="font-weight:400;">— Course par: <strong>{{ course_par }}</strong></span>
+        Hole details <span style="font-weight:400;">— Course par: <strong x-text="coursePar()"></strong></span>
       </h2>
       <div class="hole-pars-grid">
         {% for h in holes %}
         <div class="hole-par-cell">
           <div class="hole-par-label">{{ h.hole_number }}</div>
-          <select name="par_{{ h.hole_number }}" class="hole-par-select">
+          <select name="par_{{ h.hole_number }}" class="hole-par-select" x-model="pars['{{ h.hole_number }}']">
             <option value="3" {% if h.par == 3 %}selected{% endif %}>3</option>
             <option value="4" {% if h.par == 4 %}selected{% endif %}>4</option>
             <option value="5" {% if h.par == 5 %}selected{% endif %}>5</option>

app/templates/admin/new_course.html

@@ -12,8 +12,12 @@
         x-data="{
           holes: {{ (form.holes if form else 18)|int }},
           initPars: {{ form.pars | tojson if (form and form.pars) else '{}' }},
-          initSIs: {{ form.stroke_indices | tojson if (form and form.stroke_indices) else '{}' }}
+          initSIs: {{ form.stroke_indices | tojson if (form and form.stroke_indices) else '{}' }},
-        }">
+          pars: {},
+          coursePar() { return Object.values(this.pars).reduce((a, b) => a + parseInt(b || 4), 0); },
+          initParState() { this.pars = {}; for (let i = 1; i <= this.holes; i++) this.pars[i] = this.initPars[String(i)] || 4; }
+        }"
+        x-init="initParState(); $watch('holes', () => initParState())">
     <div class="card">
       <div class="form-group">
         <label for="name">Course name</label>
@@ -48,17 +52,17 @@
       <h2 style="font-size:0.95rem; color:var(--text-muted); margin-bottom:0.75rem;">
         Hole details
         <span style="font-weight:400; font-size:0.85rem;">
-          — Course par: <strong x-text="Array.from({length: holes}, (_, i) => parseInt(document.querySelector('[name=par_' + (i+1) + ']')?.value || 4)).reduce((a,b)=>a+b,0)"></strong>
+          — Course par: <strong x-text="coursePar()"></strong>
         </span>
       </h2>
       <div class="hole-pars-grid">
         <template x-for="n in Array.from({length: holes}, (_, i) => i + 1)" :key="n">
           <div class="hole-par-cell">
             <div class="hole-par-label" x-text="n"></div>
-            <select :name="'par_' + n" class="hole-par-select">
+            <select :name="'par_' + n" class="hole-par-select" x-model="pars[n]">
-              <option value="3" :selected="(initPars[String(n)] || 4) == 3">3</option>
+              <option value="3">3</option>
-              <option value="4" :selected="(initPars[String(n)] || 4) == 4">4</option>
+              <option value="4">4</option>
-              <option value="5" :selected="(initPars[String(n)] || 4) == 5">5</option>
+              <option value="5">5</option>
             </select>
             <select :name="'si_' + n" class="hole-par-select">
               <option value="">—</option>