mirror of
https://github.com/pretix/pretix.git
synced 2026-05-05 15:14:04 +00:00
migrate checkin rules editor to vue3
- move constants to a module - move reading from and writing to non-vue html to django interop module - switch to composition api and script setup sfc with pug - use optional chaining operators a lot to simplify code
This commit is contained in:
rash
@@ -3,6 +3,7 @@
|
||||
{% load bootstrap3 %}
|
||||
{% load static %}
|
||||
{% load compress %}
|
||||
{% load vite %}
|
||||
{% block title %}
|
||||
{% if checkinlist %}
|
||||
{% blocktrans with name=checkinlist.name %}Check-in list: {{ name }}{% endblocktrans %}
|
||||
@@ -74,45 +75,8 @@
|
||||
{% bootstrap_field form.ignore_in_statistics layout="control" %}
|
||||
|
||||
<h3>{% trans "Custom check-in rule" %}</h3>
|
||||
<div id="rules-editor" class="form-inline">
|
||||
<div>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active">
|
||||
<a href="#rules-edit" role="tab" data-toggle="tab">
|
||||
<span class="fa fa-edit"></span>
|
||||
{% trans "Edit" %}
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#rules-viz" role="tab" data-toggle="tab">
|
||||
<span class="fa fa-eye"></span>
|
||||
{% trans "Visualize" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="rules-edit">
|
||||
<checkin-rules-editor></checkin-rules-editor>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="rules-viz">
|
||||
<checkin-rules-visualization></checkin-rules-visualization>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="alert alert-info" v-if="missingItems.length">
|
||||
<p>
|
||||
{% trans "Your rule always filters by product or variation, but the following products or variations are not contained in any of your rule parts so people with these tickets will not get in:" %}
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="h in missingItems">{{ "{" }}{h}{{ "}" }}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans "Please double-check if this was intentional." %}
|
||||
</p>
|
||||
</div>
|
||||
<div id="rules-editor">
|
||||
<!-- Vue app mount point -->
|
||||
</div>
|
||||
<div class="disabled-withoutjs sr-only">
|
||||
{{ form.rules }}
|
||||
@@ -127,11 +91,6 @@
|
||||
</form>
|
||||
{{ items|json_script:"items" }}
|
||||
|
||||
{% if DEBUG %}
|
||||
<script type="text/javascript" src="{% static "vuejs/vue.js" %}"></script>
|
||||
{% else %}
|
||||
<script type="text/javascript" src="{% static "vuejs/vue.min.js" %}"></script>
|
||||
{% endif %}
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static "d3/d3.v6.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "d3/d3-color.v2.js" %}"></script>
|
||||
@@ -144,15 +103,6 @@
|
||||
<script type="text/javascript" src="{% static "d3/d3-drag.v2.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "d3/d3-zoom.v2.js" %}"></script>
|
||||
{% endcompress %}
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules/jsonlogic-boolalg.js" %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/datetimefield.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/timefield.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/lookup-select2.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rule.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rules-editor.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/viz-node.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue' %}"></script>
|
||||
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules.js" %}"></script>
|
||||
{% endcompress %}
|
||||
{% vite_hmr %}
|
||||
{% vite_asset "src/pretix/static/pretixcontrol/js/ui/checkinrules/" %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
{% load getitem %}
|
||||
{% load static %}
|
||||
{% load compress %}
|
||||
{% load vite %}
|
||||
{% block title %}{% trans "Check-in simulator" %}{% endblock %}
|
||||
{% block inside %}
|
||||
<h1>
|
||||
@@ -124,11 +125,9 @@
|
||||
{% endif %}
|
||||
{% if result.rule_graph %}
|
||||
<div id="rules-editor" class="form-inline">
|
||||
<div role="tabpanel" class="tab-pane" id="rules-viz">
|
||||
<checkin-rules-visualization></checkin-rules-visualization>
|
||||
</div>
|
||||
<textarea id="id_rules" class="sr-only">{{ result.rule_graph|attr_escapejson_dumps }}</textarea>
|
||||
<!-- Vue app mount point -->
|
||||
</div>
|
||||
<textarea id="id_rules" class="sr-only">{{ result.rule_graph|attr_escapejson_dumps }}</textarea>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,10 +151,6 @@
|
||||
<script type="text/javascript" src="{% static "d3/d3-drag.v2.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "d3/d3-zoom.v2.js" %}"></script>
|
||||
{% endcompress %}
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules/jsonlogic-boolalg.js" %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/viz-node.vue' %}"></script>
|
||||
<script type="text/vue" src="{% static 'pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue' %}"></script>
|
||||
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/checkinrules.js" %}"></script>
|
||||
{% endcompress %}
|
||||
{% vite_hmr %}
|
||||
{% vite_asset "src/pretix/static/pretixcontrol/js/ui/checkinrules/" %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,318 +0,0 @@
|
||||
$(function () {
|
||||
var TYPEOPS = {
|
||||
// Every change to our supported JSON logic must be done
|
||||
// * in pretix.base.services.checkin
|
||||
// * in pretix.base.models.checkin
|
||||
// * in pretix.helpers.jsonlogic_boolalg
|
||||
// * in checkinrules.js
|
||||
// * in libpretixsync
|
||||
// * in pretixscan-ios
|
||||
'product': {
|
||||
'inList': {
|
||||
'label': gettext('is one of'),
|
||||
'cardinality': 2,
|
||||
}
|
||||
},
|
||||
'variation': {
|
||||
'inList': {
|
||||
'label': gettext('is one of'),
|
||||
'cardinality': 2,
|
||||
}
|
||||
},
|
||||
'gate': {
|
||||
'inList': {
|
||||
'label': gettext('is one of'),
|
||||
'cardinality': 2,
|
||||
}
|
||||
},
|
||||
'datetime': {
|
||||
'isBefore': {
|
||||
'label': gettext('is before'),
|
||||
'cardinality': 2,
|
||||
},
|
||||
'isAfter': {
|
||||
'label': gettext('is after'),
|
||||
'cardinality': 2,
|
||||
},
|
||||
},
|
||||
'enum_entry_status': {
|
||||
'==': {
|
||||
'label': gettext('='),
|
||||
'cardinality': 2,
|
||||
},
|
||||
},
|
||||
'int_by_datetime': {
|
||||
'<': {
|
||||
'label': '<',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'<=': {
|
||||
'label': '≤',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'>': {
|
||||
'label': '>',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'>=': {
|
||||
'label': '≥',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'==': {
|
||||
'label': '=',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'!=': {
|
||||
'label': '≠',
|
||||
'cardinality': 2,
|
||||
},
|
||||
},
|
||||
'int': {
|
||||
'<': {
|
||||
'label': '<',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'<=': {
|
||||
'label': '≤',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'>': {
|
||||
'label': '>',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'>=': {
|
||||
'label': '≥',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'==': {
|
||||
'label': '=',
|
||||
'cardinality': 2,
|
||||
},
|
||||
'!=': {
|
||||
'label': '≠',
|
||||
'cardinality': 2,
|
||||
},
|
||||
},
|
||||
};
|
||||
var VARS = {
|
||||
'product': {
|
||||
'label': gettext('Product'),
|
||||
'type': 'product',
|
||||
},
|
||||
'variation': {
|
||||
'label': gettext('Product variation'),
|
||||
'type': 'variation',
|
||||
},
|
||||
'gate': {
|
||||
'label': gettext('Gate'),
|
||||
'type': 'gate',
|
||||
},
|
||||
'now': {
|
||||
'label': gettext('Current date and time'),
|
||||
'type': 'datetime',
|
||||
},
|
||||
'now_isoweekday': {
|
||||
'label': gettext('Current day of the week (1 = Monday, 7 = Sunday)'),
|
||||
'type': 'int',
|
||||
},
|
||||
'entry_status': {
|
||||
'label': gettext('Current entry status'),
|
||||
'type': 'enum_entry_status',
|
||||
},
|
||||
'entries_number': {
|
||||
'label': gettext('Number of previous entries'),
|
||||
'type': 'int',
|
||||
},
|
||||
'entries_today': {
|
||||
'label': gettext('Number of previous entries since midnight'),
|
||||
'type': 'int',
|
||||
},
|
||||
'entries_since': {
|
||||
'label': gettext('Number of previous entries since'),
|
||||
'type': 'int_by_datetime',
|
||||
},
|
||||
'entries_before': {
|
||||
'label': gettext('Number of previous entries before'),
|
||||
'type': 'int_by_datetime',
|
||||
},
|
||||
'entries_days': {
|
||||
'label': gettext('Number of days with a previous entry'),
|
||||
'type': 'int',
|
||||
},
|
||||
'entries_days_since': {
|
||||
'label': gettext('Number of days with a previous entry since'),
|
||||
'type': 'int_by_datetime',
|
||||
},
|
||||
'entries_days_before': {
|
||||
'label': gettext('Number of days with a previous entry before'),
|
||||
'type': 'int_by_datetime',
|
||||
},
|
||||
'minutes_since_last_entry': {
|
||||
'label': gettext('Minutes since last entry (-1 on first entry)'),
|
||||
'type': 'int',
|
||||
},
|
||||
'minutes_since_first_entry': {
|
||||
'label': gettext('Minutes since first entry (-1 on first entry)'),
|
||||
'type': 'int',
|
||||
},
|
||||
};
|
||||
|
||||
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: {},
|
||||
items: [],
|
||||
all_products: false,
|
||||
limit_products: [],
|
||||
TYPEOPS: TYPEOPS,
|
||||
VARS: VARS,
|
||||
texts: {
|
||||
and: gettext('All of the conditions below (AND)'),
|
||||
or: gettext('At least one of the conditions below (OR)'),
|
||||
date_from: gettext('Event start'),
|
||||
date_to: gettext('Event end'),
|
||||
date_admission: gettext('Event admission'),
|
||||
date_custom: gettext('custom date and time'),
|
||||
date_customtime: gettext('custom time'),
|
||||
date_tolerance: gettext('Tolerance (minutes)'),
|
||||
condition_add: gettext('Add condition'),
|
||||
minutes: gettext('minutes'),
|
||||
duplicate: gettext('Duplicate'),
|
||||
status_present: pgettext('entry_status', 'present'),
|
||||
status_absent: pgettext('entry_status', 'absent'),
|
||||
},
|
||||
hasRules: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
missingItems: function () {
|
||||
// This computed property contains list of item or variation names that
|
||||
// a) Are allowed on the checkin list according to all_products or include_products
|
||||
// b) Are not matched by ANY logical branch of the rule.
|
||||
// The list will be empty if there is a "catch-all" rule.
|
||||
var products_seen = {};
|
||||
var variations_seen = {};
|
||||
var rules = convert_to_dnf(this.rules);
|
||||
var branch_without_product_filter = false;
|
||||
|
||||
if (!rules["or"]) {
|
||||
rules = {"or": [rules]}
|
||||
}
|
||||
|
||||
for (var part of rules["or"]) {
|
||||
if (!part["and"]) {
|
||||
part = {"and": [part]}
|
||||
}
|
||||
var this_branch_without_product_filter = true;
|
||||
for (var subpart of part["and"]) {
|
||||
if (subpart["inList"]) {
|
||||
if (subpart["inList"][0]["var"] === "product" && subpart["inList"][1]) {
|
||||
this_branch_without_product_filter = false;
|
||||
for (var listentry of subpart["inList"][1]["objectList"]) {
|
||||
products_seen[parseInt(listentry["lookup"][1])] = true
|
||||
}
|
||||
} else if (subpart["inList"][0]["var"] === "variation" && subpart["inList"][1]) {
|
||||
this_branch_without_product_filter = false;
|
||||
for (var listentry_ of subpart["inList"][1]["objectList"]) {
|
||||
variations_seen[parseInt(listentry_["lookup"][1])] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this_branch_without_product_filter) {
|
||||
branch_without_product_filter = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (branch_without_product_filter || (!Object.keys(products_seen).length && !Object.keys(variations_seen).length)) {
|
||||
// At least one branch with no product filters at all – that's fine.
|
||||
return [];
|
||||
}
|
||||
|
||||
var missing = [];
|
||||
for (var item of this.items) {
|
||||
if (products_seen[item.id]) continue;
|
||||
if (!this.all_products && !this.limit_products.includes(item.id)) continue;
|
||||
if (item.variations.length > 0) {
|
||||
for (var variation of item.variations) {
|
||||
if (variations_seen[variation.id]) continue;
|
||||
missing.push(item.name + " – " + variation.name)
|
||||
}
|
||||
} else {
|
||||
missing.push(item.name)
|
||||
}
|
||||
}
|
||||
return missing;
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.rules = JSON.parse($("#id_rules").val());
|
||||
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()
|
||||
}
|
||||
|
||||
$("#id_all_products, input[name=limit_products]").on("change", function () {
|
||||
_update();
|
||||
})
|
||||
_update()
|
||||
|
||||
function check_for_invalid_ids(valid_products, valid_variations, rule) {
|
||||
if (rule["and"]) {
|
||||
for(const child of rule["and"])
|
||||
check_for_invalid_ids(valid_products, valid_variations, child);
|
||||
} else if (rule["or"]) {
|
||||
for(const child of rule["or"])
|
||||
check_for_invalid_ids(valid_products, valid_variations, child);
|
||||
} else if (rule["inList"] && rule["inList"][0]["var"] === "product") {
|
||||
for(const item of rule["inList"][1]["objectList"]) {
|
||||
if (!valid_products[item["lookup"][1]])
|
||||
item["lookup"][2] = "[" + gettext('Error: Product not found!') + "]";
|
||||
else
|
||||
item["lookup"][2] = valid_products[item["lookup"][1]];
|
||||
}
|
||||
} else if (rule["inList"] && rule["inList"][0]["var"] === "variation") {
|
||||
for(const item of rule["inList"][1]["objectList"]) {
|
||||
if (!valid_variations[item["lookup"][1]])
|
||||
item["lookup"][2] = "[" + gettext('Error: Variation not found!') + "]";
|
||||
else
|
||||
item["lookup"][2] = valid_variations[item["lookup"][1]];
|
||||
}
|
||||
}
|
||||
}
|
||||
check_for_invalid_ids(
|
||||
Object.fromEntries(this.items.map(p => [p.id, p.name])),
|
||||
Object.fromEntries(this.items.flatMap(p => p.variations?.map(v => [v.id, p.name + ' – ' + v.name]))),
|
||||
this.rules
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules: {
|
||||
deep: true,
|
||||
handler: function (newval) {
|
||||
$("#id_rules").val(JSON.stringify(newval));
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
});
|
||||
98
src/pretix/static/pretixcontrol/js/ui/checkinrules/App.vue
Normal file
98
src/pretix/static/pretixcontrol/js/ui/checkinrules/App.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { rules as rawRules, items, allProducts, limitProducts } from './django-interop'
|
||||
import { convertToDNF } from './jsonlogic-boolalg'
|
||||
|
||||
import RulesEditor from './checkin-rules-editor.vue'
|
||||
import RulesVisualization from './checkin-rules-visualization.vue'
|
||||
|
||||
const gettext = (window as any).gettext
|
||||
|
||||
const missingItems = computed(() => {
|
||||
// This computed variable contains list of item or variation names that
|
||||
// a) Are allowed on the checkin list according to all_products or include_products
|
||||
// b) Are not matched by ANY logical branch of the rule.
|
||||
// The list will be empty if there is a "catch-all" rule.
|
||||
let productsSeen = {}
|
||||
let variationsSeen = {}
|
||||
let rules = convertToDNF(rawRules.value)
|
||||
let branchWithoutProductFilter = false
|
||||
|
||||
if (!rules.or) {
|
||||
rules = { or: [rules] }
|
||||
}
|
||||
|
||||
for (let part of rules.or) {
|
||||
if (!part.and) {
|
||||
part = { and: [part] }
|
||||
}
|
||||
let thisBranchWithoutProductFilter = true
|
||||
for (let subpart of part.and) {
|
||||
if (subpart.inList) {
|
||||
if (subpart.inList[0].var === 'product' && subpart.inList[1]) {
|
||||
thisBranchWithoutProductFilter = false
|
||||
for (let listentry of subpart.inList[1].objectList) {
|
||||
productsSeen[parseInt(listentry.lookup[1])] = true
|
||||
}
|
||||
} else if (subpart.inList[0].var === 'variation' && subpart.inList[1]) {
|
||||
thisBranchWithoutProductFilter = false
|
||||
for (let listentry_ of subpart.inList[1].objectList) {
|
||||
variationsSeen[parseInt(listentry_.lookup[1])] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (thisBranchWithoutProductFilter) {
|
||||
branchWithoutProductFilter = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (branchWithoutProductFilter || (!Object.keys(productsSeen).length && !Object.keys(variationsSeen).length)) {
|
||||
// At least one branch with no product filters at all – that's fine.
|
||||
return []
|
||||
}
|
||||
|
||||
let missing = []
|
||||
for (const item of items.value) {
|
||||
if (productsSeen[item.id]) continue
|
||||
if (!allProducts.value && !limitProducts.value.includes(item.id)) continue
|
||||
if (item.variations.length > 0) {
|
||||
for (let variation of item.variations) {
|
||||
if (variationsSeen[variation.id]) continue
|
||||
missing.push(item.name + ' – ' + variation.name)
|
||||
}
|
||||
} else {
|
||||
missing.push(item.name)
|
||||
}
|
||||
}
|
||||
return missing
|
||||
})
|
||||
</script>
|
||||
<template lang="pug">
|
||||
#rules-editor.form-inline
|
||||
div
|
||||
ul.nav.nav-tabs(role="tablist")
|
||||
li.active(role="presentation")
|
||||
a(href="#rules-edit", role="tab", data-toggle="tab")
|
||||
span.fa.fa-edit
|
||||
| {{ gettext("Edit") }}
|
||||
li(role="presentation")
|
||||
a(href="#rules-viz", role="tab", data-toggle="tab")
|
||||
span.fa.fa-eye
|
||||
| {{ gettext("Visualize") }}
|
||||
|
||||
//- Tab panes
|
||||
.tab-content
|
||||
#rules-edit.tab-pane.active(v-if="items", role="tabpanel")
|
||||
RulesEditor
|
||||
#rules-viz.tab-pane(role="tabpanel")
|
||||
RulesVisualization
|
||||
|
||||
.alert.alert-info(v-if="missingItems.length")
|
||||
p {{ gettext("Your rule always filters by product or variation, but the following products or variations are not contained in any of your rule parts so people with these tickets will not get in:") }}
|
||||
ul
|
||||
li(v-for="h in missingItems", :key="h") {{ h }}
|
||||
p {{ gettext("Please double-check if this was intentional.") }}
|
||||
</template>
|
||||
<style lang="stylus">
|
||||
</style>
|
||||
@@ -1,355 +1,365 @@
|
||||
<template>
|
||||
<div v-bind:class="classObject">
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="checkin-rule-remove btn btn-xs btn-default" @click.prevent="duplicate"
|
||||
v-if="level > 0" data-toggle="tooltip" :title="texts.duplicate">
|
||||
<span class="fa fa-copy"></span>
|
||||
</button>
|
||||
<button type="button" class="checkin-rule-remove btn btn-xs btn-default" @click.prevent="wrapWithOR">OR
|
||||
</button>
|
||||
<button type="button" class="checkin-rule-remove btn btn-xs btn-default" @click.prevent="wrapWithAND">AND
|
||||
</button>
|
||||
<button type="button" class="checkin-rule-remove btn btn-xs btn-default" @click.prevent="cutOut"
|
||||
v-if="operands && operands.length === 1 && (operator === 'or' || operator === 'and')"><span
|
||||
class="fa fa-cut"></span></button>
|
||||
<button type="button" class="checkin-rule-remove btn btn-xs btn-default" @click.prevent="remove"
|
||||
v-if="level > 0"><span class="fa fa-trash"></span></button>
|
||||
</div>
|
||||
<select v-bind:value="variable" v-on:input="setVariable" required class="form-control">
|
||||
<option value="and">{{texts.and}}</option>
|
||||
<option value="or">{{texts.or}}</option>
|
||||
<option v-for="(v, name) in vars" :value="name">{{ v.label }}</option>
|
||||
</select>
|
||||
<select v-bind:value="operator" v-on:input="setOperator" required class="form-control"
|
||||
v-if="operator !== 'or' && operator !== 'and' && vartype !== 'int_by_datetime'">
|
||||
<option></option>
|
||||
<option v-for="(v, name) in operators" :value="name">{{ v.label }}</option>
|
||||
</select>
|
||||
<select v-bind:value="timeType" v-on:input="setTimeType" required class="form-control"
|
||||
v-if="vartype === 'datetime' || vartype === 'int_by_datetime'">
|
||||
<option value="date_from">{{texts.date_from}}</option>
|
||||
<option value="date_to">{{texts.date_to}}</option>
|
||||
<option value="date_admission">{{texts.date_admission}}</option>
|
||||
<option value="custom">{{texts.date_custom}}</option>
|
||||
<option value="customtime">{{texts.date_customtime}}</option>
|
||||
</select>
|
||||
<datetimefield v-if="(vartype === 'datetime' || vartype === 'int_by_datetime') && timeType === 'custom'" :value="timeValue"
|
||||
v-on:input="setTimeValue"></datetimefield>
|
||||
<timefield v-if="(vartype === 'datetime' || vartype === 'int_by_datetime') && timeType === 'customtime'" :value="timeValue"
|
||||
v-on:input="setTimeValue"></timefield>
|
||||
<input class="form-control" required type="number"
|
||||
v-if="vartype === 'datetime' && timeType && timeType !== 'customtime' && timeType !== 'custom'" v-bind:value="timeTolerance"
|
||||
v-on:input="setTimeTolerance" :placeholder="texts.date_tolerance">
|
||||
<select v-bind:value="operator" v-on:input="setOperator" required class="form-control"
|
||||
v-if="vartype === 'int_by_datetime'">
|
||||
<option></option>
|
||||
<option v-for="(v, name) in operators" :value="name">{{ v.label }}</option>
|
||||
</select>
|
||||
<input class="form-control" required type="number" v-if="(vartype === 'int' || vartype === 'int_by_datetime') && cardinality > 1"
|
||||
v-bind:value="rightoperand" v-on:input="setRightOperandNumber">
|
||||
<lookup-select2 required v-if="vartype === 'product' && operator === 'inList'" :multiple="true"
|
||||
:value="rightoperand" v-on:input="setRightOperandProductList"
|
||||
:url="productSelectURL"></lookup-select2>
|
||||
<lookup-select2 required v-if="vartype === 'variation' && operator === 'inList'" :multiple="true"
|
||||
:value="rightoperand" v-on:input="setRightOperandVariationList"
|
||||
:url="variationSelectURL"></lookup-select2>
|
||||
<lookup-select2 required v-if="vartype === 'gate' && operator === 'inList'" :multiple="true"
|
||||
:value="rightoperand" v-on:input="setRightOperandGateList"
|
||||
:url="gateSelectURL"></lookup-select2>
|
||||
<select required v-if="vartype === 'enum_entry_status' && operator === '=='"
|
||||
:value="rightoperand" v-on:input="setRightOperandEnum" class="form-control">
|
||||
<option value="absent">{{ texts.status_absent }}</option>
|
||||
<option value="present">{{ texts.status_present }}</option>
|
||||
</select>
|
||||
<div class="checkin-rule-childrules" v-if="operator === 'or' || operator === 'and'">
|
||||
<div v-for="(op, opi) in operands">
|
||||
<checkin-rule :rule="op" :index="opi" :level="level + 1" v-if="typeof op === 'object'"></checkin-rule>
|
||||
</div>
|
||||
<button type="button" class="checkin-rule-addchild btn btn-xs btn-default" @click.prevent="addOperand"><span
|
||||
class="fa fa-plus-circle"></span> {{ texts.condition_add }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
LookupSelect2: LookupSelect2.default,
|
||||
Datetimefield: Datetimefield.default,
|
||||
Timefield: Timefield.default,
|
||||
},
|
||||
props: {
|
||||
rule: Object,
|
||||
level: Number,
|
||||
index: Number,
|
||||
},
|
||||
computed: {
|
||||
texts: function () {
|
||||
return this.$root.texts;
|
||||
},
|
||||
variable: function () {
|
||||
var op = this.operator;
|
||||
if (op === "and" || op === "or") {
|
||||
return op;
|
||||
} else if (this.rule[op] && this.rule[op][0]) {
|
||||
if (this.rule[op][0]["entries_since"]) {
|
||||
return "entries_since";
|
||||
}
|
||||
if (this.rule[op][0]["entries_before"]) {
|
||||
return "entries_before";
|
||||
}
|
||||
if (this.rule[op][0]["entries_days_since"]) {
|
||||
return "entries_days_since";
|
||||
}
|
||||
if (this.rule[op][0]["entries_days_before"]) {
|
||||
return "entries_days_before";
|
||||
}
|
||||
return this.rule[op][0]["var"];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
rightoperand: function () {
|
||||
var op = this.operator;
|
||||
if (op === "and" || op === "or") {
|
||||
return null;
|
||||
} else if (this.rule[op] && typeof this.rule[op][1] !== "undefined") {
|
||||
return this.rule[op][1];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
operator: function () {
|
||||
return Object.keys(this.rule)[0];
|
||||
},
|
||||
operands: function () {
|
||||
return this.rule[this.operator];
|
||||
},
|
||||
classObject: function () {
|
||||
var c = {
|
||||
'checkin-rule': true
|
||||
};
|
||||
c['checkin-rule-' + this.variable] = true;
|
||||
return c;
|
||||
},
|
||||
vartype: function () {
|
||||
if (this.variable && this.$root.VARS[this.variable]) {
|
||||
return this.$root.VARS[this.variable]['type'];
|
||||
}
|
||||
},
|
||||
timeType: function () {
|
||||
if (this.vartype === 'int_by_datetime') {
|
||||
if (this.rule[this.operator][0][this.variable] && this.rule[this.operator][0][this.variable][0]['buildTime']) {
|
||||
return this.rule[this.operator][0][this.variable][0]['buildTime'][0];
|
||||
}
|
||||
} else if (this.rightoperand && this.rightoperand['buildTime']) {
|
||||
return this.rightoperand['buildTime'][0];
|
||||
}
|
||||
},
|
||||
timeTolerance: function () {
|
||||
var op = this.operator;
|
||||
if ((op === "isBefore" || op === "isAfter") && this.rule[op] && typeof this.rule[op][2] !== "undefined") {
|
||||
return this.rule[op][2];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
timeValue: function () {
|
||||
if (this.vartype === 'int_by_datetime') {
|
||||
if (this.rule[this.operator][0][this.variable][0]['buildTime']) {
|
||||
return this.rule[this.operator][0][this.variable][0]['buildTime'][1];
|
||||
}
|
||||
} else if (this.rightoperand && this.rightoperand['buildTime']) {
|
||||
return this.rightoperand['buildTime'][1];
|
||||
}
|
||||
},
|
||||
cardinality: function () {
|
||||
if (this.vartype && this.$root.TYPEOPS[this.vartype] && this.$root.TYPEOPS[this.vartype][this.operator]) {
|
||||
return this.$root.TYPEOPS[this.vartype][this.operator]['cardinality'];
|
||||
}
|
||||
},
|
||||
operators: function () {
|
||||
return this.$root.TYPEOPS[this.vartype];
|
||||
},
|
||||
productSelectURL: function () {
|
||||
return $("#product-select2").text();
|
||||
},
|
||||
variationSelectURL: function () {
|
||||
return $("#variations-select2").text();
|
||||
},
|
||||
gateSelectURL: function () {
|
||||
return $("#gates-select2").text();
|
||||
},
|
||||
vars: function () {
|
||||
return this.$root.VARS;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setVariable: function (event) {
|
||||
var current_op = Object.keys(this.rule)[0];
|
||||
var current_val = this.rule[current_op];
|
||||
<script setup lang="ts">
|
||||
/* eslint-disable vue/no-mutating-props */
|
||||
import { computed } from 'vue'
|
||||
import { TEXTS, VARS, TYPEOPS } from './constants'
|
||||
import { productSelectURL, variationSelectURL, gateSelectURL } from './django-interop'
|
||||
import LookupSelect2 from './lookup-select2.vue'
|
||||
import Datetimefield from './datetimefield.vue'
|
||||
import Timefield from './timefield.vue'
|
||||
|
||||
if (event.target.value === "and" || event.target.value === "or") {
|
||||
if (current_val[0] && current_val[0]["var"]) {
|
||||
current_val = [];
|
||||
}
|
||||
this.$set(this.rule, event.target.value, current_val);
|
||||
this.$delete(this.rule, current_op);
|
||||
} else {
|
||||
if (current_val !== "and" && current_val !== "or" && current_val[0] && this.$root.VARS[event.target.value]['type'] === this.vartype) {
|
||||
if (this.vartype === "int_by_datetime") {
|
||||
var current_data = this.rule[current_op][0][this.variable];
|
||||
var new_lhs = {};
|
||||
new_lhs[event.target.value] = JSON.parse(JSON.stringify(current_data));
|
||||
this.$set(this.rule[current_op], 0, new_lhs);
|
||||
} else {
|
||||
this.$set(this.rule[current_op][0], "var", event.target.value);
|
||||
}
|
||||
} else if (this.$root.VARS[event.target.value]['type'] === 'int_by_datetime') {
|
||||
this.$delete(this.rule, current_op);
|
||||
var o = {};
|
||||
o[event.target.value] = [{"buildTime": [null, null]}]
|
||||
this.$set(this.rule, "!!", [o]);
|
||||
} else {
|
||||
this.$delete(this.rule, current_op);
|
||||
this.$set(this.rule, "!!", [{"var": event.target.value}]);
|
||||
}
|
||||
}
|
||||
},
|
||||
setOperator: function (event) {
|
||||
var current_op = Object.keys(this.rule)[0];
|
||||
var current_val = this.rule[current_op];
|
||||
this.$delete(this.rule, current_op);
|
||||
this.$set(this.rule, event.target.value, current_val);
|
||||
},
|
||||
setRightOperandNumber: function (event) {
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(parseInt(event.target.value));
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, parseInt(event.target.value));
|
||||
}
|
||||
},
|
||||
setTimeTolerance: function (event) {
|
||||
if (this.rule[this.operator].length === 2) {
|
||||
this.rule[this.operator].push(parseInt(event.target.value));
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 2, parseInt(event.target.value));
|
||||
}
|
||||
},
|
||||
setTimeType: function (event) {
|
||||
var time = {
|
||||
"buildTime": [event.target.value]
|
||||
};
|
||||
if (this.vartype === "int_by_datetime") {
|
||||
this.$set(this.rule[this.operator][0][this.variable], 0, time);
|
||||
} else {
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(time);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, time);
|
||||
}
|
||||
if (event.target.value === "custom") {
|
||||
this.$set(this.rule[this.operator], 2, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
setTimeValue: function (val) {
|
||||
if (this.vartype === "int_by_datetime") {
|
||||
this.$set(this.rule[this.operator][0][this.variable][0]["buildTime"], 1, val);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator][1]["buildTime"], 1, val);
|
||||
}
|
||||
},
|
||||
setRightOperandProductList: function (val) {
|
||||
var products = {
|
||||
"objectList": []
|
||||
};
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
products["objectList"].push({
|
||||
"lookup": [
|
||||
"product",
|
||||
val[i].id,
|
||||
val[i].text
|
||||
]
|
||||
});
|
||||
}
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(products);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, products);
|
||||
}
|
||||
},
|
||||
setRightOperandVariationList: function (val) {
|
||||
var products = {
|
||||
"objectList": []
|
||||
};
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
products["objectList"].push({
|
||||
"lookup": [
|
||||
"variation",
|
||||
val[i].id,
|
||||
val[i].text
|
||||
]
|
||||
});
|
||||
}
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(products);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, products);
|
||||
}
|
||||
},
|
||||
setRightOperandGateList: function (val) {
|
||||
var products = {
|
||||
"objectList": []
|
||||
};
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
products["objectList"].push({
|
||||
"lookup": [
|
||||
"gate",
|
||||
val[i].id,
|
||||
val[i].text
|
||||
]
|
||||
});
|
||||
}
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(products);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, products);
|
||||
}
|
||||
},
|
||||
setRightOperandEnum: function (event) {
|
||||
if (this.rule[this.operator].length === 1) {
|
||||
this.rule[this.operator].push(event.target.value);
|
||||
} else {
|
||||
this.$set(this.rule[this.operator], 1, event.target.value);
|
||||
}
|
||||
},
|
||||
addOperand: function () {
|
||||
this.rule[this.operator].push({"": []});
|
||||
},
|
||||
wrapWithOR: function () {
|
||||
var r = JSON.parse(JSON.stringify(this.rule));
|
||||
this.$delete(this.rule, this.operator);
|
||||
this.$set(this.rule, "or", [r]);
|
||||
},
|
||||
wrapWithAND: function () {
|
||||
var r = JSON.parse(JSON.stringify(this.rule));
|
||||
this.$delete(this.rule, this.operator);
|
||||
this.$set(this.rule, "and", [r]);
|
||||
},
|
||||
cutOut: function () {
|
||||
var cop = Object.keys(this.operands[0])[0];
|
||||
var r = this.operands[0][cop];
|
||||
this.$delete(this.rule, this.operator);
|
||||
this.$set(this.rule, cop, r);
|
||||
},
|
||||
remove: function () {
|
||||
this.$parent.rule[this.$parent.operator].splice(this.index, 1);
|
||||
},
|
||||
duplicate: function () {
|
||||
var r = JSON.parse(JSON.stringify(this.rule));
|
||||
this.$parent.rule[this.$parent.operator].splice(this.index, 0, r);
|
||||
},
|
||||
}
|
||||
}
|
||||
const props = defineProps<{
|
||||
rule: any
|
||||
level: number
|
||||
index: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
remove: []
|
||||
duplicate: []
|
||||
}>()
|
||||
|
||||
const operator = computed(() => Object.keys(props.rule)[0])
|
||||
const operands = computed(() => props.rule[operator.value])
|
||||
|
||||
const variable = computed(() => {
|
||||
const op = operator.value
|
||||
if (op === 'and' || op === 'or') {
|
||||
return op
|
||||
} else if (props.rule[op]?.[0]) {
|
||||
if (props.rule[op][0]['entries_since']) return 'entries_since'
|
||||
if (props.rule[op][0]['entries_before']) return 'entries_before'
|
||||
if (props.rule[op][0]['entries_days_since']) return 'entries_days_since'
|
||||
if (props.rule[op][0]['entries_days_before']) return 'entries_days_before'
|
||||
return props.rule[op][0]['var']
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const rightoperand = computed(() => {
|
||||
const op = operator.value
|
||||
if (op === 'and' || op === 'or') return null
|
||||
return props.rule[op]?.[1] ?? null
|
||||
})
|
||||
|
||||
const classObject = computed(() => ({
|
||||
'checkin-rule': true,
|
||||
['checkin-rule-' + variable.value]: true
|
||||
}))
|
||||
|
||||
const vartype = computed(() => VARS[variable.value]?.type)
|
||||
|
||||
const timeType = computed(() => {
|
||||
if (vartype.value === 'int_by_datetime') {
|
||||
return props.rule[operator.value]?.[0]?.[variable.value]?.[0]?.buildTime?.[0]
|
||||
}
|
||||
return rightoperand.value?.buildTime?.[0]
|
||||
})
|
||||
|
||||
const timeTolerance = computed(() => {
|
||||
const op = operator.value
|
||||
if ((op === 'isBefore' || op === 'isAfter') && props.rule[op]?.[2] !== undefined) {
|
||||
return props.rule[op][2]
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const timeValue = computed(() => {
|
||||
if (vartype.value === 'int_by_datetime') {
|
||||
return props.rule[operator.value]?.[0]?.[variable.value]?.[0]?.buildTime?.[1]
|
||||
}
|
||||
return rightoperand.value?.buildTime?.[1]
|
||||
})
|
||||
|
||||
const cardinality = computed(() => TYPEOPS[vartype.value]?.[operator.value]?.cardinality)
|
||||
const operators = computed(() => TYPEOPS[vartype.value])
|
||||
|
||||
function setVariable (event: Event) {
|
||||
const target = event.target as HTMLSelectElement
|
||||
const currentOp = Object.keys(props.rule)[0]
|
||||
let currentVal = props.rule[currentOp]
|
||||
|
||||
if (target.value === 'and' || target.value === 'or') {
|
||||
if (currentVal[0]?.var) currentVal = []
|
||||
props.rule[target.value] = currentVal
|
||||
delete props.rule[currentOp]
|
||||
} else {
|
||||
if (currentVal !== 'and' && currentVal !== 'or' && currentVal[0] && VARS[target.value]?.type === vartype.value) {
|
||||
if (vartype.value === 'int_by_datetime') {
|
||||
const currentData = props.rule[currentOp][0][variable.value]
|
||||
props.rule[currentOp][0] = { [target.value]: JSON.parse(JSON.stringify(currentData)) }
|
||||
} else {
|
||||
props.rule[currentOp][0].var = target.value
|
||||
}
|
||||
} else if (VARS[target.value]?.type === 'int_by_datetime') {
|
||||
delete props.rule[currentOp]
|
||||
props.rule['!!'] = [{ [target.value]: [{ buildTime: [null, null] }] }]
|
||||
} else {
|
||||
delete props.rule[currentOp]
|
||||
props.rule['!!'] = [{ var: target.value }]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOperator (event: Event) {
|
||||
const target = event.target as HTMLSelectElement
|
||||
const currentOp = Object.keys(props.rule)[0]
|
||||
const currentVal = props.rule[currentOp]
|
||||
delete props.rule[currentOp]
|
||||
props.rule[target.value] = currentVal
|
||||
}
|
||||
|
||||
function setRightOperandNumber (event: Event) {
|
||||
const val = parseInt((event.target as HTMLInputElement).value)
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(val)
|
||||
} else {
|
||||
props.rule[operator.value][1] = val
|
||||
}
|
||||
}
|
||||
|
||||
function setTimeTolerance (event: Event) {
|
||||
const val = parseInt((event.target as HTMLInputElement).value)
|
||||
if (props.rule[operator.value].length === 2) {
|
||||
props.rule[operator.value].push(val)
|
||||
} else {
|
||||
props.rule[operator.value][2] = val
|
||||
}
|
||||
}
|
||||
|
||||
function setTimeType (event: Event) {
|
||||
const val = (event.target as HTMLSelectElement).value
|
||||
const time = { buildTime: [val] }
|
||||
if (vartype.value === 'int_by_datetime') {
|
||||
props.rule[operator.value][0][variable.value][0] = time
|
||||
} else {
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(time)
|
||||
} else {
|
||||
props.rule[operator.value][1] = time
|
||||
}
|
||||
if (val === 'custom') {
|
||||
props.rule[operator.value][2] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setTimeValue (val: string) {
|
||||
if (vartype.value === 'int_by_datetime') {
|
||||
props.rule[operator.value][0][variable.value][0]['buildTime'][1] = val
|
||||
} else {
|
||||
props.rule[operator.value][1]['buildTime'][1] = val
|
||||
}
|
||||
}
|
||||
|
||||
function setRightOperandProductList (val: { id: any; text: string }[]) {
|
||||
const products = { objectList: val.map(item => ({ lookup: ['product', item.id, item.text] })) }
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(products)
|
||||
} else {
|
||||
props.rule[operator.value][1] = products
|
||||
}
|
||||
}
|
||||
|
||||
function setRightOperandVariationList (val: { id: any; text: string }[]) {
|
||||
const products = { objectList: val.map(item => ({ lookup: ['variation', item.id, item.text] })) }
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(products)
|
||||
} else {
|
||||
props.rule[operator.value][1] = products
|
||||
}
|
||||
}
|
||||
|
||||
function setRightOperandGateList (val: { id: any; text: string }[]) {
|
||||
const products = { objectList: val.map(item => ({ lookup: ['gate', item.id, item.text] })) }
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(products)
|
||||
} else {
|
||||
props.rule[operator.value][1] = products
|
||||
}
|
||||
}
|
||||
|
||||
function setRightOperandEnum (event: Event) {
|
||||
const val = (event.target as HTMLSelectElement).value
|
||||
if (props.rule[operator.value].length === 1) {
|
||||
props.rule[operator.value].push(val)
|
||||
} else {
|
||||
props.rule[operator.value][1] = val
|
||||
}
|
||||
}
|
||||
|
||||
function addOperand () {
|
||||
props.rule[operator.value].push({ '': [] })
|
||||
}
|
||||
|
||||
function wrapWithOR () {
|
||||
const r = JSON.parse(JSON.stringify(props.rule))
|
||||
delete props.rule[operator.value]
|
||||
props.rule.or = [r]
|
||||
}
|
||||
|
||||
function wrapWithAND () {
|
||||
const r = JSON.parse(JSON.stringify(props.rule))
|
||||
delete props.rule[operator.value]
|
||||
props.rule.and = [r]
|
||||
}
|
||||
|
||||
function cutOut () {
|
||||
const cop = Object.keys(operands.value[0])[0]
|
||||
const r = operands.value[0][cop]
|
||||
delete props.rule[operator.value]
|
||||
props.rule[cop] = r
|
||||
}
|
||||
|
||||
function remove () {
|
||||
emit('remove')
|
||||
}
|
||||
|
||||
function duplicate () {
|
||||
emit('duplicate')
|
||||
}
|
||||
|
||||
function removeChild (index: number) {
|
||||
props.rule[operator.value].splice(index, 1)
|
||||
}
|
||||
|
||||
function duplicateChild (index: number) {
|
||||
const r = JSON.parse(JSON.stringify(props.rule[operator.value][index]))
|
||||
props.rule[operator.value].splice(index, 0, r)
|
||||
}
|
||||
</script>
|
||||
<template lang="pug">
|
||||
div(:class="classObject")
|
||||
.btn-group.pull-right
|
||||
button.checkin-rule-remove.btn.btn-xs.btn-default(
|
||||
v-if="level > 0",
|
||||
type="button",
|
||||
data-toggle="tooltip",
|
||||
:title="TEXTS.duplicate",
|
||||
@click.prevent="duplicate"
|
||||
)
|
||||
span.fa.fa-copy
|
||||
button.checkin-rule-remove.btn.btn-xs.btn-default(
|
||||
type="button",
|
||||
@click.prevent="wrapWithOR"
|
||||
) OR
|
||||
button.checkin-rule-remove.btn.btn-xs.btn-default(
|
||||
type="button",
|
||||
@click.prevent="wrapWithAND"
|
||||
) AND
|
||||
button.checkin-rule-remove.btn.btn-xs.btn-default(
|
||||
v-if="operands && operands.length === 1 && (operator === 'or' || operator === 'and')",
|
||||
type="button",
|
||||
@click.prevent="cutOut"
|
||||
)
|
||||
span.fa.fa-cut
|
||||
button.checkin-rule-remove.btn.btn-xs.btn-default(
|
||||
v-if="level > 0",
|
||||
type="button",
|
||||
@click.prevent="remove"
|
||||
)
|
||||
span.fa.fa-trash
|
||||
select.form-control(:value="variable", required, @input="setVariable")
|
||||
option(value="and") {{ TEXTS.and }}
|
||||
option(value="or") {{ TEXTS.or }}
|
||||
option(v-for="(v, name) in VARS", :key="name", :value="name") {{ v.label }}
|
||||
select.form-control(
|
||||
v-if="operator !== 'or' && operator !== 'and' && vartype !== 'int_by_datetime'",
|
||||
:value="operator",
|
||||
required,
|
||||
@input="setOperator"
|
||||
)
|
||||
option
|
||||
option(v-for="(v, name) in operators", :key="name", :value="name") {{ v.label }}
|
||||
select.form-control(
|
||||
v-if="vartype === 'datetime' || vartype === 'int_by_datetime'",
|
||||
:value="timeType",
|
||||
required,
|
||||
@input="setTimeType"
|
||||
)
|
||||
option(value="date_from") {{ TEXTS.date_from }}
|
||||
option(value="date_to") {{ TEXTS.date_to }}
|
||||
option(value="date_admission") {{ TEXTS.date_admission }}
|
||||
option(value="custom") {{ TEXTS.date_custom }}
|
||||
option(value="customtime") {{ TEXTS.date_customtime }}
|
||||
Datetimefield(
|
||||
v-if="(vartype === 'datetime' || vartype === 'int_by_datetime') && timeType === 'custom'",
|
||||
:value="timeValue",
|
||||
@input="setTimeValue"
|
||||
)
|
||||
Timefield(
|
||||
v-if="(vartype === 'datetime' || vartype === 'int_by_datetime') && timeType === 'customtime'",
|
||||
:value="timeValue",
|
||||
@input="setTimeValue"
|
||||
)
|
||||
input.form-control(
|
||||
v-if="vartype === 'datetime' && timeType && timeType !== 'customtime' && timeType !== 'custom'",
|
||||
required,
|
||||
type="number",
|
||||
:value="timeTolerance",
|
||||
:placeholder="TEXTS.date_tolerance",
|
||||
@input="setTimeTolerance"
|
||||
)
|
||||
select.form-control(
|
||||
v-if="vartype === 'int_by_datetime'",
|
||||
:value="operator",
|
||||
required,
|
||||
@input="setOperator"
|
||||
)
|
||||
option
|
||||
option(v-for="(v, name) in operators", :key="name", :value="name") {{ v.label }}
|
||||
input.form-control(
|
||||
v-if="(vartype === 'int' || vartype === 'int_by_datetime') && cardinality > 1",
|
||||
required,
|
||||
type="number",
|
||||
:value="rightoperand",
|
||||
@input="setRightOperandNumber"
|
||||
)
|
||||
LookupSelect2(
|
||||
v-if="vartype === 'product' && operator === 'inList'",
|
||||
required,
|
||||
:multiple="true",
|
||||
:value="rightoperand",
|
||||
:url="productSelectURL",
|
||||
@input="setRightOperandProductList"
|
||||
)
|
||||
LookupSelect2(
|
||||
v-if="vartype === 'variation' && operator === 'inList'",
|
||||
required,
|
||||
:multiple="true",
|
||||
:value="rightoperand",
|
||||
:url="variationSelectURL",
|
||||
@input="setRightOperandVariationList"
|
||||
)
|
||||
LookupSelect2(
|
||||
v-if="vartype === 'gate' && operator === 'inList'",
|
||||
required,
|
||||
:multiple="true",
|
||||
:value="rightoperand",
|
||||
:url="gateSelectURL",
|
||||
@input="setRightOperandGateList"
|
||||
)
|
||||
select.form-control(
|
||||
v-if="vartype === 'enum_entry_status' && operator === '=='",
|
||||
required,
|
||||
:value="rightoperand",
|
||||
@input="setRightOperandEnum"
|
||||
)
|
||||
option(value="absent") {{ TEXTS.status_absent }}
|
||||
option(value="present") {{ TEXTS.status_present }}
|
||||
.checkin-rule-childrules(v-if="operator === 'or' || operator === 'and'")
|
||||
div(v-for="(op, opi) in operands", :key="opi")
|
||||
CheckinRule(
|
||||
v-if="typeof op === 'object'",
|
||||
:rule="op",
|
||||
:index="opi",
|
||||
:level="level + 1",
|
||||
@remove="removeChild(opi)",
|
||||
@duplicate="duplicateChild(opi)"
|
||||
)
|
||||
button.checkin-rule-addchild.btn.btn-xs.btn-default(
|
||||
type="button",
|
||||
@click.prevent="addOperand"
|
||||
)
|
||||
span.fa.fa-plus-circle
|
||||
| {{ TEXTS.condition_add }}
|
||||
</template>
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
<template>
|
||||
<div class="checkin-rules-editor">
|
||||
<checkin-rule :rule="this.$root.rules" :level="0" :index="0" v-if="hasRules"></checkin-rule>
|
||||
<button type="button" class="checkin-rule-addchild btn btn-xs btn-default" v-if="!hasRules"
|
||||
@click.prevent="addRule"><span class="fa fa-plus-circle"></span> {{ this.$root.texts.condition_add }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
CheckinRule: CheckinRule.default,
|
||||
},
|
||||
computed: {
|
||||
hasRules: function () {
|
||||
return !!Object.keys(this.$root.rules).length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRule: function () {
|
||||
this.$set(this.$root.rules, "and", []);
|
||||
},
|
||||
},
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { TEXTS } from './constants'
|
||||
import { rules } from './django-interop'
|
||||
import CheckinRule from './checkin-rule.vue'
|
||||
|
||||
const hasRules = computed(() => !!Object.keys(rules.value).length)
|
||||
|
||||
function addRule () {
|
||||
rules.value.and = []
|
||||
}
|
||||
</script>
|
||||
<template lang="pug">
|
||||
.checkin-rules-editor
|
||||
CheckinRule(v-if="hasRules", :rule="rules", :level="0", :index="0")
|
||||
button.checkin-rule-addchild.btn.btn-xs.btn-default(
|
||||
v-if="!hasRules",
|
||||
type="button",
|
||||
@click.prevent="addRule"
|
||||
)
|
||||
span.fa.fa-plus-circle
|
||||
| {{ TEXTS.condition_add }}
|
||||
</template>
|
||||
|
||||
@@ -1,255 +1,276 @@
|
||||
<template>
|
||||
<div :class="'checkin-rules-visualization ' + (maximized ? 'maximized' : '')">
|
||||
<div class="tools">
|
||||
<button v-if="maximized" class="btn btn-default" type="button" @click.prevent="maximized = false"><span class="fa fa-window-close"></span></button>
|
||||
<button v-if="!maximized" class="btn btn-default" type="button" @click.prevent="maximized = true"><span class="fa fa-window-maximize"></span></button>
|
||||
</div>
|
||||
<svg :width="graph.columns * (boxWidth + marginX) + 2 * paddingX" :height="graph.height * (boxHeight + marginY)"
|
||||
:viewBox="viewBox" ref="svg">
|
||||
<g :transform="zoomTransform.toString()">
|
||||
<viz-node v-for="(node, nodeid) in graph.nodes_by_id" :key="nodeid" :node="node"
|
||||
:children="node.children.map(n => graph.nodes_by_id[n])" :nodeid="nodeid"
|
||||
:boxWidth="boxWidth" :boxHeight="boxHeight" :marginX="marginX" :marginY="marginY"
|
||||
:paddingX="paddingX"></viz-node>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
VizNode: VizNode.default,
|
||||
},
|
||||
computed: {
|
||||
boxWidth() {
|
||||
return 300
|
||||
},
|
||||
boxHeight() {
|
||||
return 62
|
||||
},
|
||||
paddingX() {
|
||||
return 50
|
||||
},
|
||||
marginX() {
|
||||
return 50
|
||||
},
|
||||
marginY() {
|
||||
return 20
|
||||
},
|
||||
contentWidth() {
|
||||
return this.graph.columns * (this.boxWidth + this.marginX) + 2 * this.paddingX
|
||||
},
|
||||
contentHeight() {
|
||||
return this.graph.height * (this.boxHeight + this.marginY)
|
||||
},
|
||||
viewBox() {
|
||||
return `0 0 ${this.contentWidth} ${this.contentHeight}`
|
||||
},
|
||||
graph() {
|
||||
/**
|
||||
* Converts a JSON logic rule into a "flow chart".
|
||||
*
|
||||
* A JSON logic rule has a structure like an operator tree:
|
||||
*
|
||||
* OR
|
||||
* |-- AND
|
||||
* |-- A
|
||||
* |-- B
|
||||
* |-- AND
|
||||
* |-- OR
|
||||
* |-- C
|
||||
* |-- D
|
||||
* |-- E
|
||||
*
|
||||
* For our visualization, we want to visualize that tree as a graph one can follow along to reach a
|
||||
* decision, which has the structure of a directed graph:
|
||||
*
|
||||
* --- A --- B --- OK!
|
||||
* /
|
||||
* /
|
||||
* /
|
||||
* --
|
||||
* \
|
||||
* \ --- C ---
|
||||
* \ / \
|
||||
* --- --- E --- OK!
|
||||
* \ /
|
||||
* --- D ---
|
||||
*/
|
||||
const graph = {
|
||||
nodes_by_id: {},
|
||||
children: [],
|
||||
columns: -1,
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { rules } from './django-interop'
|
||||
import VizNode from './viz-node.vue'
|
||||
|
||||
// Step 1: Start building the graph by finding all nodes and edges
|
||||
let counter = 0;
|
||||
const _add_to_graph = (rule) => { // returns [heads, tails]
|
||||
if (typeof rule !== 'object' || rule === null) {
|
||||
const node_id = (counter++).toString()
|
||||
graph.nodes_by_id[node_id] = {
|
||||
rule: rule,
|
||||
column: -1,
|
||||
children: [],
|
||||
}
|
||||
return [[node_id], [node_id]]
|
||||
}
|
||||
declare const d3: any
|
||||
|
||||
const operator = Object.keys(rule)[0]
|
||||
const operands = rule[operator]
|
||||
const svg = ref<SVGSVGElement | null>(null)
|
||||
const maximized = ref(false)
|
||||
const zoom = ref<any>(null)
|
||||
const defaultScale = ref(1)
|
||||
const zoomTransform = ref(d3.zoomTransform({ k: 1, x: 0, y: 0 }))
|
||||
|
||||
if (operator === "and") {
|
||||
let children = []
|
||||
let tails = null
|
||||
operands.reverse()
|
||||
for (let operand of operands) {
|
||||
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
|
||||
}
|
||||
children = new_children
|
||||
}
|
||||
return [children, tails]
|
||||
} else if (operator === "or") {
|
||||
const children = []
|
||||
const tails = []
|
||||
for (let operand of operands) {
|
||||
let [new_children, new_tails] = _add_to_graph(operand)
|
||||
children.push(...new_children)
|
||||
tails.push(...new_tails)
|
||||
}
|
||||
return [children, tails]
|
||||
} else {
|
||||
const node_id = (counter++).toString()
|
||||
graph.nodes_by_id[node_id] = {
|
||||
rule: rule,
|
||||
column: -1,
|
||||
children: [],
|
||||
}
|
||||
return [[node_id], [node_id]]
|
||||
}
|
||||
const boxWidth = 300
|
||||
const boxHeight = 62
|
||||
const paddingX = 50
|
||||
const marginX = 50
|
||||
const marginY = 20
|
||||
|
||||
}
|
||||
graph.children = _add_to_graph(JSON.parse(JSON.stringify(this.$root.rules)))[0]
|
||||
|
||||
// Step 2: We compute the "column" of every node, which is the maximum number of hops required to reach the
|
||||
// node from the root node
|
||||
const _set_column_to_min = (nodes, mincol) => {
|
||||
for (let node of nodes) {
|
||||
if (mincol > node.column) {
|
||||
node.column = mincol
|
||||
graph.columns = Math.max(mincol + 1, graph.columns)
|
||||
_set_column_to_min(node.children.map(nid => graph.nodes_by_id[nid]), mincol + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
_set_column_to_min(graph.children.map(nid => graph.nodes_by_id[nid]), 0)
|
||||
|
||||
// Step 3: Align each node on a grid. The x position is already given by the column computed above, but we still
|
||||
// need the y position. This part of the algorithm is opinionated and probably not yet the nicest solution we
|
||||
// can use!
|
||||
const _set_y = (node, offset) => {
|
||||
if (typeof node.y === "undefined") {
|
||||
// We only take the first value we found for each node
|
||||
node.y = offset
|
||||
}
|
||||
|
||||
let used = 0
|
||||
for (let cid of node.children) {
|
||||
used += Math.max(0, _set_y(graph.nodes_by_id[cid], offset + used) - 1)
|
||||
used++
|
||||
}
|
||||
return used
|
||||
}
|
||||
_set_y(graph, 0)
|
||||
|
||||
// Step 4: Compute the "height" of the graph by looking at the node with the highest y value
|
||||
graph.height = 1
|
||||
for (let node of [...Object.values(graph.nodes_by_id)]) {
|
||||
graph.height = Math.max(graph.height, node.y + 1)
|
||||
}
|
||||
|
||||
return graph
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createZoom()
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.createZoom)
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.createZoom)
|
||||
},
|
||||
watch: {
|
||||
maximized() {
|
||||
this.$nextTick(() => {
|
||||
this.createZoom()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createZoom() {
|
||||
if (!this.$refs.svg) return
|
||||
|
||||
const viewportHeight = this.$refs.svg.clientHeight
|
||||
const viewportWidth = this.$refs.svg.clientWidth
|
||||
this.defaultScale = 1
|
||||
|
||||
this.zoom = d3
|
||||
.zoom()
|
||||
.scaleExtent([Math.min(this.defaultScale * 0.5, 1), Math.max(5, this.contentHeight / viewportHeight, this.contentWidth / viewportWidth)])
|
||||
.extent([[0, 0], [viewportWidth, viewportHeight]])
|
||||
.filter(event => {
|
||||
const wheeled = event.type === 'wheel'
|
||||
const mouseDrag =
|
||||
event.type === 'mousedown' ||
|
||||
event.type === 'mouseup' ||
|
||||
event.type === 'mousemove'
|
||||
const touch =
|
||||
event.type === 'touchstart' ||
|
||||
event.type === 'touchmove' ||
|
||||
event.type === 'touchstop'
|
||||
return (wheeled || mouseDrag || touch) && this.maximized
|
||||
})
|
||||
.wheelDelta(event => {
|
||||
// In contrast to default implementation, do not use a factor 10 if ctrl is pressed
|
||||
return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002)
|
||||
})
|
||||
.on('zoom', (event) => {
|
||||
this.zoomTransform = event.transform
|
||||
})
|
||||
|
||||
const initTransform = d3.zoomIdentity
|
||||
.scale(this.defaultScale)
|
||||
.translate(
|
||||
0,
|
||||
0
|
||||
)
|
||||
this.zoomTransform = initTransform
|
||||
|
||||
// This sets correct d3 internal state for the initial centering
|
||||
d3.select(this.$refs.svg)
|
||||
.call(this.zoom.transform, initTransform)
|
||||
|
||||
const svg = d3.select(this.$refs.svg).call(this.zoom)
|
||||
svg.on('touchmove.zoom', null)
|
||||
// TODO touch support
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maximized: false,
|
||||
zoom: null,
|
||||
defaultScale: 1,
|
||||
zoomTransform: d3.zoomTransform({k: 1, x: 0, y: 0}),
|
||||
}
|
||||
}
|
||||
interface GraphNode {
|
||||
rule: any
|
||||
column: number
|
||||
children: string[]
|
||||
y?: number
|
||||
parent?: GraphNode
|
||||
}
|
||||
|
||||
interface Graph {
|
||||
nodes_by_id: Record<string, GraphNode>
|
||||
children: string[]
|
||||
columns: number
|
||||
height: number
|
||||
y?: number
|
||||
}
|
||||
|
||||
const graph = computed<Graph>(() => {
|
||||
/**
|
||||
* Converts a JSON logic rule into a "flow chart".
|
||||
*
|
||||
* A JSON logic rule has a structure like an operator tree:
|
||||
*
|
||||
* OR
|
||||
* |-- AND
|
||||
* |-- A
|
||||
* |-- B
|
||||
* |-- AND
|
||||
* |-- OR
|
||||
* |-- C
|
||||
* |-- D
|
||||
* |-- E
|
||||
*
|
||||
* For our visualization, we want to visualize that tree as a graph one can follow along to reach a
|
||||
* decision, which has the structure of a directed graph:
|
||||
*
|
||||
* --- A --- B --- OK!
|
||||
* /
|
||||
* /
|
||||
* /
|
||||
* --
|
||||
* \
|
||||
* \ --- C ---
|
||||
* \ / \
|
||||
* --- --- E --- OK!
|
||||
* \ /
|
||||
* --- D ---
|
||||
*/
|
||||
const graphData: Graph = {
|
||||
nodes_by_id: {},
|
||||
children: [],
|
||||
columns: -1,
|
||||
height: 1,
|
||||
}
|
||||
|
||||
// Step 1: Start building the graph by finding all nodes and edges
|
||||
let counter = 0
|
||||
const _add_to_graph = (rule: any): [string[], string[]] => { // returns [heads, tails]
|
||||
if (typeof rule !== 'object' || rule === null) {
|
||||
const node_id = (counter++).toString()
|
||||
graphData.nodes_by_id[node_id] = {
|
||||
rule: rule,
|
||||
column: -1,
|
||||
children: [],
|
||||
}
|
||||
return [[node_id], [node_id]]
|
||||
}
|
||||
|
||||
const operator = Object.keys(rule)[0]
|
||||
const operands = rule[operator]
|
||||
|
||||
if (operator === 'and') {
|
||||
let children: string[] = []
|
||||
let tails: string[] | null = null
|
||||
operands.reverse()
|
||||
for (const operand of operands) {
|
||||
const [new_children, new_tails] = _add_to_graph(operand)
|
||||
for (const new_child of new_tails) {
|
||||
graphData.nodes_by_id[new_child].children.push(...children)
|
||||
for (const c of children) {
|
||||
graphData.nodes_by_id[c].parent = graphData.nodes_by_id[new_child]
|
||||
}
|
||||
}
|
||||
if (tails === null) {
|
||||
tails = new_tails
|
||||
}
|
||||
children = new_children
|
||||
}
|
||||
return [children, tails!]
|
||||
} else if (operator === 'or') {
|
||||
const children: string[] = []
|
||||
const tails: string[] = []
|
||||
for (const operand of operands) {
|
||||
const [new_children, new_tails] = _add_to_graph(operand)
|
||||
children.push(...new_children)
|
||||
tails.push(...new_tails)
|
||||
}
|
||||
return [children, tails]
|
||||
} else {
|
||||
const node_id = (counter++).toString()
|
||||
graphData.nodes_by_id[node_id] = {
|
||||
rule: rule,
|
||||
column: -1,
|
||||
children: [],
|
||||
}
|
||||
return [[node_id], [node_id]]
|
||||
}
|
||||
}
|
||||
graphData.children = _add_to_graph(JSON.parse(JSON.stringify(rules.value)))[0]
|
||||
|
||||
// Step 2: We compute the "column" of every node, which is the maximum number of hops required to reach the
|
||||
// node from the root node
|
||||
const _set_column_to_min = (nodes: GraphNode[], mincol: number) => {
|
||||
for (const node of nodes) {
|
||||
if (mincol > node.column) {
|
||||
node.column = mincol
|
||||
graphData.columns = Math.max(mincol + 1, graphData.columns)
|
||||
_set_column_to_min(node.children.map(nid => graphData.nodes_by_id[nid]), mincol + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
_set_column_to_min(graphData.children.map(nid => graphData.nodes_by_id[nid]), 0)
|
||||
|
||||
// Step 3: Align each node on a grid. The x position is already given by the column computed above, but we still
|
||||
// need the y position. This part of the algorithm is opinionated and probably not yet the nicest solution we
|
||||
// can use!
|
||||
const _set_y = (node: Graph | GraphNode, offset: number): number => {
|
||||
if (typeof node.y === 'undefined') {
|
||||
// We only take the first value we found for each node
|
||||
node.y = offset
|
||||
}
|
||||
|
||||
let used = 0
|
||||
for (const cid of node.children) {
|
||||
used += Math.max(0, _set_y(graphData.nodes_by_id[cid], offset + used) - 1)
|
||||
used++
|
||||
}
|
||||
return used
|
||||
}
|
||||
_set_y(graphData, 0)
|
||||
|
||||
// Step 4: Compute the "height" of the graph by looking at the node with the highest y value
|
||||
graphData.height = 1
|
||||
for (const node of [...Object.values(graphData.nodes_by_id)]) {
|
||||
graphData.height = Math.max(graphData.height, (node.y ?? 0) + 1)
|
||||
}
|
||||
|
||||
return graphData
|
||||
})
|
||||
|
||||
const contentWidth = computed(() => {
|
||||
return graph.value.columns * (boxWidth + marginX) + 2 * paddingX
|
||||
})
|
||||
|
||||
const contentHeight = computed(() => {
|
||||
return graph.value.height * (boxHeight + marginY)
|
||||
})
|
||||
|
||||
const viewBox = computed(() => {
|
||||
return `0 0 ${contentWidth.value} ${contentHeight.value}`
|
||||
})
|
||||
|
||||
function createZoom () {
|
||||
if (!svg.value) return
|
||||
|
||||
const viewportHeight = svg.value.clientHeight
|
||||
const viewportWidth = svg.value.clientWidth
|
||||
defaultScale.value = 1
|
||||
|
||||
zoom.value = d3
|
||||
.zoom()
|
||||
.scaleExtent([Math.min(defaultScale.value * 0.5, 1), Math.max(5, contentHeight.value / viewportHeight, contentWidth.value / viewportWidth)])
|
||||
.extent([[0, 0], [viewportWidth, viewportHeight]])
|
||||
.filter((event: any) => {
|
||||
const wheeled = event.type === 'wheel'
|
||||
const mouseDrag
|
||||
= event.type === 'mousedown'
|
||||
|| event.type === 'mouseup'
|
||||
|| event.type === 'mousemove'
|
||||
const touch
|
||||
= event.type === 'touchstart'
|
||||
|| event.type === 'touchmove'
|
||||
|| event.type === 'touchstop'
|
||||
return (wheeled || mouseDrag || touch) && maximized.value
|
||||
})
|
||||
.wheelDelta((event: any) => {
|
||||
// In contrast to default implementation, do not use a factor 10 if ctrl is pressed
|
||||
return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002)
|
||||
})
|
||||
.on('zoom', (event: any) => {
|
||||
zoomTransform.value = event.transform
|
||||
})
|
||||
|
||||
const initTransform = d3.zoomIdentity
|
||||
.scale(defaultScale.value)
|
||||
.translate(0, 0)
|
||||
zoomTransform.value = initTransform
|
||||
|
||||
// This sets correct d3 internal state for the initial centering
|
||||
d3.select(svg.value)
|
||||
.call(zoom.value.transform, initTransform)
|
||||
|
||||
const svgSelection = d3.select(svg.value).call(zoom.value)
|
||||
svgSelection.on('touchmove.zoom', null)
|
||||
// TODO touch support
|
||||
}
|
||||
|
||||
watch(maximized, () => {
|
||||
nextTick(() => {
|
||||
createZoom()
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
createZoom()
|
||||
window.addEventListener('resize', createZoom)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', createZoom)
|
||||
})
|
||||
|
||||
</script>
|
||||
<template lang="pug">
|
||||
div(:class="'checkin-rules-visualization ' + (maximized ? 'maximized' : '')")
|
||||
.tools
|
||||
button.btn.btn-default(
|
||||
v-if="maximized",
|
||||
type="button",
|
||||
@click.prevent="maximized = false"
|
||||
)
|
||||
span.fa.fa-window-close
|
||||
button.btn.btn-default(
|
||||
v-if="!maximized",
|
||||
type="button",
|
||||
@click.prevent="maximized = true"
|
||||
)
|
||||
span.fa.fa-window-maximize
|
||||
svg(
|
||||
ref="svg",
|
||||
:width="contentWidth",
|
||||
:height="contentHeight",
|
||||
:viewBox="viewBox"
|
||||
)
|
||||
g(:transform="zoomTransform.toString()")
|
||||
VizNode(
|
||||
v-for="(node, nodeid) in graph.nodes_by_id",
|
||||
:key="nodeid",
|
||||
:node="node",
|
||||
:children="node.children.map((n: string) => graph.nodes_by_id[n])",
|
||||
:nodeid="nodeid",
|
||||
:boxWidth="boxWidth",
|
||||
:boxHeight="boxHeight",
|
||||
:marginX="marginX",
|
||||
:marginY="marginY",
|
||||
:paddingX="paddingX"
|
||||
)
|
||||
</template>
|
||||
|
||||
193
src/pretix/static/pretixcontrol/js/ui/checkinrules/constants.ts
Normal file
193
src/pretix/static/pretixcontrol/js/ui/checkinrules/constants.ts
Normal file
@@ -0,0 +1,193 @@
|
||||
/* global gettext, pgettext */
|
||||
|
||||
export const TEXTS = {
|
||||
and: gettext('All of the conditions below (AND)'),
|
||||
or: gettext('At least one of the conditions below (OR)'),
|
||||
date_from: gettext('Event start'),
|
||||
date_to: gettext('Event end'),
|
||||
date_admission: gettext('Event admission'),
|
||||
date_custom: gettext('custom date and time'),
|
||||
date_customtime: gettext('custom time'),
|
||||
date_tolerance: gettext('Tolerance (minutes)'),
|
||||
condition_add: gettext('Add condition'),
|
||||
minutes: gettext('minutes'),
|
||||
duplicate: gettext('Duplicate'),
|
||||
status_present: pgettext('entry_status', 'present'),
|
||||
status_absent: pgettext('entry_status', 'absent'),
|
||||
}
|
||||
|
||||
export const TYPEOPS = {
|
||||
// Every change to our supported JSON logic must be done
|
||||
// * in pretix.base.services.checkin
|
||||
// * in pretix.base.models.checkin
|
||||
// * in pretix.helpers.jsonlogic_boolalg
|
||||
// * in checkinrules.js
|
||||
// * in libpretixsync
|
||||
// * in pretixscan-ios
|
||||
product: {
|
||||
inList: {
|
||||
label: gettext('is one of'),
|
||||
cardinality: 2,
|
||||
}
|
||||
},
|
||||
variation: {
|
||||
inList: {
|
||||
label: gettext('is one of'),
|
||||
cardinality: 2,
|
||||
}
|
||||
},
|
||||
gate: {
|
||||
inList: {
|
||||
label: gettext('is one of'),
|
||||
cardinality: 2,
|
||||
}
|
||||
},
|
||||
datetime: {
|
||||
isBefore: {
|
||||
label: gettext('is before'),
|
||||
cardinality: 2,
|
||||
},
|
||||
isAfter: {
|
||||
label: gettext('is after'),
|
||||
cardinality: 2,
|
||||
},
|
||||
},
|
||||
enum_entry_status: {
|
||||
'==': {
|
||||
label: gettext('='),
|
||||
cardinality: 2,
|
||||
},
|
||||
},
|
||||
int_by_datetime: {
|
||||
'<': {
|
||||
label: '<',
|
||||
cardinality: 2,
|
||||
},
|
||||
'<=': {
|
||||
label: '≤',
|
||||
cardinality: 2,
|
||||
},
|
||||
'>': {
|
||||
label: '>',
|
||||
cardinality: 2,
|
||||
},
|
||||
'>=': {
|
||||
label: '≥',
|
||||
cardinality: 2,
|
||||
},
|
||||
'==': {
|
||||
label: '=',
|
||||
cardinality: 2,
|
||||
},
|
||||
'!=': {
|
||||
label: '≠',
|
||||
cardinality: 2,
|
||||
},
|
||||
},
|
||||
int: {
|
||||
'<': {
|
||||
label: '<',
|
||||
cardinality: 2,
|
||||
},
|
||||
'<=': {
|
||||
label: '≤',
|
||||
cardinality: 2,
|
||||
},
|
||||
'>': {
|
||||
label: '>',
|
||||
cardinality: 2,
|
||||
},
|
||||
'>=': {
|
||||
label: '≥',
|
||||
cardinality: 2,
|
||||
},
|
||||
'==': {
|
||||
label: '=',
|
||||
cardinality: 2,
|
||||
},
|
||||
'!=': {
|
||||
label: '≠',
|
||||
cardinality: 2,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const VARS = {
|
||||
product: {
|
||||
label: gettext('Product'),
|
||||
type: 'product',
|
||||
},
|
||||
variation: {
|
||||
label: gettext('Product variation'),
|
||||
type: 'variation',
|
||||
},
|
||||
gate: {
|
||||
label: gettext('Gate'),
|
||||
type: 'gate',
|
||||
},
|
||||
now: {
|
||||
label: gettext('Current date and time'),
|
||||
type: 'datetime',
|
||||
},
|
||||
now_isoweekday: {
|
||||
label: gettext('Current day of the week (1 = Monday, 7 = Sunday)'),
|
||||
type: 'int',
|
||||
},
|
||||
entry_status: {
|
||||
label: gettext('Current entry status'),
|
||||
type: 'enum_entry_status',
|
||||
},
|
||||
entries_number: {
|
||||
label: gettext('Number of previous entries'),
|
||||
type: 'int',
|
||||
},
|
||||
entries_today: {
|
||||
label: gettext('Number of previous entries since midnight'),
|
||||
type: 'int',
|
||||
},
|
||||
entries_since: {
|
||||
label: gettext('Number of previous entries since'),
|
||||
type: 'int_by_datetime',
|
||||
},
|
||||
entries_before: {
|
||||
label: gettext('Number of previous entries before'),
|
||||
type: 'int_by_datetime',
|
||||
},
|
||||
entries_days: {
|
||||
label: gettext('Number of days with a previous entry'),
|
||||
type: 'int',
|
||||
},
|
||||
entries_days_since: {
|
||||
label: gettext('Number of days with a previous entry since'),
|
||||
type: 'int_by_datetime',
|
||||
},
|
||||
entries_days_before: {
|
||||
label: gettext('Number of days with a previous entry before'),
|
||||
type: 'int_by_datetime',
|
||||
},
|
||||
minutes_since_last_entry: {
|
||||
label: gettext('Minutes since last entry (-1 on first entry)'),
|
||||
type: 'int',
|
||||
},
|
||||
minutes_since_first_entry: {
|
||||
label: gettext('Minutes since first entry (-1 on first entry)'),
|
||||
type: 'int',
|
||||
},
|
||||
}
|
||||
|
||||
export const DATETIME_OPTIONS = {
|
||||
format: document.body.dataset.datetimeformat,
|
||||
locale: document.body.dataset.datetimelocale,
|
||||
useCurrent: false,
|
||||
icons: {
|
||||
time: 'fa fa-clock-o',
|
||||
date: 'fa fa-calendar',
|
||||
up: 'fa fa-chevron-up',
|
||||
down: 'fa fa-chevron-down',
|
||||
previous: 'fa fa-chevron-left',
|
||||
next: 'fa fa-chevron-right',
|
||||
today: 'fa fa-screenshot',
|
||||
clear: 'fa fa-trash',
|
||||
close: 'fa fa-remove'
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,45 @@
|
||||
<template>
|
||||
<input class="form-control">
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["required", "value"],
|
||||
template: (''),
|
||||
mounted: function () {
|
||||
var vm = this;
|
||||
var multiple = this.multiple;
|
||||
$(this.$el)
|
||||
.datetimepicker(this.opts())
|
||||
.trigger("change")
|
||||
.on("dp.change", function (e) {
|
||||
vm.$emit("input", $(this).data('DateTimePicker').date().toISOString());
|
||||
});
|
||||
if (!vm.value) {
|
||||
$(this.$el).data("DateTimePicker").viewDate(moment().hour(0).minute(0).second(0).millisecond(0));
|
||||
} else {
|
||||
$(this.$el).data("DateTimePicker").date(moment(vm.value));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
opts: function () {
|
||||
return {
|
||||
format: $("body").attr("data-datetimeformat"),
|
||||
locale: $("body").attr("data-datetimelocale"),
|
||||
useCurrent: false,
|
||||
showClear: this.required,
|
||||
icons: {
|
||||
time: 'fa fa-clock-o',
|
||||
date: 'fa fa-calendar',
|
||||
up: 'fa fa-chevron-up',
|
||||
down: 'fa fa-chevron-down',
|
||||
previous: 'fa fa-chevron-left',
|
||||
next: 'fa fa-chevron-right',
|
||||
today: 'fa fa-screenshot',
|
||||
clear: 'fa fa-trash',
|
||||
close: 'fa fa-remove'
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: function (val) {
|
||||
$(this.$el).data('DateTimePicker').date(moment(val));
|
||||
},
|
||||
},
|
||||
destroyed: function () {
|
||||
$(this.$el)
|
||||
.off()
|
||||
.datetimepicker("destroy");
|
||||
}
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { DATETIME_OPTIONS } from './constants'
|
||||
|
||||
const props = defineProps<{
|
||||
required?: boolean
|
||||
value?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
input: [value: string]
|
||||
}>()
|
||||
|
||||
const input = ref<HTMLInputElement | null>(null)
|
||||
|
||||
watch(() => props.value, (val) => {
|
||||
$(input.value).data('DateTimePicker').date(moment(val))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
$(input.value)
|
||||
.datetimepicker({
|
||||
...DATETIME_OPTIONS,
|
||||
showClear: props.required,
|
||||
})
|
||||
.trigger('change')
|
||||
.on('dp.change', function (this: HTMLElement) {
|
||||
emit('input', $(this).data('DateTimePicker').date().toISOString())
|
||||
})
|
||||
if (!props.value) {
|
||||
$(input.value).data('DateTimePicker').viewDate(moment().hour(0).minute(0).second(0).millisecond(0))
|
||||
} else {
|
||||
$(input.value).data('DateTimePicker').date(moment(props.value))
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
$(input.value)
|
||||
.off()
|
||||
.datetimepicker('destroy')
|
||||
})
|
||||
</script>
|
||||
<template lang="pug">
|
||||
input.form-control(ref="input")
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export const allProducts = ref(false)
|
||||
export const limitProducts = ref<number[]>([])
|
||||
|
||||
function updateProducts () {
|
||||
allProducts.value = document.querySelector<HTMLInputElement>('#id_all_products')?.checked ?? false
|
||||
limitProducts.value = Array.from(document.querySelectorAll<HTMLInputElement>('input[name=limit_products]:checked')).map(el => parseInt(el.value))
|
||||
}
|
||||
|
||||
// listen to change events for products
|
||||
document.querySelectorAll('#id_all_products, input[name=limit_products]').forEach(el => el.addEventListener('change', updateProducts))
|
||||
updateProducts()
|
||||
|
||||
export const rules = ref<any>({})
|
||||
|
||||
// grab rules from hidden input
|
||||
const rulesInput = document.querySelector<HTMLInputElement>('#id_rules')
|
||||
if (rulesInput?.value) {
|
||||
rules.value = JSON.parse(rulesInput.value)
|
||||
}
|
||||
|
||||
// sync back to hidden input
|
||||
watch(rules, (newVal) => {
|
||||
if (!rulesInput) return
|
||||
rulesInput.value = JSON.stringify(newVal)
|
||||
}, { deep: true })
|
||||
|
||||
export const items = ref<any[]>([])
|
||||
|
||||
const itemsEl = document.querySelector('#items')
|
||||
if (itemsEl?.textContent) {
|
||||
items.value = JSON.parse(itemsEl.textContent || '[]')
|
||||
|
||||
function checkForInvalidIds (validProducts: Record<string, string>, validVariations: Record<string, string>, rule: any) {
|
||||
if (rule['and']) {
|
||||
for (const child of rule['and'])
|
||||
checkForInvalidIds(validProducts, validVariations, child)
|
||||
} else if (rule['or']) {
|
||||
for (const child of rule['or'])
|
||||
checkForInvalidIds(validProducts, validVariations, child)
|
||||
} else if (rule['inList'] && rule['inList'][0]['var'] === 'product') {
|
||||
for (const item of rule['inList'][1]['objectList']) {
|
||||
if (!validProducts[item['lookup'][1]])
|
||||
item['lookup'][2] = '[' + gettext('Error: Product not found!') + ']'
|
||||
else
|
||||
item['lookup'][2] = validProducts[item['lookup'][1]]
|
||||
}
|
||||
} else if (rule['inList'] && rule['inList'][0]['var'] === 'variation') {
|
||||
for (const item of rule['inList'][1]['objectList']) {
|
||||
if (!validVariations[item['lookup'][1]])
|
||||
item['lookup'][2] = '[' + gettext('Error: Variation not found!') + ']'
|
||||
else
|
||||
item['lookup'][2] = validVariations[item['lookup'][1]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkForInvalidIds(
|
||||
Object.fromEntries(items.value.map(p => [p.id, p.name])),
|
||||
Object.fromEntries(items.value.flatMap(p => p.variations?.map(v => [v.id, p.name + ' – ' + v.name]) ?? [])),
|
||||
rules.value
|
||||
)
|
||||
}
|
||||
|
||||
export const productSelectURL = ref(document.querySelector('#product-select2')?.textContent)
|
||||
export const variationSelectURL = ref(document.querySelector('#variations-select2')?.textContent)
|
||||
export const gateSelectURL = ref(document.querySelector('#gate-select2')?.textContent)
|
||||
12
src/pretix/static/pretixcontrol/js/ui/checkinrules/index.ts
Normal file
12
src/pretix/static/pretixcontrol/js/ui/checkinrules/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.mount('#rules-editor')
|
||||
|
||||
app.config.errorHandler = (error, _vm, info) => {
|
||||
// vue fatals on errors by default, which is a weird choice
|
||||
// https://github.com/vuejs/core/issues/3525
|
||||
// https://github.com/vuejs/router/discussions/2435
|
||||
console.error('[VUE]', info, error)
|
||||
}
|
||||
@@ -1,93 +1,93 @@
|
||||
function convert_to_dnf(rules) {
|
||||
// Converts a set of rules to disjunctive normal form, i.e. returns something of the form
|
||||
// `(a AND b AND c) OR (a AND d AND f)`
|
||||
// without further nesting.
|
||||
if (typeof rules !== "object" || Array.isArray(rules) || rules === null) {
|
||||
return rules
|
||||
}
|
||||
export function convertToDNF (rules) {
|
||||
// Converts a set of rules to disjunctive normal form, i.e. returns something of the form
|
||||
// `(a AND b AND c) OR (a AND d AND f)`
|
||||
// without further nesting.
|
||||
if (typeof rules !== 'object' || Array.isArray(rules) || rules === null) {
|
||||
return rules
|
||||
}
|
||||
|
||||
function _distribute_or_over_and(r) {
|
||||
var operator = Object.keys(r)[0]
|
||||
var values = r[operator]
|
||||
if (operator === "and") {
|
||||
var arg_to_distribute = null
|
||||
var other_args = []
|
||||
for (var arg of values) {
|
||||
if (typeof arg === "object" && !Array.isArray(arg) && typeof arg["or"] !== "undefined" && arg_to_distribute === null) {
|
||||
arg_to_distribute = arg
|
||||
} else {
|
||||
other_args.push(arg)
|
||||
}
|
||||
}
|
||||
if (arg_to_distribute === null) {
|
||||
return r
|
||||
}
|
||||
var or_operands = []
|
||||
for (var dval of arg_to_distribute["or"]) {
|
||||
or_operands.push({"and": other_args.concat([dval])})
|
||||
}
|
||||
return {
|
||||
"or": or_operands
|
||||
}
|
||||
} else if (!operator) {
|
||||
return r
|
||||
} else if (operator === "!" || operator === "!!" || operator === "?:" || operator === "if") {
|
||||
console.warn("Operator " + operator + " currently unsupported by convert_to_dnf")
|
||||
return r
|
||||
} else {
|
||||
return r
|
||||
}
|
||||
}
|
||||
function _distribute_or_over_and (r) {
|
||||
let operator = Object.keys(r)[0]
|
||||
let values = r[operator]
|
||||
if (operator === 'and') {
|
||||
let arg_to_distribute = null
|
||||
let other_args = []
|
||||
for (let arg of values) {
|
||||
if (typeof arg === 'object' && !Array.isArray(arg) && typeof arg['or'] !== 'undefined' && arg_to_distribute === null) {
|
||||
arg_to_distribute = arg
|
||||
} else {
|
||||
other_args.push(arg)
|
||||
}
|
||||
}
|
||||
if (arg_to_distribute === null) {
|
||||
return r
|
||||
}
|
||||
let or_operands = []
|
||||
for (let dval of arg_to_distribute['or']) {
|
||||
or_operands.push({ and: other_args.concat([dval]) })
|
||||
}
|
||||
return {
|
||||
or: or_operands
|
||||
}
|
||||
} else if (!operator) {
|
||||
return r
|
||||
} else if (operator === '!' || operator === '!!' || operator === '?:' || operator === 'if') {
|
||||
console.warn('Operator ' + operator + ' currently unsupported by convert_to_dnf')
|
||||
return r
|
||||
} else {
|
||||
return r
|
||||
}
|
||||
}
|
||||
|
||||
function _simplify_chained_operators(r) {
|
||||
// Simplify `(a OR b) OR (c or d)` to `a OR b OR c OR d` and the same with `AND`
|
||||
if (typeof r !== "object" || Array.isArray(r)) {
|
||||
return r
|
||||
}
|
||||
var operator = Object.keys(r)[0]
|
||||
var values = r[operator]
|
||||
if (operator !== "or" && operator !== "and") {
|
||||
return r
|
||||
}
|
||||
var new_values = []
|
||||
for (var v of values) {
|
||||
if (typeof v !== "object" || Array.isArray(v) || typeof v[operator] === "undefined") {
|
||||
new_values.push(v)
|
||||
} else {
|
||||
new_values.push(...v[operator])
|
||||
}
|
||||
}
|
||||
var result = {}
|
||||
result[operator] = new_values
|
||||
return result
|
||||
}
|
||||
function _simplify_chained_operators (r) {
|
||||
// Simplify `(a OR b) OR (c or d)` to `a OR b OR c OR d` and the same with `AND`
|
||||
if (typeof r !== 'object' || Array.isArray(r)) {
|
||||
return r
|
||||
}
|
||||
let operator = Object.keys(r)[0]
|
||||
let values = r[operator]
|
||||
if (operator !== 'or' && operator !== 'and') {
|
||||
return r
|
||||
}
|
||||
let new_values = []
|
||||
for (let v of values) {
|
||||
if (typeof v !== 'object' || Array.isArray(v) || typeof v[operator] === 'undefined') {
|
||||
new_values.push(v)
|
||||
} else {
|
||||
new_values.push(...v[operator])
|
||||
}
|
||||
}
|
||||
let result = {}
|
||||
result[operator] = new_values
|
||||
return result
|
||||
}
|
||||
|
||||
// Run _distribute_or_over_and on until it no longer changes anything. Do so recursively
|
||||
// for the full expression tree.
|
||||
var old_rules = rules
|
||||
while (true) {
|
||||
rules = _distribute_or_over_and(rules)
|
||||
var operator = Object.keys(rules)[0]
|
||||
var values = rules[operator]
|
||||
var no_list = false
|
||||
if (!Array.isArray(values)) {
|
||||
values = [values]
|
||||
no_list = true
|
||||
}
|
||||
rules = {}
|
||||
if (!no_list) {
|
||||
rules[operator] = []
|
||||
for (var v of values) {
|
||||
rules[operator].push(convert_to_dnf(v))
|
||||
}
|
||||
} else {
|
||||
rules[operator] = convert_to_dnf(values[0])
|
||||
}
|
||||
if (JSON.stringify(old_rules) === JSON.stringify(rules)) { // Let's hope this is good enough...
|
||||
break
|
||||
}
|
||||
old_rules = rules
|
||||
}
|
||||
rules = _simplify_chained_operators(rules)
|
||||
return rules
|
||||
}
|
||||
// Run _distribute_or_over_and on until it no longer changes anything. Do so recursively
|
||||
// for the full expression tree.
|
||||
let old_rules = rules
|
||||
while (true) {
|
||||
rules = _distribute_or_over_and(rules)
|
||||
let operator = Object.keys(rules)[0]
|
||||
let values = rules[operator]
|
||||
let no_list = false
|
||||
if (!Array.isArray(values)) {
|
||||
values = [values]
|
||||
no_list = true
|
||||
}
|
||||
rules = {}
|
||||
if (!no_list) {
|
||||
rules[operator] = []
|
||||
for (let v of values) {
|
||||
rules[operator].push(convertToDNF(v))
|
||||
}
|
||||
} else {
|
||||
rules[operator] = convertToDNF(values[0])
|
||||
}
|
||||
if (JSON.stringify(old_rules) === JSON.stringify(rules)) { // Let's hope this is good enough...
|
||||
break
|
||||
}
|
||||
old_rules = rules
|
||||
}
|
||||
rules = _simplify_chained_operators(rules)
|
||||
return rules
|
||||
}
|
||||
|
||||
@@ -1,97 +1,116 @@
|
||||
<template>
|
||||
<select>
|
||||
<slot></slot>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["required", "value", "placeholder", "url", "multiple"],
|
||||
template: ('<select>\n' +
|
||||
' <slot></slot>\n' +
|
||||
' </select>'),
|
||||
mounted: function () {
|
||||
this.build();
|
||||
},
|
||||
methods: {
|
||||
build: function () {
|
||||
var vm = this;
|
||||
var multiple = this.multiple;
|
||||
$(this.$el)
|
||||
.empty()
|
||||
.select2(this.opts())
|
||||
.val(this.value || "")
|
||||
.trigger("change")
|
||||
// emit event on change.
|
||||
.on("change", function (e) {
|
||||
vm.$emit("input", $(this).select2('data'));
|
||||
});
|
||||
if (vm.value) {
|
||||
for (var i = 0; i < vm.value["objectList"].length; i++) {
|
||||
var option = new Option(vm.value["objectList"][i]["lookup"][2], vm.value["objectList"][i]["lookup"][1], true, true);
|
||||
$(vm.$el).append(option);
|
||||
}
|
||||
}
|
||||
$(vm.$el).trigger("change");
|
||||
},
|
||||
opts: function () {
|
||||
return {
|
||||
theme: "bootstrap",
|
||||
delay: 100,
|
||||
width: '100%',
|
||||
multiple: true,
|
||||
allowClear: this.required,
|
||||
language: $("body").attr("data-select2-locale"),
|
||||
ajax: {
|
||||
url: this.url,
|
||||
data: function (params) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page || 1
|
||||
}
|
||||
}
|
||||
},
|
||||
templateResult: function (res) {
|
||||
if (!res.id) {
|
||||
return res.text;
|
||||
}
|
||||
var $ret = $("<span>").append(
|
||||
$("<span>").addClass("primary").append($("<div>").text(res.text).html())
|
||||
);
|
||||
return $ret;
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
placeholder: function (val) {
|
||||
$(this.$el).select2("destroy");
|
||||
this.build();
|
||||
},
|
||||
required: function (val) {
|
||||
$(this.$el).select2("destroy");
|
||||
this.build();
|
||||
},
|
||||
url: function (val) {
|
||||
$(this.$el).select2("destroy");
|
||||
this.build();
|
||||
},
|
||||
value: function (newval, oldval) {
|
||||
if (JSON.stringify(newval) !== JSON.stringify(oldval)) {
|
||||
$(this.$el).empty();
|
||||
if (newval) {
|
||||
for (var i = 0; i < newval["objectList"].length; i++) {
|
||||
var option = new Option(newval["objectList"][i]["lookup"][2], newval["objectList"][i]["lookup"][1], true, true);
|
||||
$(this.$el).append(option);
|
||||
}
|
||||
}
|
||||
$(this.$el).trigger("change");
|
||||
}
|
||||
},
|
||||
},
|
||||
destroyed: function () {
|
||||
$(this.$el)
|
||||
.off()
|
||||
.select2("destroy");
|
||||
}
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
declare const $: any
|
||||
|
||||
export interface ObjectListItem {
|
||||
lookup: [string, number | string, string]
|
||||
}
|
||||
|
||||
export interface ObjectList {
|
||||
objectList: ObjectListItem[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
required?: boolean
|
||||
value?: ObjectList
|
||||
placeholder?: string
|
||||
url?: string
|
||||
multiple?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
input: [value: any[]]
|
||||
}>()
|
||||
|
||||
const select = ref<HTMLSelectElement | null>(null)
|
||||
|
||||
function opts () {
|
||||
return {
|
||||
theme: 'bootstrap',
|
||||
delay: 100,
|
||||
width: '100%',
|
||||
multiple: true,
|
||||
allowClear: props.required,
|
||||
language: $('body').attr('data-select2-locale'),
|
||||
ajax: {
|
||||
url: props.url,
|
||||
data: function (params: { term: string; page?: number }) {
|
||||
return {
|
||||
query: params.term,
|
||||
page: params.page || 1
|
||||
}
|
||||
}
|
||||
},
|
||||
templateResult: function (res: { id?: string; text: string }) {
|
||||
if (!res.id) {
|
||||
return res.text
|
||||
}
|
||||
const $ret = $('<span>').append(
|
||||
$('<span>').addClass('primary').append($('<div>').text(res.text).html())
|
||||
)
|
||||
return $ret
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function build () {
|
||||
$(select.value)
|
||||
.empty()
|
||||
.select2(opts())
|
||||
.val(props.value || '')
|
||||
.trigger('change')
|
||||
.on('change', function (this: HTMLElement) {
|
||||
emit('input', $(this).select2('data'))
|
||||
})
|
||||
if (props.value) {
|
||||
for (let i = 0; i < props.value.objectList.length; i++) {
|
||||
const option = new Option(props.value.objectList[i].lookup[2], String(props.value.objectList[i].lookup[1]), true, true)
|
||||
$(select.value).append(option)
|
||||
}
|
||||
}
|
||||
$(select.value).trigger('change')
|
||||
}
|
||||
|
||||
watch(() => props.placeholder, () => {
|
||||
$(select.value).select2('destroy')
|
||||
build()
|
||||
})
|
||||
|
||||
watch(() => props.required, () => {
|
||||
$(select.value).select2('destroy')
|
||||
build()
|
||||
})
|
||||
|
||||
watch(() => props.url, () => {
|
||||
$(select.value).select2('destroy')
|
||||
build()
|
||||
})
|
||||
|
||||
watch(() => props.value, (newval, oldval) => {
|
||||
if (JSON.stringify(newval) !== JSON.stringify(oldval)) {
|
||||
$(select.value).empty()
|
||||
if (newval) {
|
||||
for (let i = 0; i < newval.objectList.length; i++) {
|
||||
const option = new Option(newval.objectList[i].lookup[2], String(newval.objectList[i].lookup[1]), true, true)
|
||||
$(select.value).append(option)
|
||||
}
|
||||
}
|
||||
$(select.value).trigger('change')
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
build()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
$(select.value)
|
||||
.off()
|
||||
.select2('destroy')
|
||||
})
|
||||
</script>
|
||||
<template lang="pug">
|
||||
select(ref="select")
|
||||
slot
|
||||
</template>
|
||||
|
||||
@@ -1,55 +1,45 @@
|
||||
<template>
|
||||
<input class="form-control">
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["required", "value"],
|
||||
template: (''),
|
||||
mounted: function () {
|
||||
var vm = this;
|
||||
var multiple = this.multiple;
|
||||
$(this.$el)
|
||||
.datetimepicker(this.opts())
|
||||
.trigger("change")
|
||||
.on("dp.change", function (e) {
|
||||
vm.$emit("input", $(this).data('DateTimePicker').date().format("HH:mm:ss"));
|
||||
});
|
||||
if (!vm.value) {
|
||||
$(this.$el).data("DateTimePicker").viewDate(moment().hour(0).minute(0).second(0).millisecond(0));
|
||||
} else {
|
||||
$(this.$el).data("DateTimePicker").date(vm.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
opts: function () {
|
||||
return {
|
||||
format: $("body").attr("data-timeformat"),
|
||||
locale: $("body").attr("data-datetimelocale"),
|
||||
useCurrent: false,
|
||||
showClear: this.required,
|
||||
icons: {
|
||||
time: 'fa fa-clock-o',
|
||||
date: 'fa fa-calendar',
|
||||
up: 'fa fa-chevron-up',
|
||||
down: 'fa fa-chevron-down',
|
||||
previous: 'fa fa-chevron-left',
|
||||
next: 'fa fa-chevron-right',
|
||||
today: 'fa fa-screenshot',
|
||||
clear: 'fa fa-trash',
|
||||
close: 'fa fa-remove'
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: function (val) {
|
||||
$(this.$el).data('DateTimePicker').date(val);
|
||||
},
|
||||
},
|
||||
destroyed: function () {
|
||||
$(this.$el)
|
||||
.off()
|
||||
.datetimepicker("destroy");
|
||||
}
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { DATETIME_OPTIONS } from './constants'
|
||||
|
||||
const props = defineProps<{
|
||||
required?: boolean
|
||||
value?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
input: [value: string]
|
||||
}>()
|
||||
|
||||
const input = ref<HTMLInputElement | null>(null)
|
||||
|
||||
watch(() => props.value, (val) => {
|
||||
$(input.value).data('DateTimePicker').date(val)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
$(input.value)
|
||||
.datetimepicker({
|
||||
...DATETIME_OPTIONS,
|
||||
showClear: props.required,
|
||||
})
|
||||
.trigger('change')
|
||||
.on('dp.change', function (this: HTMLElement) {
|
||||
emit('input', $(this).data('DateTimePicker').date().format('HH:mm:ss'))
|
||||
})
|
||||
if (!props.value) {
|
||||
$(input.value).data('DateTimePicker').viewDate(moment().hour(0).minute(0).second(0).millisecond(0))
|
||||
} else {
|
||||
$(input.value).data('DateTimePicker').date(props.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
$(input.value)
|
||||
.off()
|
||||
.datetimepicker('destroy')
|
||||
})
|
||||
</script>
|
||||
<template lang="pug">
|
||||
input.form-control(ref="input")
|
||||
</template>
|
||||
|
||||
@@ -1,255 +1,242 @@
|
||||
<template>
|
||||
<g>
|
||||
<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="nodeClass" rx="5">
|
||||
</rect>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { TEXTS, VARS, TYPEOPS } from './constants'
|
||||
|
||||
<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 }}
|
||||
</strong>
|
||||
</span>
|
||||
<span v-else-if="vardata && vardata.type === 'int_by_datetime'">
|
||||
<span v-if="variable.startsWith('entries_')" class="fa fa-sign-in"></span>
|
||||
{{ vardata.label }}
|
||||
<span v-if="node.rule[operator][0][variable][0].buildTime[0] === 'custom'">
|
||||
{{ df(node.rule[operator][0][variable][0].buildTime[1]) }}
|
||||
</span>
|
||||
<span v-else-if="node.rule[operator][0][variable][0].buildTime[0] === 'customtime'">
|
||||
{{ tf(node.rule[operator][0][variable][0].buildTime[1]) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ this.$root.texts[node.rule[operator][0][variable][0].buildTime[0]] }}
|
||||
</span>
|
||||
<br>
|
||||
<span v-if="varresult !== null">
|
||||
{{varresult}}
|
||||
</span>
|
||||
<strong>
|
||||
{{ 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'">
|
||||
{{ df(rightoperand.buildTime[1]) }}
|
||||
</span>
|
||||
<span v-else-if="rightoperand.buildTime[0] === 'customtime'">
|
||||
{{ tf(rightoperand.buildTime[1]) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ this.$root.texts[rightoperand.buildTime[0]] }}
|
||||
</span>
|
||||
<span v-if="operands[2]">
|
||||
<span v-if="operator === 'isBefore'">+</span>
|
||||
<span v-else>-</span>
|
||||
{{ operands[2] }}
|
||||
{{ this.$root.texts.minutes }}
|
||||
</span>
|
||||
</strong>
|
||||
</span>
|
||||
<span v-else-if="vardata && operator === 'inList'">
|
||||
<span class="fa fa-sign-in" v-if="variable === 'gate'"></span>
|
||||
<span class="fa fa-ticket" v-else></span>
|
||||
{{ vardata.label }}
|
||||
<span v-if="varresult !== null">
|
||||
({{varresult}})
|
||||
</span>
|
||||
<br>
|
||||
<strong>
|
||||
{{ rightoperand.objectList.map((o) => o.lookup[2]).join(", ") }}
|
||||
</strong>
|
||||
</span>
|
||||
<span v-else-if="vardata && vardata.type === 'enum_entry_status'">
|
||||
<span class="fa fa-check-circle-o"></span>
|
||||
{{ vardata.label }}
|
||||
<span v-if="varresult !== null">
|
||||
({{varresult}})
|
||||
</span>
|
||||
<br>
|
||||
<strong>
|
||||
{{ op.label }} {{ rightoperand }}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</foreignObject>
|
||||
declare const $: any
|
||||
declare const moment: any
|
||||
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
interface GraphNode {
|
||||
rule: any
|
||||
column: number
|
||||
children: string[]
|
||||
y: number
|
||||
parent?: GraphNode
|
||||
}
|
||||
|
||||
props: {
|
||||
node: Object,
|
||||
nodeid: String,
|
||||
children: Array,
|
||||
boxWidth: Number,
|
||||
boxHeight: Number,
|
||||
marginX: Number,
|
||||
marginY: Number,
|
||||
paddingX: Number,
|
||||
},
|
||||
computed: {
|
||||
x() {
|
||||
return this.node.column * (this.boxWidth + this.marginX) + this.marginX / 2 + this.paddingX
|
||||
},
|
||||
y() {
|
||||
return this.node.y * (this.boxHeight + this.marginY) + this.marginY / 2
|
||||
},
|
||||
edges() {
|
||||
const startX = this.x + this.boxWidth + 1
|
||||
const startY = this.y + this.boxHeight / 2
|
||||
return this.children.map((c) => {
|
||||
const endX = (c.column * (this.boxWidth + this.marginX) + this.marginX / 2 + this.paddingX) - 1
|
||||
const endY = (c.y * (this.boxHeight + this.marginY) + this.marginY / 2) + this.boxHeight / 2
|
||||
const props = defineProps<{
|
||||
node: GraphNode
|
||||
nodeid: string
|
||||
children: GraphNode[]
|
||||
boxWidth: number
|
||||
boxHeight: number
|
||||
marginX: number
|
||||
marginY: number
|
||||
paddingX: number
|
||||
}>()
|
||||
|
||||
return `
|
||||
const x = computed(() => {
|
||||
return props.node.column * (props.boxWidth + props.marginX) + props.marginX / 2 + props.paddingX
|
||||
})
|
||||
|
||||
const y = computed(() => {
|
||||
return props.node.y * (props.boxHeight + props.marginY) + props.marginY / 2
|
||||
})
|
||||
|
||||
const edges = computed(() => {
|
||||
const startX = x.value + props.boxWidth + 1
|
||||
const startY = y.value + props.boxHeight / 2
|
||||
return props.children.map((c) => {
|
||||
const endX = (c.column * (props.boxWidth + props.marginX) + props.marginX / 2 + props.paddingX) - 1
|
||||
const endY = (c.y * (props.boxHeight + props.marginY) + props.marginY / 2) + props.boxHeight / 2
|
||||
|
||||
return `
|
||||
M ${startX} ${startY}
|
||||
L ${endX - 50} ${startY}
|
||||
C ${endX - 25} ${startY} ${endX - 25} ${startY} ${endX - 25} ${startY + 25 * Math.sign(endY - startY)}
|
||||
L ${endX - 25} ${endY - 25 * Math.sign(endY - startY)}
|
||||
C ${endX - 25} ${endY} ${endX - 25} ${endY} ${endX} ${endY}
|
||||
`
|
||||
})
|
||||
},
|
||||
checkEdge() {
|
||||
const startX = this.x + this.boxWidth + 1
|
||||
const startY = this.y + this.boxHeight / 2
|
||||
})
|
||||
})
|
||||
|
||||
return `M ${startX} ${startY} L ${startX + 25} ${startY}`
|
||||
},
|
||||
rootEdge() {
|
||||
if (this.node.column > 0) {
|
||||
return
|
||||
}
|
||||
const startX = 0
|
||||
const startY = this.boxHeight / 2 + this.marginY / 2
|
||||
const endX = this.x - 1
|
||||
const endY = this.y + this.boxHeight / 2
|
||||
const checkEdge = computed(() => {
|
||||
const startX = x.value + props.boxWidth + 1
|
||||
const startY = y.value + props.boxHeight / 2
|
||||
|
||||
return `
|
||||
return `M ${startX} ${startY} L ${startX + 25} ${startY}`
|
||||
})
|
||||
|
||||
const rootEdge = computed(() => {
|
||||
if (props.node.column > 0) {
|
||||
return
|
||||
}
|
||||
const startX = 0
|
||||
const startY = props.boxHeight / 2 + props.marginY / 2
|
||||
const endX = x.value - 1
|
||||
const endY = y.value + props.boxHeight / 2
|
||||
|
||||
return `
|
||||
M ${startX} ${startY}
|
||||
L ${endX - 50} ${startY}
|
||||
C ${endX - 25} ${startY} ${endX - 25} ${startY} ${endX - 25} ${startY + 25 * Math.sign(endY - startY)}
|
||||
L ${endX - 25} ${endY - 25 * Math.sign(endY - startY)}
|
||||
C ${endX - 25} ${endY} ${endX - 25} ${endY} ${endX} ${endY}
|
||||
`
|
||||
},
|
||||
variable () {
|
||||
const op = this.operator;
|
||||
if (this.node.rule[op] && this.node.rule[op][0]) {
|
||||
if (this.node.rule[op][0]["entries_since"]) {
|
||||
return "entries_since";
|
||||
}
|
||||
if (this.node.rule[op][0]["entries_before"]) {
|
||||
return "entries_before";
|
||||
}
|
||||
if (this.node.rule[op][0]["entries_days_since"]) {
|
||||
return "entries_days_since";
|
||||
}
|
||||
if (this.node.rule[op][0]["entries_days_before"]) {
|
||||
return "entries_days_before";
|
||||
}
|
||||
return this.node.rule[op][0]["var"];
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
vardata () {
|
||||
return this.$root.VARS[this.variable];
|
||||
},
|
||||
varresult () {
|
||||
const op = this.operator;
|
||||
if (this.node.rule[op] && this.node.rule[op][0]) {
|
||||
if (typeof this.node.rule[op][0]["__result"] === "undefined")
|
||||
return null;
|
||||
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") {
|
||||
return this.node.rule[op][1];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
op: function () {
|
||||
return this.$root.TYPEOPS[this.vardata.type][this.operator]
|
||||
},
|
||||
operands: function () {
|
||||
return this.node.rule[this.operator]
|
||||
},
|
||||
operator: function () {
|
||||
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) {
|
||||
const format = $("body").attr("data-datetimeformat")
|
||||
return moment(val).format(format)
|
||||
},
|
||||
tf (val) {
|
||||
const format = $("body").attr("data-timeformat")
|
||||
return moment(val, "HH:mm:ss").format(format)
|
||||
}
|
||||
},
|
||||
}
|
||||
const operator = computed(() => {
|
||||
return Object.keys(props.node.rule).filter((k) => !k.startsWith('__'))[0]
|
||||
})
|
||||
|
||||
const variable = computed(() => {
|
||||
const op = operator.value
|
||||
if (props.node.rule[op] && props.node.rule[op][0]) {
|
||||
if (props.node.rule[op][0]['entries_since']) {
|
||||
return 'entries_since'
|
||||
}
|
||||
if (props.node.rule[op][0]['entries_before']) {
|
||||
return 'entries_before'
|
||||
}
|
||||
if (props.node.rule[op][0]['entries_days_since']) {
|
||||
return 'entries_days_since'
|
||||
}
|
||||
if (props.node.rule[op][0]['entries_days_before']) {
|
||||
return 'entries_days_before'
|
||||
}
|
||||
return props.node.rule[op][0]['var']
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const vardata = computed(() => {
|
||||
return VARS[variable.value as keyof typeof VARS]
|
||||
})
|
||||
|
||||
const varresult = computed(() => {
|
||||
const op = operator.value
|
||||
if (props.node.rule[op] && props.node.rule[op][0]) {
|
||||
if (typeof props.node.rule[op][0]['__result'] === 'undefined')
|
||||
return null
|
||||
return props.node.rule[op][0]['__result']
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const rightoperand = computed(() => {
|
||||
const op = operator.value
|
||||
if (props.node.rule[op] && typeof props.node.rule[op][1] !== 'undefined') {
|
||||
return props.node.rule[op][1]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const op = computed(() => {
|
||||
return TYPEOPS[vardata.value.type as keyof typeof TYPEOPS]?.[operator.value as any]
|
||||
})
|
||||
|
||||
const operands = computed(() => {
|
||||
return props.node.rule[operator.value]
|
||||
})
|
||||
|
||||
const result = computed(() => {
|
||||
return typeof props.node.rule.__result === 'undefined' ? null : !!props.node.rule.__result
|
||||
})
|
||||
|
||||
const resultInclParents = computed(() => {
|
||||
if (typeof props.node.rule.__result === 'undefined') return null
|
||||
|
||||
function _p (node: GraphNode): boolean {
|
||||
if (node.parent) {
|
||||
return node.rule.__result && _p(node.parent)
|
||||
}
|
||||
return node.rule.__result
|
||||
}
|
||||
return _p(props.node)
|
||||
})
|
||||
|
||||
const nodeClass = computed(() => {
|
||||
return {
|
||||
node: true,
|
||||
'node-true': result.value === true,
|
||||
'node-false': result.value === false,
|
||||
}
|
||||
})
|
||||
|
||||
function df (val: string) {
|
||||
const format = $('body').attr('data-datetimeformat')
|
||||
return moment(val).format(format)
|
||||
}
|
||||
|
||||
function tf (val: string) {
|
||||
const format = $('body').attr('data-timeformat')
|
||||
return moment(val, 'HH:mm:ss').format(format)
|
||||
}
|
||||
</script>
|
||||
<template lang="pug">
|
||||
g
|
||||
path.edge(v-for="e in edges", :key="e", :d="e")
|
||||
path.edge(v-if="rootEdge", :d="rootEdge")
|
||||
path.edge(v-if="!node.children.length", :d="checkEdge")
|
||||
rect(:width="boxWidth", :height="boxHeight", :x="x", :y="y", :class="nodeClass", rx="5")
|
||||
|
||||
foreignObject(:width="boxWidth - 10", :height="boxHeight - 10", :x="x + 5", :y="y + 5")
|
||||
div.text(xmlns="http://www.w3.org/1999/xhtml")
|
||||
span(v-if="vardata && vardata.type === 'int'")
|
||||
span.fa.fa-sign-in(v-if="variable.startsWith('entries_')")
|
||||
| {{ vardata.label }}
|
||||
br
|
||||
span(v-if="varresult !== null") {{ varresult }}
|
||||
strong
|
||||
| {{ op.label }} {{ rightoperand }}
|
||||
span(v-else-if="vardata && vardata.type === 'int_by_datetime'")
|
||||
span.fa.fa-sign-in(v-if="variable.startsWith('entries_')")
|
||||
| {{ vardata.label }}
|
||||
span(v-if="node.rule[operator][0][variable][0].buildTime[0] === 'custom'")
|
||||
| {{ df(node.rule[operator][0][variable][0].buildTime[1]) }}
|
||||
span(v-else-if="node.rule[operator][0][variable][0].buildTime[0] === 'customtime'")
|
||||
| {{ tf(node.rule[operator][0][variable][0].buildTime[1]) }}
|
||||
span(v-else)
|
||||
| {{ TEXTS[node.rule[operator][0][variable][0].buildTime[0]] }}
|
||||
br
|
||||
span(v-if="varresult !== null") {{ varresult }}
|
||||
strong
|
||||
| {{ op.label }} {{ rightoperand }}
|
||||
span(v-else-if="vardata && variable === 'now'")
|
||||
span.fa.fa-clock-o
|
||||
| {{ vardata.label }}
|
||||
br
|
||||
span(v-if="varresult !== null") {{ varresult }}
|
||||
strong
|
||||
| {{ op.label }}
|
||||
br
|
||||
span(v-if="rightoperand.buildTime[0] === 'custom'")
|
||||
| {{ df(rightoperand.buildTime[1]) }}
|
||||
span(v-else-if="rightoperand.buildTime[0] === 'customtime'")
|
||||
| {{ tf(rightoperand.buildTime[1]) }}
|
||||
span(v-else)
|
||||
| {{ TEXTS[rightoperand.buildTime[0]] }}
|
||||
span(v-if="operands[2]")
|
||||
span(v-if="operator === 'isBefore'") +
|
||||
span(v-else) -
|
||||
| {{ operands[2] }}
|
||||
| {{ TEXTS.minutes }}
|
||||
span(v-else-if="vardata && operator === 'inList'")
|
||||
span.fa.fa-sign-in(v-if="variable === 'gate'")
|
||||
span.fa.fa-ticket(v-else)
|
||||
| {{ vardata.label }}
|
||||
span(v-if="varresult !== null") ({{ varresult }})
|
||||
br
|
||||
strong
|
||||
| {{ rightoperand.objectList.map((o: any) => o.lookup[2]).join(", ") }}
|
||||
span(v-else-if="vardata && vardata.type === 'enum_entry_status'")
|
||||
span.fa.fa-check-circle-o
|
||||
| {{ vardata.label }}
|
||||
span(v-if="varresult !== null") ({{ varresult }})
|
||||
br
|
||||
strong
|
||||
| {{ op.label }} {{ rightoperand }}
|
||||
|
||||
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.error(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")
|
||||
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.check(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")
|
||||
g(v-if="!node.children.length && (resultInclParents === null || resultInclParents === true)", :transform="`translate(${x + boxWidth + 25}, ${y + boxHeight/2 - 15})`")
|
||||
path.check(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")
|
||||
g(v-if="!node.children.length && (resultInclParents === false)", :transform="`translate(${x + boxWidth + 25}, ${y + boxHeight/2 - 15})`")
|
||||
path.error(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")
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user