Ignore, using Githubs UI to clearly see code changes

docker-compose.yml

@@ -37,15 +37,19 @@ services:
     command: ['celery-worker']
   db:
     image: postgres
+    ports:
+      - 25432:5432
     environment:
       - POSTGRES_PASSWORD=uber_db
       - POSTGRES_USER=uber_db
       - POSTGRES_DB=uber_db
+    volumes:
+      - ./db/uber_data:/var/lib/postgres/data
   redis:
     image: redis
   rabbitmq:
     ports:
-      - "5672"
+      - 25672:5672
     image: rabbitmq:alpine
     environment:
       - RABBITMQ_DEFAULT_USER=celery

uber/custom_tags.py

@@ -833,3 +833,17 @@ def random_hash():
     random = os.urandom(16)
     result = binascii.hexlify(random)
     return result.decode("utf-8")
+
+@JinjaEnv.jinja_filter
+def javascript_bool(val):
+    if val:
+        return 'true'
+    else:
+        return 'false'
+
+@JinjaEnv.jinja_filter
+def javascript_array(val):
+    if val:
+        return '['+ val + ']'
+    else:
+        return '[]'

uber/templates/base.html

@@ -45,7 +45,7 @@
         {{ "deps/bootstrap3/bootbox.min.js"|serve_static_content }}
         {{ "deps/bootstrap3/datatables.min.js"|serve_static_content }}
         {% endif %}
-
+        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>
         <script type="text/javascript">
             $(window).on("runJavaScript", function () {
                 {% if bootstrap5 %}

uber/templates/forms/attendee/admin_badge_flags.html

@@ -70,9 +70,10 @@
 </div>
 {% endif %}
 <div class="row g-sm-3">
+    <div class="col-12 col-sm-6">
     <div class="col-12 col-sm-6">
         <div class="form-text">Placeholder</div>
-        <div>{{ form_macros.form_input(badge_flags.placeholder, admin_text="You will only need to fill out their name and email address.") }}</div>
+        <div>{{ form_macros.alpine_form_input(badge_flags.placeholder, admin_text="You will only need to fill out their name and email address.",alpine_props={'x-model.boolean':'badge_placeholder'}) }}</div>
     </div>
     {% if c.TRANSFERABLE_BADGE_TYPES|length > 0 %}
         {% set transfer_admin_text %}
@@ -132,7 +133,7 @@
     <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_status,
             admin_text=attendee.cannot_edit_badge_status_reason,
             disabled=(attendee.cannot_edit_badge_status_reason != '')) }}</div>
-    <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_type) }}</div>
+    <div class="col-12 col-sm-4">{{ form_macros.alpine_form_input(badge_flags.badge_type, alpine_props={'x-model':'badge_type'}) }}</div>
     <div class="col-12 col-sm-4">{{ form_macros.form_input(badge_flags.badge_num,
             extra_field=form_macros.toggle_checkbox(badge_flags.no_badge_num, [badge_flags.badge_num], hide_on_checked=True, prop="readonly", checked=not attendee.badge_num)) }}</div>
 </div>
@@ -177,11 +178,8 @@
 
 {% block ribbons %}
 <div class="row g-sm-3">
-    <div class="col-12">{{ form_macros.form_input(badge_flags.ribbon) }}</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 %}

uber/templates/forms/attendee/admin_staffing_info.html

@@ -15,85 +15,60 @@
 <div class="row g-sm-3">
     <div class="col-12">
         <div class="form-text">Volunteering/Staffing</div>
-        {{ form_macros.toggle_checkbox(staffing_info.staffing, [staffing_info.walk_on_volunteer,
-                                                                staffing_info.requested_depts_ids,
-                                                                staffing_info.assigned_depts_ids,
-                                                                staffing_info.agreed_to_volunteer_agreement,
-                                                                staffing_info.got_staff_merch,
-                                                                staffing_info.hotel_eligible
-                                                                ], admin_text=staffing_admin_text) }}
+        {{ form_macros.alpine_form_input(staffing_info.staffing, admin_text=staffing_admin_text, alpine_props={'x-model.boolean':'staffing'}) }}
     </div>
 </div>
