working dynamic watchers

magfest · Jan 11, 2025 · a1d7b2d · a1d7b2d
1 parent 8d84712
commit a1d7b2d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/uber/templates/forms/attendee/admin_badge_flags.html b/uber/templates/forms/attendee/admin_badge_flags.html
@@ -178,11 +178,8 @@
 
 {% block ribbons %}
 <div class="row g-sm-3">
-    <div class="col-12">{{ form_macros.alpine_form_input(badge_flags.ribbon,alpine_props={'x-model':'badge_ribbons'}) }}</div>
+    <div class="col-12">{{ form_macros.alpine_form_input(badge_flags.ribbon,alpine_props={'x-model.number':'badge_ribbons'}) }}</div>
 </div>
-{% if staffing_info %}
-{{ form_macros.toggle_fields_js(badge_flags.ribbon, [staffing_info.staffing], on_values=[c.VOLUNTEER_RIBBON], prop='checked') }}
-{% endif %}
 {% endblock %}
 
 {% block group %}

diff --git a/uber/templates/registration/attendee_data.html b/uber/templates/registration/attendee_data.html
@@ -135,7 +135,25 @@
 {% endif %}
 
 {{ form_macros.form_validation('attendee_form', '../registration/validate_attendee', callback="updateAttendee(submit_button_name)") }}
-<form novalidate method="post" action="../registration/update_attendee" id="attendee_form" x-data="{badge_placeholder: {{ attendee.placeholder | javascript_bool }}, badge_ribbons: {{ attendee.ribbon | javascript_array }}, staffing: {{ attendee.staffing | javascript_bool }}}">
+<form novalidate method="post" action="../registration/update_attendee" id="attendee_form"
+      x-data="{
+        badge_placeholder: {{ attendee.placeholder | javascript_bool }},
+        badge_ribbons: {{ attendee.ribbon | javascript_array }},
+        badge_type : {{ attendee.badge_type }},
+        staffing: {{ attendee.staffing | javascript_bool }}
+        }"
+
+      x-init="$watch('badge_ribbons',
+                (ribbons) => {
+                    console.log(Alpine.raw(ribbons))
+                    if (Alpine.raw(ribbons).includes({{ c.VOLUNTEER_RIBBON }})) { staffing=true }
+                });
+              $watch('badge_type',
+                 (btype) => {
+                    console.log(btype);
+                    if( btype == {{ c.STAFF_BADGE }} || btype == {{ c.CONTRACTOR_BADGE }}){ staffing = true }
+              })"
+>
   {{ csrf_token() }}
   <input type="hidden" name="id" value="{{ attendee.db_id }}" />
   {% include "forms/attendee/admin_badge_flags.html" %}

diff --git a/uber/templates/registration/form.html b/uber/templates/registration/form.html
@@ -179,16 +179,17 @@ <h4>{{ attendee.full_name }} currently owes <strong>{{ (receipt.current_amount_o
         badge_type : {{ attendee.badge_type }},
         staffing: {{ attendee.staffing | javascript_bool }}
         }"
-      x-effect="
-          if (Alpine.raw(badge_ribbons).includes({{ c.VOLUNTEER_RIBBON }})) {
-               console.log('Badge ribbons include volunteer')
-               staffing=true
-          }
-          if(badge_type == {{ c.STAFF_BADGE }} || badge_type == {{ c.CONTRACTOR_BADGE }}){
-               console.log('Badge type is staff or contractor!')
-               staffing=true
-          }
-          "
+
+      x-init="$watch('badge_ribbons',
+                (ribbons) => {
+                    console.log(Alpine.raw(ribbons))
+                    if (Alpine.raw(ribbons).includes({{ c.VOLUNTEER_RIBBON }})) { staffing=true }
+                });
+              $watch('badge_type',
+                 (btype) => {
+                    console.log(btype);
+                    if( btype == {{ c.STAFF_BADGE }} || btype == {{ c.CONTRACTOR_BADGE }}){ staffing = true }
+              })"
 >
 {{ csrf_token() }}
 <input type="hidden" name="id" value="{{ attendee.db_id }}" />