Check-in: Show more information (#3576)

* Check-in: Show more information

* Add change notes

* Rebase migration

* Add "expand" option to checkinrpc

* REmove accidental file

* Docs fixes

* REbase migration

* Rebase migration

* Fix typo

* REbase migration

* Make web-checkin look more like new android checkin

src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/app.vue

@@ -25,22 +25,32 @@
           {{ checkError }}
         </div>
         <div :class="'check-result-status check-result-' + checkResultColor">
-          {{ checkResultText }}
-        </div>
-        <div class="panel-body" v-if="checkResult.position">
-          <div class="details">
-            <h4>{{ checkResult.position.order }}-{{ checkResult.position.positionid }} {{ checkResult.position.attendee_name }}</h4>
-            <strong v-if="checkResult.reason_explanation">{{ checkResult.reason_explanation }}<br></strong>
-            <span>{{ checkResultItemvar }}</span><br>
-            <span v-if="checkResultSubevent">{{ checkResultSubevent }}<br></span>
-            <span class="secret">{{ checkResult.position.secret }}</span>
-            <span v-if="checkResult.position.seat"><br>{{ checkResult.position.seat.name }}</span>
-          </div>
+          <div class="check-result-text">{{ checkResultText }}</div>
+          <div class="check-result-item">{{ checkResultItemvar }}</div>
+          <div class="check-result-reason" v-if="checkResult.reason_explanation">{{ checkResult.reason_explanation }}</div>
+
         </div>
         <div class="attention" v-if="checkResult && checkResult.require_attention">
           <span class="fa fa-warning"></span>
           {{ $root.strings['check.attention'] }}
         </div>
+        <div class="panel-body" v-if="checkResult.position">
+          <div class="details">
+            <code>{{ checkResult.position.order }}-{{ checkResult.position.positionid }}</code>
+            <h4>{{ checkResult.position.attendee_name }}</h4>
+            <span v-if="checkResultSubevent">{{ checkResultSubevent }}<br></span>
+            <span class="secret">{{ checkResult.position.secret }}</span>
+            <span v-if="checkResult.position.seat"><br>{{ checkResult.position.seat.name }}</span>
+            <span v-for="a in checkResult.position.answers">
+              <span v-if="a.question.show_during_checkin">
+                <br>
+                <strong>{{ a.question.question | i18nstring_localize }}:</strong>
+                {{ a.answer | answer(a.question, $root.timezone, $root.strings) }}
+              </span>
+            </span>
+            <strong v-for="t in checkResult.checkin_texts"><br>{{ t }}</strong>
+          </div>
+        </div>
       </div>
 
       <div v-else-if="searchResults !== null" class="panel panel-primary search-results">
@@ -296,6 +306,24 @@ export default {
       }
     },
   },
+  filters: {
+    i18nstring_localize (value) {
+      return i18nstring_localize(value);
+    },
+    answer (value, question, timezone, strings) {
+      if (question.type === "B" && value === "True") {
+        return strings['yes']
+      } else if (question.type === "B" && value === "False") {
+        return strings['no']
+      } else if (question.type === "W" && !!value) {
+        return moment(value).tz(timezone).format("L LT")
+      } else if (question.type === "D" && !!value) {
+        return moment(value).format("L")
+      } else {
+        return value
+      }
+    },
+  },
   methods: {
     selectResult(res) {
       this.check(res.id, false, false, false, false)
@@ -341,7 +369,7 @@ export default {
         this.$refs.input.blur()
       })
 
-      let url = this.$root.api.lists + this.checkinlist.id + '/positions/' + encodeURIComponent(id) + '/redeem/?expand=item&expand=subevent&expand=variation'
+      let url = this.$root.api.lists + this.checkinlist.id + '/positions/' + encodeURIComponent(id) + '/redeem/?expand=item&expand=subevent&expand=variation&expand=answers.question'
       if (untrusted)  {
         url += '&untrusted_input=true'
       }
@@ -399,7 +427,7 @@ export default {
             } else if (data.status === 'error' && data.reason === 'invalid' && fallbackToSearch) {
               this.startSearch(false)
             } else {
-              this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+              this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
               this.fetchStatus()
             }
           })
@@ -407,7 +435,7 @@ export default {
             this.checkLoading = false
             this.checkResult = {}
             this.checkError = reason.toString()
-            this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+            this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
           })
     },
     globalKeydown(e) {
@@ -487,13 +515,13 @@ export default {
             } else {
               this.searchError = data
             }
-            this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+            this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
           })
           .catch(reason => {
             this.searchLoading = false
             this.searchResults = []
             this.searchError = reason
-            this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+            this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
           })
     },
     searchNext() {
@@ -510,12 +538,12 @@ export default {
             } else {
               this.searchError = data
             }
-            this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+            this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
           })
           .catch(reason => {
             this.searchLoading = false
             this.searchError = reason
-            this.clearTimeout = window.setTimeout(this.clear, 1000 * 20)
+            this.clearTimeout = window.setTimeout(this.clear, 1000 * 30)
           })
     },
     switchType() {

src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/main.js

@@ -66,6 +66,8 @@ window.vapp = new Vue({
             'status.checkin': gettext('Checked-in Tickets'),
             'status.position': gettext('Valid Tickets'),
             'status.inside': gettext('Currently inside'),
+            'yes': gettext('Yes'),
+            'no': gettext('No'),
         },
         event_name: document.querySelector('#app').attributes['data-event-name'].value,
         timezone: document.body.attributes['data-timezone'].value,

src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/scss/main.scss

@@ -96,11 +96,9 @@ a.searchresult, .check-result {
 .check-result-status {
   height: 30vh;
   max-height: 200px;
-  font-size: 35px;
-  text-transform: uppercase;
-  font-weight: bold;
   text-align: center;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
@@ -117,6 +115,21 @@ a.searchresult, .check-result {
   &.check-result-purple {
     background: $brand-primary;
   }
+  .check-result-text {
+    font-size: 35px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .check-result-item {
+    font-size: 28px;
+  }
+}
+.check-result .panel-body code {
+  float: right;
+  background: none;
+  font-size: 18px;
+  line-height: 1.1;
+  padding: 0;
 }
 
 .attention {
@@ -137,7 +150,7 @@ a.searchresult, .check-result {
 
 @-webkit-keyframes blinking {
   0%, 49% {
-    background-color: $brand-primary;
+    background-color: $brand-info;
     color: white;
   }
   50%, 100% {

src/pretix/plugins/webcheckin/templates/pretixplugins/webcheckin/index.html

@@ -25,6 +25,7 @@
       data-pretixlocale="{{ request.LANGUAGE_CODE }}" data-timezone="{{ request.event.settings.timezone }}">
 <div
         data-api-lists="{% url "api-v1:checkinlist-list" event=request.event.slug organizer=request.organizer.slug %}"
+        data-api-questions="{% url "api-v1:question-list" event=request.event.slug organizer=request.organizer.slug %}"
         data-event-name="{{ request.event.name }}"
         id="app"></div>
 {% compress js %}