-<script type="text/javascript">
-    var checkStaffing = function() {
-        true_evals = [];
-        {% if badge_flags %}
-            true_evals.push({{ [c.STAFF_BADGE, c.CONTRACTOR_BADGE] }}.map(String).includes($("#{{ badge_flags.badge_type.id }}").val()));
-            true_evals.push($("#{{ badge_flags.ribbon.id }}-{{ c.VOLUNTEER_RIBBON }}").prop('checked'));
-        {% endif %}
-        if(true_evals.some(item => item)) {
-            $("#{{ staffing_info.staffing.id }}").prop('checked', true).trigger('change');
-        }
-    }
-    $().ready(function () {
-        checkStaffing();
-        {% if badge_flags %}
-        $("#{{ badge_flags.badge_type.id }}").change(checkStaffing);
-        $("#{{ badge_flags.ribbon.id }}").change(checkStaffing);
-        {% endif %}
-    })
-</script>
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12">
         <div class="form-text">Walk-On Volunteer</div>
-        {{ form_macros.form_input(staffing_info.walk_on_volunteer) }}
+        {{ form_macros.alpine_form_input(staffing_info.walk_on_volunteer) }}
     </div>
 </div>
 
 {% if c.PUBLIC_DEPARTMENT_OPTS_WITH_DESC|length > 1 %}
-<div class="row g-sm-3">
-    <div class="col-12">{{ form_macros.form_input(staffing_info.requested_depts_ids) }}</div>
+<div class="row g-sm-3" x-show="staffing">
+    <div class="col-12">{{ form_macros.alpine_form_input(staffing_info.requested_depts_ids) }}</div>
 </div>
 {% endif %}
 
-<div class="row g-sm-3">
-    <div class="col-12">{{ form_macros.form_input(staffing_info.assigned_depts_ids) }}</div>
+<div class="row g-sm-3" x-show="staffing">
+    <div class="col-12">{{ form_macros.alpine_form_input(staffing_info.assigned_depts_ids) }}</div>
 </div>
 {% endblock %}
 
 {% block merch_info %}
 {% if c.SEPARATE_STAFF_MERCH %}
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     <div class="col-12 col-sm-6">
         <div class="form-text">Staff Merch Owed</div>
         <div class="mb-3">{{ attendee.staff_merch }}</div>
     </div>
     <div class="col-12 col-sm-6">
         <div class="form-text">Received Staff Merch</div>
-        <div class="mb-3">{{ form_macros.form_input(staffing_info.got_staff_merch) }}</div>
+        <div class="mb-3">{{ form_macros.alpine_form_input(staffing_info.got_staff_merch) }}</div>
     </div>
 </div>
 {% endif %}
 {% endblock %}
 
 {% block checklist_info %}
-<div class="row g-sm-3">
+<div class="row g-sm-3" x-show="staffing">
     {% if c.VOLUNTEER_AGREEMENT_ENABLED %}
     <div class="col">
