Add check-in simulator (#3380)

2023-06-13 14:57:24 +02:00
parent 4917249bab
commit 002416e435
15 changed files with 544 additions and 137 deletions
--- a/src/pretix/static/pretixcontrol/js/ui/checkinrules.js
+++ b/src/pretix/static/pretixcontrol/js/ui/checkinrules.js
@@ -93,13 +93,19 @@ $(function () {
    },
  };

-  Vue.component('checkin-rule', CheckinRule.default);
-  var app = new Vue({
-    el: '#rules-editor',
-    components: {
+  var components = {
+    CheckinRulesVisualization: CheckinRulesVisualization.default,
+  }
+  if (typeof CheckinRule !== "undefined") {
+    Vue.component('checkin-rule', CheckinRule.default);
+    components = {
      CheckinRulesEditor: CheckinRulesEditor.default,
      CheckinRulesVisualization: CheckinRulesVisualization.default,
-    },
+    }
+  }
+  var app = new Vue({
+    el: '#rules-editor',
+    components: components,
    data: function () {
      return {
        rules: {},
@@ -187,17 +193,23 @@ $(function () {
    },
    created: function () {
      this.rules = JSON.parse($("#id_rules").val());
-      this.items = JSON.parse($("#items").html());
+      if ($("#items").length) {
+        this.items = JSON.parse($("#items").html());

-      var root = this.$root
-      function _update() {
-        root.all_products = $("#id_all_products").prop("checked")
-        root.limit_products = $("input[name=limit_products]:checked").map(function () { return parseInt($(this).val()) }).toArray()
+        var root = this.$root
+
+        function _update() {
+          root.all_products = $("#id_all_products").prop("checked")
+          root.limit_products = $("input[name=limit_products]:checked").map(function () {
+            return parseInt($(this).val())
+          }).toArray()
+        }
+
+        $("#id_all_products, input[name=limit_products]").on("change", function () {
+          _update();
+        })
+        _update()
      }
-      $("#id_all_products, input[name=limit_products]").on("change", function () {
-        _update();
-      })
-      _update()
    },
    watch: {
      rules: {
--- a/src/pretix/static/pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue
+++ b/src/pretix/static/pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue
@@ -106,6 +106,9 @@ export default {
            let [new_children, new_tails] = _add_to_graph(operand)
            for (let new_child of new_tails) {
              graph.nodes_by_id[new_child].children.push(...children)
+              for (let c of children) {
+                graph.nodes_by_id[c].parent = graph.nodes_by_id[new_child]
+              }
            }
            if (tails === null) {
              tails = new_tails
--- a/src/pretix/static/pretixcontrol/js/ui/checkinrules/viz-node.vue
+++ b/src/pretix/static/pretixcontrol/js/ui/checkinrules/viz-node.vue
@@ -3,20 +3,27 @@
        <path v-for="e in edges" :d="e" class="edge"></path>
        <path v-if="rootEdge" :d="rootEdge" class="edge"></path>
        <path v-if="!node.children.length" :d="checkEdge" class="edge"></path>
-        <rect :width="boxWidth" :height="boxHeight" :x="x" :y="y" class="node" rx="5">
+        <rect :width="boxWidth" :height="boxHeight" :x="x" :y="y" :class="nodeClass" rx="5">
        </rect>
+
        <foreignObject :width="boxWidth - 10" :height="boxHeight - 10" :x="x + 5" :y="y + 5">
            <div xmlns="http://www.w3.org/1999/xhtml" class="text">
                <span v-if="vardata && vardata.type === 'int'">
                    <span v-if="variable.startsWith('entries_')" class="fa fa-sign-in"></span>
                    {{ vardata.label }}
                    <br>
+                    <span v-if="varresult !== null">
+                      {{varresult}}
+                    </span>
                    <strong>
-                        {{ op.label }} {{ rightoperand }}
+                      {{ op.label }} {{ rightoperand }}
                    </strong>
                </span>
                <span v-else-if="vardata && variable === 'now'">
                    <span class="fa fa-clock-o"></span> {{ vardata.label }}<br>
+                    <span v-if="varresult !== null">
+                      {{varresult}}
+                    </span>
                    <strong>
                        {{ op.label }}<br>
                        <span v-if="rightoperand.buildTime[0] === 'custom'">
@@ -37,7 +44,11 @@
                    </strong>
                </span>
                <span v-else-if="vardata && operator === 'inList'">
-                    <span class="fa fa-ticket"></span> {{ vardata.label }}<br>
+                    <span class="fa fa-ticket"></span> {{ vardata.label }}
+                    <span v-if="varresult !== null">
+                      ({{varresult}})
+                    </span>
+                    <br>
                    <strong>
                        {{ rightoperand.objectList.map((o) => o.lookup[2]).join(", ") }}
                    </strong>
@@ -45,9 +56,23 @@
            </div>
        </foreignObject>

-        <g v-if="!node.children.length" :transform="`translate(${x + boxWidth + 25}, ${y + boxHeight/2 - 15})`">
-            <path d="m 25.078125,11.835938 c 0,-0.332032 -0.117188,-0.664063 -0.351563,-0.898438 L 22.949219,9.1796875 c -0.234375,-0.234375 -0.546875,-0.3710937 -0.878907,-0.3710937 -0.332031,0 -0.644531,0.1367187 -0.878906,0.3710937 L 13.222656,17.128906 8.8085938,12.714844 C 8.5742188,12.480469 8.2617188,12.34375 7.9296875,12.34375 c -0.3320313,0 -0.6445313,0.136719 -0.8789063,0.371094 l -1.7773437,1.757812 c -0.234375,0.234375 -0.3515625,0.566407 -0.3515625,0.898438 0,0.332031 0.1171875,0.644531 0.3515625,0.878906 l 7.0703125,7.070312 c 0.234375,0.234375 0.566406,0.371094 0.878906,0.371094 0.332032,0 0.664063,-0.136719 0.898438,-0.371094 L 24.726562,12.714844 c 0.234375,-0.234375 0.351563,-0.546875 0.351563,-0.878906 z M 30,15 C 30,23.28125 23.28125,30 15,30 6.71875,30 0,23.28125 0,15 0,6.71875 6.71875,0 15,0 23.28125,0 30,6.71875 30,15 Z"
-                  class="check"/>
+        <g v-if="result === false" :transform="`translate(${x + boxWidth - 15}, ${y - 10})`">
+          <ellipse fill="#fff" cx="14.685823" cy="14.318233" rx="12.140151" ry="11.55523" />
+          <path d="M 15,0 C 23.28125,0 30,6.71875 30,15 30,23.28125 23.28125,30 15,30 6.71875,30 0,23.28125 0,15 0,6.71875 6.71875,0 15,0 Z m 2.5,24.35547 V 20.64453 C 17.5,20.29297 17.22656,20 16.89453,20 h -3.75 C 12.79297,20 12.5,20.29297 12.5,20.64453 v 3.71094 C 12.5,24.70703 12.79297,25 13.14453,25 h 3.75 C 17.22656,25 17.5,24.70703 17.5,24.35547 Z M 17.4609,17.63672 17.81246,5.50781 c 0,-0.13672 -0.0586,-0.27343 -0.19531,-0.35156 C 17.49996,5.05855 17.32418,5 17.1484,5 h -4.29688 c -0.17578,0 -0.35156,0.0586 -0.46875,0.15625 -0.13672,0.0781 -0.19531,0.21484 -0.19531,0.35156 l 0.33203,12.12891 c 0,0.27344 0.29297,0.48828 0.66406,0.48828 h 3.61329 c 0.35156,0 0.64453,-0.21484 0.66406,-0.48828 z"
+                class="error" />
+        </g>
+        <g v-if="result === true" :transform="`translate(${x + boxWidth - 15}, ${y - 10})`">
+          <ellipse fill="#fff" cx="14.685823" cy="14.318233" rx="12.140151" ry="11.55523" />
+          <path d="m 25.078125,11.835938 c 0,-0.332032 -0.117188,-0.664063 -0.351563,-0.898438 L 22.949219,9.1796875 c -0.234375,-0.234375 -0.546875,-0.3710937 -0.878907,-0.3710937 -0.332031,0 -0.644531,0.1367187 -0.878906,0.3710937 L 13.222656,17.128906 8.8085938,12.714844 C 8.5742188,12.480469 8.2617188,12.34375 7.9296875,12.34375 c -0.3320313,0 -0.6445313,0.136719 -0.8789063,0.371094 l -1.7773437,1.757812 c -0.234375,0.234375 -0.3515625,0.566407 -0.3515625,0.898438 0,0.332031 0.1171875,0.644531 0.3515625,0.878906 l 7.0703125,7.070312 c 0.234375,0.234375 0.566406,0.371094 0.878906,0.371094 0.332032,0 0.664063,-0.136719 0.898438,-0.371094 L 24.726562,12.714844 c 0.234375,-0.234375 0.351563,-0.546875 0.351563,-0.878906 z M 30,15 C 30,23.28125 23.28125,30 15,30 6.71875,30 0,23.28125 0,15 0,6.71875 6.71875,0 15,0 23.28125,0 30,6.71875 30,15 Z"
+                class="check"/>
+        </g>
+        <g v-if="!node.children.length && (resultInclParents === null || resultInclParents === true)" :transform="`translate(${x + boxWidth + 25}, ${y + boxHeight/2 - 15})`">
+          <path d="m 25.078125,11.835938 c 0,-0.332032 -0.117188,-0.664063 -0.351563,-0.898438 L 22.949219,9.1796875 c -0.234375,-0.234375 -0.546875,-0.3710937 -0.878907,-0.3710937 -0.332031,0 -0.644531,0.1367187 -0.878906,0.3710937 L 13.222656,17.128906 8.8085938,12.714844 C 8.5742188,12.480469 8.2617188,12.34375 7.9296875,12.34375 c -0.3320313,0 -0.6445313,0.136719 -0.8789063,0.371094 l -1.7773437,1.757812 c -0.234375,0.234375 -0.3515625,0.566407 -0.3515625,0.898438 0,0.332031 0.1171875,0.644531 0.3515625,0.878906 l 7.0703125,7.070312 c 0.234375,0.234375 0.566406,0.371094 0.878906,0.371094 0.332032,0 0.664063,-0.136719 0.898438,-0.371094 L 24.726562,12.714844 c 0.234375,-0.234375 0.351563,-0.546875 0.351563,-0.878906 z M 30,15 C 30,23.28125 23.28125,30 15,30 6.71875,30 0,23.28125 0,15 0,6.71875 6.71875,0 15,0 23.28125,0 30,6.71875 30,15 Z"
+                class="check"/>
+        </g>
+        <g v-if="!node.children.length && (resultInclParents === false)" :transform="`translate(${x + boxWidth + 25}, ${y + boxHeight/2 - 15})`">
+          <path d="M 15,0 C 23.28125,0 30,6.71875 30,15 30,23.28125 23.28125,30 15,30 6.71875,30 0,23.28125 0,15 0,6.71875 6.71875,0 15,0 Z m 2.5,24.35547 V 20.64453 C 17.5,20.29297 17.22656,20 16.89453,20 h -3.75 C 12.79297,20 12.5,20.29297 12.5,20.64453 v 3.71094 C 12.5,24.70703 12.79297,25 13.14453,25 h 3.75 C 17.22656,25 17.5,24.70703 17.5,24.35547 Z M 17.4609,17.63672 17.81246,5.50781 c 0,-0.13672 -0.0586,-0.27343 -0.19531,-0.35156 C 17.49996,5.05855 17.32418,5 17.1484,5 h -4.29688 c -0.17578,0 -0.35156,0.0586 -0.46875,0.15625 -0.13672,0.0781 -0.19531,0.21484 -0.19531,0.35156 l 0.33203,12.12891 c 0,0.27344 0.29297,0.48828 0.66406,0.48828 h 3.61329 c 0.35156,0 0.64453,-0.21484 0.66406,-0.48828 z"
+                class="error" />
        </g>
    </g>
 </template>
@@ -121,6 +146,14 @@
      vardata () {
        return this.$root.VARS[this.variable];
      },
+      varresult () {
+        const op = this.operator;
+        if (this.node.rule[op] && this.node.rule[op][0]) {
+          return this.node.rule[op][0]["__result"];
+        } else {
+          return "";
+        }
+      },
      rightoperand () {
        const op = this.operator;
        if (this.node.rule[op] && typeof this.node.rule[op][1] !== "undefined") {
@@ -136,8 +169,30 @@
        return this.node.rule[this.operator]
      },
      operator: function () {
-        return Object.keys(this.node.rule)[0];
+        return Object.keys(this.node.rule).filter(function (k) { return !k.startsWith("__") })[0];
      },
+      result: function () {
+        return typeof this.node.rule.__result == "undefined" ? null : !!this.node.rule.__result
+      },
+      resultInclParents: function () {
+        if (typeof this.node.rule.__result == "undefined")
+          return null
+
+        function _p(node) {
+          if (node.parent) {
+            return node.rule.__result && _p(node.parent)
+          }
+          return node.rule.__result
+        }
+        return _p(this.node)
+      },
+      nodeClass: function () {
+        return {
+          "node": true,
+          "node-true": this.result === true,
+          "node-false": this.result === false,
+        }
+      }
    },
    methods: {
      df (val) {
--- a/src/pretix/static/pretixcontrol/scss/_forms.scss
+++ b/src/pretix/static/pretixcontrol/scss/_forms.scss
@@ -716,6 +716,12 @@ table td > .checkbox input[type="checkbox"] {
        stroke: $brand-primary;
      }
    }
+    .node-false {
+      stroke: $brand-danger;
+    }
+    .node-true {
+      stroke: $brand-success;
+    }
    .edge {
      stroke: $gray-light;
      stroke-width: 2px;
@@ -724,6 +730,9 @@ table td > .checkbox input[type="checkbox"] {
    .check {
      fill: $brand-success;
    }
+    .error {
+      fill: $brand-danger;
+    }
    .text {
      font-size: 12px;
      width: 100%;
@@ -739,6 +748,10 @@ table td > .checkbox input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
+    opacity: 0;
+  }
+  &:hover .tools {
+    opacity: 1;
  }

  &.maximized {
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/src/pretix/static/pretixcontrol/scss/main.scss
@@ -830,6 +830,30 @@ tbody th {
    }
 }

+.nomargin-top {
+    margin-top: 0;
+}
+
+.checkin-sim-result {
+    text-align: center;
+    padding: 20px;
+    .fa {
+        color: white;
+        font-size: 50px;
+    }
+}
+.checkin-sim-result-status-ok {
+    background: $brand-success;
+}
+.checkin-sim-result-status-incomplete {
+    background: $brand-primary;
+}
+.checkin-sim-result-status-error {
+    background: $brand-danger;
+}
+.checkin-sim-result-status-error.checkin-sim-result-reason-already_redeemed {
+    background: $brand-warning;
+}

 .withoutjs {
    display: none !important;