-        {{ form_macros.form_input(staffing_info.agreed_to_volunteer_agreement,
+        {{ form_macros.alpine_form_input(staffing_info.agreed_to_volunteer_agreement,
             hidden_field_text=staffing_info.agreed_to_volunteer_agreement.data|yesno("Yes,No")) }}
     </div>
     {% endif %}
     {% if c.EMERGENCY_PROCEDURES_ENABLED %}
     <div class="col">
-        {{ form_macros.form_input(staffing_info.reviewed_emergency_procedures,
+        {{ form_macros.alpine_form_input(staffing_info.reviewed_emergency_procedures,
             hidden_field_text=staffing_info.reviewed_emergency_procedures.data|yesno("Yes,No")) }}
     </div>
     {% endif %}
     <div class="col">
         <div class="form-text">Staff Crash Space</div>
         <div class="mb-3">
-            {{ form_macros.form_input(staffing_info.hotel_eligible, readonly=not c.HAS_DEVTOOLS_ACCESS) }}
+            {{ form_macros.alpine_form_input(staffing_info.hotel_eligible, readonly=not c.HAS_DEVTOOLS_ACCESS) }}
         </div>
     </div>
 </div>

uber/templates/forms/attendee/personal_info.html

@@ -14,13 +14,24 @@
 
   Use these to add or rearrange fields. Remember to use {{ super() }} to print the original fields as-is.
 #}
-
-{% block name %}
-{% set attendee_last_name = attendee.last_name[0] ~ '.' if limited_read else attendee.last_name %}
+<div x-data="{
+                international: {{ personal_info.international.data | javascript_bool }},
+                dealer: {{ (is_prereg_dealer or attendee.is_dealer) | javascript_bool }},
+                noCellphone: {{ personal_info.no_cellphone.data | javascript_bool }},
+                copyEmail: {{ (group and loaded_from_group and attendee.email == group.email_address) | javascript_bool }},
+                get isEmailRequired() { return !this.copyEmail },
+                copyAddress: false,
+                copyCellphone: false,
+                get isZipRequired(){ return !this.international && !this.copyAddress && !this.badge_placeholder },
+                get isCellphoneDisabled() { return this.noCellphone || this.copyCellphone},
+                get isCellphoneRequired() { return (this.staffing || this.dealer) && !this.noCellphone && !this.copyCellphone && !this.badge_placeholder }
+                }">
+    {% block name %}
+    {% set attendee_last_name = attendee.last_name[0] ~ '.' if limited_read else attendee.last_name %}
 
 <div class="row g-sm-3">
-<div class="col-12 col-sm-6">{{ form_macros.form_input(personal_info.first_name) }}</div>
-<div class="col-12 col-sm-6">{{ form_macros.form_input(personal_info.last_name, value=attendee_last_name) }}</div>
+<div class="col-12 col-sm-6">{{ form_macros.alpine_form_input(personal_info.first_name) }}</div>
+<div class="col-12 col-sm-6">{{ form_macros.alpine_form_input(personal_info.last_name, value=attendee_last_name) }}</div>
 </div>
 
 {% if attendee.legal_name or attendee.is_new or attendee.placeholder or admin_area %}
@@ -29,7 +40,7 @@
                    checked=attendee.first_name != '' and attendee.legal_name == '') }}
   </div>
 
-  <div class="col-12 col-sm-6">{{ form_macros.form_input(personal_info.legal_name, help_text=macros.popup_link("../static_views/legal_name.html", 'What does "Legal Photo ID" mean?')) }}
+  <div class="col-12 col-sm-6">{{ form_macros.alpine_form_input(personal_info.legal_name, help_text=macros.popup_link("../static_views/legal_name.html", 'What does "Legal Photo ID" mean?')) }}
   </div>
 </div>
 {% else %}
@@ -49,16 +60,13 @@
 
 {% block contact_info %}
 {% set attendee_email = attendee.masked_email if limited_read else attendee.email %}
-{% if is_prereg_dealer %}
-  {% set email_extra_field = form_macros.toggle_checkbox(personal_info.copy_email, [personal_info.email], hide_on_checked=True, toggle_required=True, prop="disabled", checked=group and loaded_from_group and attendee.email == group.email_address) %}
-  {% set cellphone_extra_field = form_macros.toggle_checkbox(personal_info.copy_phone, [personal_info.cellphone], hide_on_checked=True, prop="disabled", checked=group and loaded_from_group and attendee.cellphone == group.phone) %}
-{% elif attendee.staffing or (other_info and other_info is not none) %}
-  {% set cellphone_extra_field = form_macros.toggle_checkbox(personal_info.no_cellphone, [personal_info.cellphone], hide_on_checked=True, prop="disabled") %}
-{% endif %}
 
 <div class="row g-sm-3">
   <div class="col-12 col-sm-6">
-    {{ form_macros.form_input(personal_info.email, extra_field=email_extra_field, value=attendee_email) }}
+    {{ form_macros.alpine_form_input(personal_info.email, value=attendee_email, alpine_props={':required':'isEmailRequired', ':disabled':'copyEmail'}) }}
+      {% if is_prereg_dealer %}
+          {{ form_macros.alpine_form_input(personal_info.copy_email, alpine_props={'x-model.boolean':'copyEmail'}) }}
+      {% endif %}
   </div>
   {% if c.PREREG_CONFIRM_EMAIL_ENABLED and (attendee.needs_pii_consent or attendee.badge_status == c.PENDING_STATUS) %}
   <div class="col-12 col-sm-6">
@@ -68,43 +76,16 @@
 <div class="row g-sm-3">
   {% endif %}
   <div class="col-12 col-sm-6">
-    {{ form_macros.form_input(personal_info.cellphone, extra_field=cellphone_extra_field, required=is_prereg_dealer or attendee.is_dealer or attendee.staffing) }}
-  </div>
-</div>
-<script type="text/javascript">
-  var checkCellphoneRequired = function() {
-      true_evals = [];
-      false_evals = [];
-      {% if is_prereg_dealer %}
-        true_evals.push(true);
-        false_evals.push($("#{{ personal_info.copy_phone.id }}").prop('checked') == false);
-      {% else %}
-        false_evals.push($("#{{ personal_info.no_cellphone.id }}").prop('checked') == false);
-      {% endif %}
-      {% if staffing_info %}
-        true_evals.push($("#{{ staffing_info.staffing.id }}").prop('checked'));
-      {% endif %}
-      {% if badge_flags %}
-        false_evals.push($("#{{ badge_flags.placeholder.id }}").prop('checked') == false);
-      {% endif %}
-      toggleOn = true_evals.some(item => item) && false_evals.every(item => item)
-      $("#{{ personal_info.cellphone.id }}").prop('required', toggleOn);
-      $('#{{ personal_info.cellphone.id }}').siblings('label').children('.required-indicator').toggle(toggleOn);
-  }
-  $().ready(function () {
-    checkCellphoneRequired();
-    $("#{{ personal_info.no_cellphone.id }}").change(checkCellphoneRequired);
-      {% if staffing_info %}
-      $("#{{ staffing_info.staffing.id }}").change(checkCellphoneRequired);
-      {% endif %}
-      {% if badge_flags %}
-      $("#{{ badge_flags.placeholder.id }}").change(checkCellphoneRequired);
-      {% endif %}
-  })
-</script>
+          {{ form_macros.alpine_form_input(personal_info.cellphone, no_margin=True, alpine_props={':required':'isCellphoneRequired', ':disabled':'isCellphoneDisabled'})}}
+         {% if is_prereg_dealer %}
+             {{ form_macros.alpine_form_input(personal_info.copy_phone, alpine_props={'x-model.boolean':'copyCellphone'}) }}
+         {% elif attendee.staffing or (other_info and other_info is not none) %}
+             {{ form_macros.alpine_form_input(personal_info.no_cellphone, alpine_props={'x-model.boolean':'noCellphone'}) }}
+         {% endif %}
+      </div>
+    </div>
 {% endblock %}
 
-
 {% block age %}
 <div class="row g-sm-3">
   <div class="col-12 col-sm-6">
@@ -119,7 +100,7 @@
     {% if c.CONSENT_FORM_URL and not admin_area %}
     <div class="alert alert-warning" role="alert">
       <em>
-        Attendees under 18 <b>MUST</b> bring a signed (and notarized if not accompanied by parent or guardian during badge pickup) 
+        Attendees under 18 <b>MUST</b> bring a signed (and notarized if not accompanied by parent or guardian during badge pickup)
         <a class="link-dark" target="_blank" href="{{ c.CONSENT_FORM_URL }}">parental consent form</a>.
       </em>
     </div>
@@ -134,9 +115,9 @@
 {% if is_prereg_dealer %}
 <div class="row g-sm-3">
   <div class="col-12">
-    {{ form_macros.toggle_checkbox(personal_info.copy_address, 
-      [personal_info.address1, personal_info.address2, personal_info.city, personal_info.region_us, 
-      personal_info.region_canada, personal_info.region, personal_info.zip_code, personal_info.country], 
+    {{ form_macros.toggle_checkbox(personal_info.copy_address,
+      [personal_info.address1, personal_info.address2, personal_info.city, personal_info.region_us,
+      personal_info.region_canada, personal_info.region, personal_info.zip_code, personal_info.country],
       hide_on_checked=True, toggle_required=True, prop="disabled", checked=group and loaded_from_group and attendee.address1 == group.address1) }}
   </div>
 </div>
@@ -149,7 +130,7 @@
       $('#country-selectToAutocomplete').siblings('label').children('.required-indicator').toggle(!$("#country").prop("disabled"));
     }, 10);
   })
-  $().ready(function() { 
+  $().ready(function() {
     setTimeout(function() {
       if ($("#country").prop("disabled")) {
         $("#region").prop('disabled', true);
@@ -159,15 +140,16 @@
       $("country-selectToAutocomplete").prop('disabled', $("#country").prop("disabled"));
       $('#country-selectToAutocomplete').siblings('label').children('.required-indicator').toggle(!$("#country").prop("disabled"));
     }, 10);
-   }) 
+   })
 </script>
 {% endif %}
   {{ form_macros.address_fields(attendee, personal_info) }}
 {% else %}
 {# We need a better solution, but avoiding a row here allows event plugins to put a field next to the zip code #}
-  <div class="col-12 col-sm-6">
-    {{ form_macros.form_input(personal_info.zip_code, extra_field=form_macros.toggle_checkbox(personal_info.international, [personal_info.zip_code], hide_on_checked=True, toggle_required=True, prop='')) }}
-  </div>
+      <div class="col-12 col-sm-6">
+            {{ form_macros.alpine_form_input(personal_info.zip_code, no_margin=True, alpine_props={':required':'isZipRequired', ':disabled':'copyAddress'}) }}
+            {{ form_macros.alpine_form_input(personal_info.international, alpine_props={'x-model.boolean':'international'}) }}
+      </div>
 {% endif %}
 {% endblock %}
 
@@ -198,4 +180,5 @@
   </div>
 </div>
 {% endif %}
-{% endblock %}
+{% endblock %}
+</div>