CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-13 16:33:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate vue2 control components and widget to vue3 and vite (#5989)

Browse Source 
* setup vite and integrate fully with django

- vite starts with `python manage.py runserver`
- add templatetags to simply load vite hmr and entry points
- add eslint (recheck rules)
- enable non-strict ts

* better syntax for cors header setting

* 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

* migrate webcheckin plugin to vite+vue3

- migrate vue sfcs to script setup and pug
- move fetch calls into a api.ts module
- move common formatting and i18n strings into module

* fix migration error

* first draft migrating widget to vue3/vite

* first couple widget e2e tests

courtesy of claude
most of the tests don't work yet

* test file is not actually used

* drop widget_ prefix from e2e test fixtures

* add test for complete widget journey for simple event

* switch timezone in e2e tests to Europe/Berlin

* make dates in e2e tests relative

* migrate widget bugfix #5886

* start testing event series widget

* working vite widget setup for prod (untested), local dev (with or without dev server) and pytests, with flags for running the old version or the vite version

* simplify e2e test iframe check

* less flaky e2e tests

* top level await in iife build mode is not supported, so let's do import.meta.glob instead (we just need the build step not to see await, the code doesn't actually ever get loaded because it's DEV only)

* fix inconsistencies from automatic migration

* Allow gradual rollout of new vite-based widget by adding urls to an allowlist that gets checked against the "Origin" http header of request fetching the widget js

* add e2e tests for widget button, testing empty cart, adding specific items, and subevents

* remove janky claude testts again

* resolve migration TODOs: properly refocus parent on navigations

* use `npm run dev:control` for the vite dev server for admin components

* upgrade npm dependencies

* fix js linter errors

* fix python linter errors

* build all control vue components

* add new js config files to check-manifest ignore

* working prod build

acutal serving of built assets not tested yet

* fix templatetag paths to match what's in the vite mantifest

* add missing quotes around 'unsafe-eval' cors value

* remove now unused old vue2 tooling

* try fixing e2e test ci

* fix flake8 error

* check if vite build artefacts are in the wheel

* add license headers

* remove dom manipilation code necessary for `div.pretix-widget-compat` to work. No longer needed for vue3

* remove superfluous `createElement` calls

They might have been there because of IE, which is no longer relevant

* make widget dev mode parametizable through query params and document the usage and those params

* fix rst syntax

* remove migration todos file

Co-authored-by: luelista <mira@teamwiki.de>

* rearrange dockerfile commands for smaller image, thanks @luelista

* Update .gitignore, adding .vite

Co-authored-by: luelista <mira@teamwiki.de>

* add eslint CI

* make vue dev work in plugins

* fix docker build

* rebuild vite setup to support static prod plugins and dynamic hmr plugin development

* use toml for vite plugin config instead of standalone json file

* Add widget changes from #6047, #6149

* Allow buttons to reuse cart (Z#23226853)

* Always keep cart of buttons with items set

* widget: handle cart if not same-site (#6149)

---------

Co-authored-by: luelista <mira@teamwiki.de>
Co-authored-by: Kara Engelhardt <engelhardt@pretix.eu>
This commit is contained in:
rash
2026-05-11 15:05:06 +02:00
committed by GitHub
parent 1640ddd497
commit f04df7a6ee
99 changed files with 13462 additions and 9125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.dockerignore
View File

@@ -1,5 +1,6 @@
doc/
env/
node_modules/
res/
local/
.git/

5
.editorconfig Normal file
View File

@@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

5
.github/workflows/build.yml vendored
View File

@@ -46,4 +46,7 @@ jobs:
- name: Run build
run: python -m build
- name: Check files
run: unzip -l dist/pretix*whl | grep node_modules || exit 1
run: |
for pat in 'static.dist/vite/widget/widget.js' 'static.dist/vite/control/assets/checkinrules/main-' 'static.dist/vite/control/assets/webcheckin/main-'; do
unzip -l dist/pretix*whl | grep -q "$pat" || { echo "Missing: $pat"; exit 1; }
done

43
.github/workflows/style-js.yml vendored Normal file
View File

@@ -0,0 +1,43 @@
name: JS Code Style
on:
push:
branches: [ master ]
paths:
- 'src/pretix/static/pretixpresale/widget/**'
- 'src/pretix/static/pretixcontrol/js/ui/checkinrules/**'
- 'src/pretix/plugins/webcheckin/**'
- 'eslint.config.mjs'
- 'package.json'
- 'package-lock.json'
pull_request:
branches: [ master ]
paths:
- 'src/pretix/static/pretixpresale/widget/**'
- 'src/pretix/static/pretixcontrol/js/ui/checkinrules/**'
- 'src/pretix/plugins/webcheckin/**'
- 'eslint.config.mjs'
- 'package.json'
- 'package-lock.json'
permissions:
contents: read
env:
FORCE_COLOR: 1
jobs:
eslint:
name: eslint
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v4
- name: Set up Node.js 24
uses: actions/setup-node@v4
with:
node-version: 24
cache: npm
- name: Install Dependencies
run: npm ci
- name: Run ESLint
run: npm run lint:eslint

45
.github/workflows/tests.yml vendored
View File

@@ -72,7 +72,7 @@ jobs:
run: make all compress
- name: Run tests
working-directory: ./src
run: PRETIX_CONFIG_FILE=tests/ci_${{ matrix.database }}.cfg py.test -n 3 -p no:sugar --cov=./ --cov-report=xml tests --maxfail=100
run: PRETIX_CONFIG_FILE=tests/ci_${{ matrix.database }}.cfg py.test -n 3 -p no:sugar --cov=./ --cov-report=xml tests --ignore=tests/e2e --maxfail=100
- name: Run concurrency tests
working-directory: ./src
run: PRETIX_CONFIG_FILE=tests/ci_${{ matrix.database }}.cfg py.test tests/concurrency_tests/ --reuse-db
@@ -84,3 +84,46 @@ jobs:
token: ${{ secrets.CODECOV_TOKEN }}
fail_ci_if_error: false
if: matrix.database == 'postgres' && matrix.python-version == '3.13'
e2e:
runs-on: ubuntu-22.04
name: E2E Tests
services:
postgres:
image: postgres:15
env:
POSTGRES_PASSWORD: postgres
POSTGRES_DB: pretix
options: >-
--health-cmd "pg_isready -U postgres -d pretix"
--health-interval 10s
--health-timeout 5s
--health-retries 5
ports:
- 5432:5432
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: "3.13"
- uses: actions/cache@v4
with:
path: ~/.cache/pip
key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
restore-keys: |
${{ runner.os }}-pip-
- name: Install system dependencies
run: sudo apt update && sudo apt install -y gettext
- name: Install Python dependencies
run: pip3 install uv && uv pip install --system -e ".[dev]" psycopg2-binary
- name: Install JS dependencies
working-directory: ./src
run: make npminstall
- name: Compile
working-directory: ./src
run: make all compress
- name: Install Playwright browsers
run: npx playwright install
- name: Run E2E tests
working-directory: ./src
run: PRETIX_CONFIG_FILE=tests/ci_postgres.cfg py.test tests/e2e/ -v --maxfail=10

2
.gitignore vendored
View File

@@ -24,5 +24,7 @@ local/
.project
.pydevproject
.DS_Store
node_modules/
.vite/

1
.prettierignore Normal file
View File

@@ -0,0 +1 @@
/*

10
Dockerfile
View File

@@ -1,6 +1,7 @@
FROM python:3.13-trixie
RUN apt-get update && \
RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \
apt-get update && \
apt-get install -y --no-install-recommends \
build-essential \
gettext \
@@ -21,8 +22,7 @@ RUN apt-get update && \
libmaxminddb0 \
libmaxminddb-dev \
zlib1g-dev \
nodejs \
npm && \
nodejs && \
apt-get clean && \
rm -rf /var/lib/apt/lists/* && \
dpkg-reconfigure locales && \
@@ -50,6 +50,10 @@ COPY deployment/docker/production_settings.py /pretix/src/production_settings.py
COPY pyproject.toml /pretix/pyproject.toml
COPY _build /pretix/_build
COPY src /pretix/src
COPY package.json /pretix/package.json
COPY package-lock.json /pretix/package-lock.json
COPY tsconfig.json /pretix/tsconfig.json
COPY vite.config.ts /pretix/vite.config.ts
RUN pip3 install -U \
pip \

5
MANIFEST.in
View File

@@ -48,3 +48,8 @@ recursive-include src Makefile
recursive-exclude doc *
recursive-exclude deployment *
recursive-exclude res *
include package.json
include package-lock.json
include tsconfig.json
include vite.config.ts

50
doc/development/setup.rst
View File

@@ -110,6 +110,56 @@ process::
However, beware that code changes will not auto-reload within Celery.
Running the local development server will also automatically start a vite dev server for all control vue components.
Run the widget development server
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To locally develop the presale widget you need to start a separate vite dev server using::
npm run dev:widget
You can control the org, event and much more via query parameters like this::
http://localhost:5180/?org=testorg&event=testevent
The following query parameters are supported:
.. list-table::
:header-rows: 1
:widths: 20 20 60
* - Parameter
- Default
- Description
* - ``org``
- ``testorg``
- Organization slug
* - ``event``
- ``testevent``
- Event slug
* - ``host``
- ``http://localhost:8000``
- Backend host URL
* - ``type``
- ``widget``
- Element type: ``widget`` or ``button``
* - ``mode``
- ``dev``
- ``dev`` loads the Vite dev source, ``prod`` loads the built ``v2.{lang}.js``
* - ``lang``
- ``de``
- Language code for the prod script
* - ``button-text``
- ``Buy tickets!``
- Text content for the button (only used when ``type=button``)
Any other query parameter is passed through as an attribute on the widget/button element.
For example, ``?skip-ssl-check&list-type=calendar&items=123`` adds those attributes directly.
.. _`checksandtests`:
Code checks and unit tests

108
eslint.config.mjs Normal file
View File

@@ -0,0 +1,108 @@
import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import ts from 'typescript-eslint'
import stylistic from '@stylistic/eslint-plugin'
import vue from 'eslint-plugin-vue'
import vuePug from 'eslint-plugin-vue-pug'
const ignores = globalIgnores([
'**/node_modules',
'**/dist'
])
export default defineConfig([
ignores,
...ts.config(
js.configs.recommended,
ts.configs.recommended
),
stylistic.configs.customize({
indent: 'tab',
braceStyle: '1tbs',
quoteProps: 'as-needed'
}),
...vue.configs['flat/recommended'],
...vuePug.configs['flat/recommended'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node,
localStorage: false,
$: 'readonly',
$$: 'readonly',
$ref: 'readonly',
$computed: 'readonly',
},
parserOptions: {
parser: '@typescript-eslint/parser'
}
},
rules: {
'no-debugger': 'off',
curly: 0,
'no-return-assign': 0,
'no-console': 'off',
'vue/require-default-prop': 0,
'vue/require-v-for-key': 0,
'vue/valid-v-for': 'warn',
'vue/no-reserved-keys': 0,
'vue/no-setup-props-destructure': 0,
'vue/multi-word-component-names': 0,
'vue/max-attributes-per-line': 0,
'vue/attribute-hyphenation': ['warn', 'never'],
'vue/v-on-event-hyphenation': ['warn', 'never'],
'import/first': 0,
'@typescript-eslint/ban-ts-comment': 0,
'@typescript-eslint/no-explicit-any': 0,
'no-use-before-define': 'off',
'no-var': 'error',
'@typescript-eslint/no-use-before-define': ['error', {
typedefs: false,
functions: false,
}],
'@typescript-eslint/no-unused-vars': ['error', {
args: 'all',
argsIgnorePattern: '^_',
caughtErrors: 'all',
caughtErrorsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
varsIgnorePattern: '^_',
ignoreRestSiblings: true
}],
'@stylistic/comma-dangle': 0,
'@stylistic/space-before-function-paren': ['error', 'always'],
'@stylistic/max-statements-per-line': ['error', { max: 1, ignoredNodes: ['BreakStatement'] }],
'@stylistic/member-delimiter-style': 0,
'@stylistic/arrow-parens': 0,
'@stylistic/generator-star-spacing': 0,
'@stylistic/yield-star-spacing': ['error', 'after'],
},
},
{
files: [
'src/pretix/static/pretixcontrol/js/ui/checkinrules/**/*.vue',
'src/pretix/plugins/webcheckin/**/*.vue',
],
languageOptions: {
globals: {
moment: 'readonly',
},
},
},
{
files: [
'src/pretix/static/pretixpresale/widget/**/*.{ts,vue}',
],
languageOptions: {
globals: {
LANG: 'readonly',
},
},
},
])

4788
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

52
package.json Normal file
View File

@@ -0,0 +1,52 @@
{
"name": "pretix",
"version": "1.0.0",
"description": "",
"homepage": "https://github.com/pretix/pretix#readme",
"bugs": {
"url": "https://github.com/pretix/pretix/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/pretix/pretix.git"
},
"license": "SEE LICENSE IN LICENSE",
"author": "",
"type": "module",
"main": "index.js",
"directories": {
"doc": "doc"
},
"scripts": {
"dev:control": "vite",
"dev:widget": "vite src/pretix/static/pretixpresale/widget",
"build": "npm run build:control -s && npm run build:widget -s",
"build:control": "vite build",
"build:widget": "vite build src/pretix/static/pretixpresale/widget",
"lint:eslint": "eslint src/pretix/static/pretixpresale/widget src/pretix/static/pretixcontrol/js/ui/checkinrules src/pretix/plugins/webcheckin",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"vue": "^3.5.30"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@stylistic/eslint-plugin": "^5.10.0",
"@types/jquery": "^3.5.33",
"@types/moment": "^2.11.29",
"@types/node": "^25.5.0",
"@vitejs/plugin-vue": "^6.0.5",
"@vue/eslint-config-typescript": "^14.7.0",
"@vue/language-plugin-pug": "^3.2.5",
"eslint": "^10.0.3",
"eslint-plugin-vue": "^10.8.0",
"eslint-plugin-vue-pug": "^1.0.0-alpha.5",
"globals": "^17.4.0",
"pug": "^3.0.3",
"sass-embedded": "^1.98.0",
"smol-toml": "^1.6.1",
"stylus": "^0.64.0",
"typescript-eslint": "^8.57.0",
"vite": "^8.0.0"
}
}

1
pyproject.toml
View File

@@ -124,6 +124,7 @@ dev = [
"pytest-mock==3.15.*",
"pytest-sugar",
"pytest-xdist==3.8.*",
"pytest-playwright",
"pytest==9.0.*",
"responses",
]

5
setup.cfg
View File

@@ -37,4 +37,9 @@ ignore =
CONTRIBUTING.md
Dockerfile
SECURITY.md
eslint.config.mjs
package-lock.json
package.json
tsconfig.json
vite.config.js

12
src/Makefile
View File

@@ -9,10 +9,10 @@ localegen:
./manage.py makemessages --keep-pot --ignore "pretix/static/npm_dir/*" $(LNGS)
./manage.py makemessages --keep-pot -d djangojs --ignore "pretix/static/npm_dir/*" --ignore "pretix/helpers/*" --ignore "pretix/static/jsi18n/*" --ignore "pretix/static/jsi18n/*" --ignore "pretix/static.dist/*" --ignore "data/*" --ignore "pretix/static/rrule/*" --ignore "build/*" $(LNGS)
staticfiles: jsi18n
staticfiles: npminstall npmbuild jsi18n
./manage.py collectstatic --noinput
compress: npminstall
compress:
./manage.py compress
jsi18n: localecompile
@@ -25,8 +25,8 @@ coverage:
coverage run -m py.test
npminstall:
# keep this in sync with pretix/_build.py!
mkdir -p pretix/static.dist/node_prefix/
cp -r pretix/static/npm_dir/* pretix/static.dist/node_prefix/
npm ci --prefix=pretix/static.dist/node_prefix
npm ci
npmbuild:
npm run build

5
src/pretix/_base_settings.py
View File

@@ -37,9 +37,11 @@ INSTALLED_APPS = [
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.humanize',
# pretix needs to go before staticfiles
# so we can override the runserver command
'pretix.base',
'django.contrib.staticfiles',
'pretix.control',
'pretix.presale',
'pretix.multidomain',
@@ -243,7 +245,6 @@ STORAGES = {
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
('text/vue', 'pretix.helpers.compressor.VueCompiler'),
)
COMPRESS_OFFLINE_CONTEXT = {

13
src/pretix/_build.py
View File

@@ -21,13 +21,13 @@
#
import os
import shutil
import subprocess
from setuptools.command.build import build
from setuptools.command.build_ext import build_ext
here = os.path.abspath(os.path.dirname(__file__))
project_root = os.path.abspath(os.path.join(here, '..', '..'))
npm_installed = False
@@ -35,14 +35,14 @@ def npm_install():
global npm_installed
if not npm_installed:
# keep this in sync with Makefile!
node_prefix = os.path.join(here, 'static.dist', 'node_prefix')
os.makedirs(node_prefix, exist_ok=True)
shutil.copytree(os.path.join(here, 'static', 'npm_dir'), node_prefix, dirs_exist_ok=True)
subprocess.check_call('npm ci', shell=True, cwd=node_prefix)
subprocess.check_call('npm ci', shell=True, cwd=project_root)
npm_installed = True
def npm_build():
subprocess.check_call('npm run build', shell=True, cwd=project_root)
class CustomBuild(build):
def run(self):
if "src" not in os.listdir(".") or "pretix" not in os.listdir("src"):
@@ -62,6 +62,7 @@ class CustomBuild(build):
settings.COMPRESS_OFFLINE = True
npm_install()
npm_build()
management.call_command('compilemessages', verbosity=1)
management.call_command('compilejsi18n', verbosity=1)
management.call_command('collectstatic', verbosity=1, interactive=False)

2
src/pretix/_build_settings.py
View File

@@ -47,3 +47,5 @@ HAS_MEMCACHED = False
HAS_CELERY = False
HAS_GEOIP = False
SENTRY_ENABLED = False
VITE_DEV_MODE = False
VITE_IGNORE = False

59
src/pretix/base/management/commands/runserver.py Normal file
View File

@@ -0,0 +1,59 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
"""This command supersedes the Django-inbuilt runserver command.
It runs the local frontend server, if node is installed and the setting
is set.
"""
import atexit
import os
import subprocess
from pathlib import Path
from django.conf import settings
from django.contrib.staticfiles.management.commands.runserver import (
Command as Parent,
)
from django.utils.autoreload import DJANGO_AUTORELOAD_ENV
class Command(Parent):
def handle(self, *args, **options):
# Only start Vite in the non-main process of the autoreloader
if settings.VITE_DEV_MODE and os.environ.get(DJANGO_AUTORELOAD_ENV) != "true":
# Start the vite server in the background
vite_server = subprocess.Popen(
["npm", "run", "dev:control"],
cwd=Path(__file__).parent.parent.parent.parent.parent
)
def cleanup():
vite_server.terminate()
try:
vite_server.wait(timeout=5)
except subprocess.TimeoutExpired:
vite_server.kill()
atexit.register(cleanup)
super().handle(*args, **options)

14
src/pretix/base/middleware.py
View File

@@ -281,7 +281,7 @@ class SecurityMiddleware(MiddlewareMixin):
h = {
'default-src': ["{static}"],
'script-src': ['{static}'],
'script-src': ["{static}"],
'object-src': ["'none'"],
'frame-src': ['{static}'],
'style-src': ["{static}", "{media}"],
@@ -295,6 +295,18 @@ class SecurityMiddleware(MiddlewareMixin):
# this. However, we'll restrict it to HTTPS.
'form-action': ["{dynamic}", "https:"] + (['http:'] if settings.SITE_URL.startswith('http://') else []),
}
if settings.VITE_DEV_MODE:
h['script-src'] += ["http://localhost:5173", "ws://localhost:5173"]
h['style-src'] += ["'unsafe-inline'"]
h['connect-src'] += ["http://localhost:5173", "ws://localhost:5173"]
if hasattr(request, 'csp_nonce'):
nonce = f"'nonce-{request.csp_nonce}'"
h['script-src'].append(nonce)
if not settings.VITE_DEV_MODE:
# can't have 'unsafe-inline' and nonce at the same time
h['style-src'].append(nonce)
# Only include pay.google.com for wallet detection purposes on the Payment selection page
if (
url.url_name == "event.order.pay.change" or

6
src/pretix/base/settings.py
View File

File diff suppressed because one or more lines are too long

243
src/pretix/base/templatetags/vite.py Normal file
View File

@@ -0,0 +1,243 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
import json
import logging
import pathlib
import re
import secrets
from urllib.parse import urljoin
from urllib.request import urlopen
import importlib_metadata as metadata
from django import template
from django.conf import settings
from django.utils.safestring import mark_safe
register = template.Library()
LOGGER = logging.getLogger(__name__)
_MANIFEST = {}
# TODO more os.path.join ?
MANIFEST_PATH = settings.STATIC_ROOT + "/vite/control/.vite/manifest.json"
MANIFEST_BASE = "vite/control/"
# entry_name -> {"manifest_entry": {...}, "url_base": "..."}
_PLUGIN_REGISTRY = {}
def _discover_plugin_manifests():
"""Discover plugin vite manifests at startup.
Scans installed pretix plugins for a .vite/manifest.json inside a static.dist
directory. Only non-editable (wheel) plugins are expected to ship pre-built
assets; editable plugins are served through the Vite dev server.
"""
for ep in metadata.entry_points(group='pretix.plugin'):
dist = ep.dist
if not dist or not dist.files:
continue
try:
url_info = json.loads(dist.read_text('direct_url.json') or '{}')
if url_info.get('dir_info', {}).get('editable', False):
continue # editable plugins are served via vite dev server
except Exception:
pass
# Find .vite/manifest.json inside a /static/ directory
try:
manifest_rel = None
for f in dist.files:
if f.name == 'manifest.json' and '/static/' in str(f) and '/.vite/' in str(f):
manifest_rel = f
break
if not manifest_rel:
continue
manifest_path = pathlib.Path(str(dist.locate_file(manifest_rel)))
if not manifest_path.exists():
continue
plugin_manifest = json.loads(manifest_path.read_text())
url_base = re.search(r'/static/(.+?)/\.vite/', str(manifest_rel)).group(1) + '/'
for _key, entry in plugin_manifest.items():
if entry.get('isEntry') and 'name' in entry:
_PLUGIN_REGISTRY[entry['name']] = {
'manifest_entry': entry,
'url_base': url_base,
}
except Exception:
LOGGER.warning(f"Failed to discover vite manifest for plugin {ep.name}", exc_info=True)
# Load core manifest
if not settings.VITE_DEV_MODE and not settings.VITE_IGNORE:
try:
with open(MANIFEST_PATH) as fp:
_MANIFEST = json.load(fp)
except Exception as e:
LOGGER.warning(f"Error reading vite manifest at {MANIFEST_PATH}: {str(e)}")
# Discover plugin manifests
if not settings.VITE_IGNORE:
_discover_plugin_manifests()
def _generate_script_tag(path, attrs, src=None):
all_attrs = " ".join(f'{key}="{value}"' for key, value in attrs.items())
if src is None:
if settings.VITE_DEV_MODE:
src = urljoin(settings.VITE_DEV_SERVER, path)
else:
src = urljoin(settings.STATIC_URL, path)
return f'<script {all_attrs} src="{src}"></script>'
def _generate_css_tags(asset, already_processed=None):
"""Recursively builds all CSS tags used in a given asset from the core manifest."""
tags = []
manifest_entry = _MANIFEST[asset]
if already_processed is None:
already_processed = []
if "css" in manifest_entry:
for css_path in manifest_entry["css"]:
if css_path not in already_processed:
full_path = urljoin(settings.STATIC_URL, MANIFEST_BASE + css_path)
tags.append(f'<link rel="stylesheet" href="{full_path}" />')
already_processed.append(css_path)
if "imports" in manifest_entry:
for import_path in manifest_entry["imports"]:
tags += _generate_css_tags(import_path, already_processed)
return tags
def _generate_plugin_css_tags(manifest_entry, url_base):
"""Build CSS tags for a plugin manifest entry."""
tags = []
if "css" in manifest_entry:
for css_path in manifest_entry["css"]:
full_path = urljoin(settings.STATIC_URL, url_base + css_path)
tags.append(f'<link rel="stylesheet" href="{full_path}" />')
return tags
@register.simple_tag
@mark_safe
def vite_asset(path):
"""
Generates one <script> tag and <link> tags for each of the CSS dependencies.
"""
if not path:
return ""
# Check plugin registry (non-editable plugins with pre-built assets)
if path in _PLUGIN_REGISTRY:
info = _PLUGIN_REGISTRY[path]
entry = info['manifest_entry']
url_base = info['url_base']
tags = _generate_plugin_css_tags(entry, url_base)
# Always use STATIC_URL for pre-built plugin assets, even in dev mode
src = urljoin(settings.STATIC_URL, url_base + entry["file"])
tags.append(_generate_script_tag(path, {"type": "module", "crossorigin": ""}, src=src))
return "".join(tags)
# Dev mode: editable plugins and core entries go through the vite dev server
if settings.VITE_DEV_MODE:
return _generate_script_tag(path, {"type": "module"})
# Prod mode
manifest_entry = _MANIFEST.get(path)
if not manifest_entry:
raise RuntimeError(f"Cannot find {path} in Vite manifest at {MANIFEST_PATH}")
tags = _generate_css_tags(path)
tags.append(
_generate_script_tag(
MANIFEST_BASE + manifest_entry["file"], {"type": "module", "crossorigin": ""}
)
)
return "".join(tags)
@register.simple_tag
@mark_safe
def vite_hmr():
if not settings.VITE_DEV_MODE:
return ""
return _generate_script_tag("@vite/client", {"type": "module"})
_dev_importmap_cache = None
def _get_dev_importmap():
"""Fetch the shared-dep import map from the Vite dev server. Cached after first call."""
global _dev_importmap_cache
if _dev_importmap_cache is not None:
return _dev_importmap_cache
try:
url = urljoin(settings.VITE_DEV_SERVER, "/__pretix_importmap")
raw = json.loads(urlopen(url, timeout=2).read())
_dev_importmap_cache = {
dep: urljoin(settings.VITE_DEV_SERVER, dep_path)
for dep, dep_path in raw.items()
}
except Exception:
LOGGER.warning("Failed to fetch import map from Vite dev server")
_dev_importmap_cache = {}
return _dev_importmap_cache
@register.simple_tag(takes_context=True)
@mark_safe
def vite_importmap(context):
"""Emit an import map so pre-built plugin assets can resolve shared dependencies like vue."""
imports = {}
if settings.VITE_DEV_MODE:
# Fetch the import map from the Vite dev server (served by sharedDepsPlugin)
imports.update(_get_dev_importmap())
else:
# Discover all _vendor/* entries from the core manifest
for _key, entry in _MANIFEST.items():
name = entry.get("name", "")
if name.startswith("_vendor/"):
bare_specifier = name[len("_vendor/"):]
imports[bare_specifier] = urljoin(settings.STATIC_URL, MANIFEST_BASE + entry["file"])
if not imports:
return ""
# Generate a nonce and store it on the request so the CSP middleware can allow it
nonce = secrets.token_urlsafe(16)
request = context.get('request')
if request:
request.csp_nonce = nonce
return f'<script type="importmap" nonce="{nonce}">{json.dumps({"imports": imports})}</script>'

6
src/pretix/control/forms/global_settings.py
View File

@@ -104,6 +104,12 @@ class GlobalSettingsForm(SettingsForm):
help_text=_("Will be served at {domain}/.well-known/apple-developer-merchantid-domain-association").format(
domain=settings.SITE_URL
)
)),
('widget_vite_origins', forms.CharField(
widget=forms.Textarea(attrs={'rows': '3'}),
required=False,
label=_("Vite widget origins"),
help_text=_("One origin per line (e.g. https://example.com). Requests from these origins will be served the new vite-based widget."),
))
])
responses = register_global_settings.send(self)

2
src/pretix/control/templates/pretixcontrol/base.html
View File

@@ -2,6 +2,7 @@
{% load static %}
{% load i18n %}
{% load statici18n %}
{% load vite %}
{% load eventsignal %}
{% load eventurl %}
{% load dialog %}
@@ -84,6 +85,7 @@
<meta name="theme-color" content="#3b1c4a">
<meta name="referrer" content="origin">
{% vite_importmap %}
{% block custom_header %}{% endblock %}
</head>
<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}"

60
src/pretix/control/templates/pretixcontrol/checkin/list_edit.html
View File

@@ -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/index.ts" %}
{% endblock %}

13
src/pretix/control/templates/pretixcontrol/checkin/simulator.html
View File

@@ -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>
<!-- Vue app mount point -->
</div>
<textarea id="id_rules" class="sr-only">{{ result.rule_graph|attr_escapejson_dumps }}</textarea>
</div>
{% 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/index.ts" %}
{% endblock %}

63
src/pretix/helpers/compressor.py
View File

@@ -1,63 +0,0 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
import os
import re
import shlex
from compressor.exceptions import FilterError
from compressor.filters import CompilerFilter
from django.conf import settings
class VueCompiler(CompilerFilter):
# Based on work (c) Laura Klünder in https://github.com/codingcatgirl/django-vue-rollup
# Released under Apache License 2.0
def __init__(self, content, attrs, **kwargs):
config_dir = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), 'static', 'npm_dir')
node_path = os.path.join(settings.STATIC_ROOT, 'node_prefix', 'node_modules')
self.rollup_bin = os.path.join(node_path, 'rollup', 'dist', 'bin', 'rollup')
rollup_config = os.path.join(config_dir, 'rollup.config.js')
if not os.path.exists(self.rollup_bin) and not settings.DEBUG:
raise FilterError("Rollup not installed or pretix not built properly, please run 'make npminstall' in source root.")
command = (
' '.join((
'NODE_PATH=' + shlex.quote(node_path),
shlex.quote(self.rollup_bin),
'-c',
shlex.quote(rollup_config))
) +
' --input {infile} -n {export_name} --file {outfile}'
)
super().__init__(content, command=command, **kwargs)
def input(self, **kwargs):
if self.filename is None:
raise FilterError('VueCompiler can only compile files, not inline code.')
if not os.path.exists(self.rollup_bin):
raise FilterError("Rollup not installed, please run 'make npminstall' in source root.")
self.options += (('export_name', re.sub(
r'^([a-z])|[^a-z0-9A-Z]+([a-zA-Z0-9])?',
lambda s: s.group(0)[-1].upper(),
os.path.basename(self.filename).split('.')[0]
)),)
return super().input(**kwargs)

271
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/api.ts Normal file
View File

@@ -0,0 +1,271 @@
import type { I18nString, SubEvent } from './i18n'
const settingsEl = document.getElementById('api-settings')
const { urls } = JSON.parse(settingsEl.textContent || '{}') as { urls: {
lists: string
questions: string
} }
// interfaces generated from api docs
export interface PaginatedResponse<T> {
count: number
next: string | null
previous: string | null
results: T[]
}
export interface CheckinList {
id: number
name: string
all_products: boolean
limit_products: number[]
subevent: SubEvent | null
position_count?: number
checkin_count?: number
include_pending: boolean
allow_multiple_entries: boolean
allow_entry_after_exit: boolean
rules: Record<string, unknown>
exit_all_at: string | null
addon_match: boolean
ignore_in_statistics?: boolean
consider_tickets_used?: boolean
}
export interface Checkin {
id: number
list: number
datetime: string
type: 'entry' | 'exit'
gate: number | null
device: number | null
device_id: number | null
auto_checked_in: boolean
}
export interface Seat {
id: number
name: string
zone_name: string
row_name: string
row_label: string | null
seat_number: string
seat_label: string | null
seat_guid: string
}
export interface Position {
id: number
order: string
positionid: number
canceled?: boolean
item: { id?: number; name: I18nString; internal_name?: string; admission?: boolean }
variation: { id?: number; value: I18nString } | null
price: string
attendee_name: string
attendee_name_parts: Record<string, string>
attendee_email: string | null
company?: string | null
street?: string | null
zipcode?: string | null
city?: string | null
country?: string | null
state?: string | null
voucher?: number | null
voucher_budget_use?: string | null
tax_rate: string
tax_value: string
tax_code?: string | null
tax_rule: number | null
secret: string
addon_to: number | null
subevent: SubEvent | null
discount?: number | null
blocked: string[] | null
valid_from: string | null
valid_until: string | null
pseudonymization_id: string
seat: Seat | null
checkins: Checkin[]
downloads?: { output: string; url: string }[]
answers: Answer[]
pdf_data?: Record<string, unknown>
plugin_data?: Record<string, unknown>
// Additional fields from checkin list positions endpoint
order__status?: string
order__valid_if_pending?: boolean
order__require_approval?: boolean
order__locale?: string
require_attention?: boolean
addons?: Addon[]
}
export interface Answer {
question: number | AnswerQuestion
answer: string
question_identifier: string
options: number[]
option_identifiers: string[]
}
export interface AnswerQuestion {
id: number
question: I18nString
help_text?: I18nString
type: string
required: boolean
position: number
items: number[]
identifier: string
ask_during_checkin: boolean
show_during_checkin: boolean
hidden?: boolean
print_on_invoice?: boolean
options: QuestionOption[]
valid_number_min?: string | null
valid_number_max?: string | null
valid_date_min?: string | null
valid_date_max?: string | null
valid_datetime_min?: string | null
valid_datetime_max?: string | null
valid_file_portrait?: boolean
valid_string_length_max?: number | null
dependency_question?: number | null
dependency_values?: string[]
}
export interface QuestionOption {
id: number
identifier: string
position: number
answer: I18nString
}
export interface Addon {
item: { name: I18nString; internal_name?: string }
variation: { value: I18nString } | null
}
export interface CheckinStatusVariation {
id: number
value: string
checkin_count: number
position_count: number
}
export interface CheckinStatusItem {
id: number
name: string
checkin_count: number
admission: boolean
position_count: number
variations: CheckinStatusVariation[]
}
export interface CheckinStatus {
checkin_count: number
position_count: number
inside_count: number
event?: { name: string }
items?: CheckinStatusItem[]
}
export interface RedeemRequest {
questions_supported: boolean
canceled_supported: boolean
ignore_unpaid: boolean
type: 'entry' | 'exit'
answers: Record<string, string>
datetime?: string | null
force?: boolean
nonce?: string
}
export interface RedeemResponseList {
id: number
name: string
event: string
subevent: number | null
include_pending: boolean
}
export interface RedeemResponse {
status: 'ok' | 'error' | 'incomplete'
reason?: 'invalid' | 'unpaid' | 'blocked' | 'invalid_time' | 'canceled' | 'already_redeemed' | 'product' | 'rules' | 'ambiguous' | 'revoked' | 'unapproved' | 'error'
reason_explanation?: string | null
position?: Position
questions?: AnswerQuestion[]
checkin_texts?: string[]
require_attention?: boolean
list?: RedeemResponseList
}
const CSRF_TOKEN = document.querySelector<HTMLInputElement>('input[name=csrfmiddlewaretoken]')?.value ?? ''
function handleAuthError (response: Response): void {
if ([401, 403].includes(response.status)) {
window.location.href = '/control/login?next=' + encodeURIComponent(
window.location.pathname + window.location.search + window.location.hash
)
}
}
export const api = {
// generic fetch wrapper, not sure if this should be exposed
async fetch <T> (url: string, options?: RequestInit): Promise<T> {
const response = await fetch(url, options)
handleAuthError(response)
if (!response.ok && response.status !== 400 && response.status !== 404) {
throw new Error('HTTP status ' + response.status)
}
return response.json()
},
async fetchCheckinLists (endsAfter?: string): Promise<PaginatedResponse<CheckinList>> {
const cutoff = endsAfter ?? moment().subtract(8, 'hours').toISOString()
const url = `${urls.lists}?exclude=checkin_count&exclude=position_count&expand=subevent&ends_after=${cutoff}`
return api.fetch(url)
},
async fetchCheckinList (listId: string): Promise<CheckinList> {
return api.fetch(`${urls.lists}${listId}/?expand=subevent`)
},
async fetchNextPage<T> (nextUrl: string): Promise<PaginatedResponse<T>> {
return api.fetch(nextUrl)
},
async fetchStatus (listId: number): Promise<CheckinStatus> {
return api.fetch(`${urls.lists}${listId}/status/`)
},
async searchPositions (listId: number, query: string): Promise<PaginatedResponse<Position>> {
const url = `${urls.lists}${listId}/positions/?ignore_status=true&expand=subevent&expand=item&expand=variation&check_rules=true&search=${encodeURIComponent(query)}`
return api.fetch(url)
},
async redeemPosition (
listId: number,
positionId: string,
data: RedeemRequest,
untrusted: boolean = false
): Promise<RedeemResponse> {
let url = `${urls.lists}${listId}/positions/${encodeURIComponent(positionId)}/redeem/?expand=item&expand=subevent&expand=variation&expand=answers.question&expand=addons`
if (untrusted) url += '&untrusted_input=true'
const response = await fetch(url, {
method: 'POST',
headers: {
'X-CSRFToken': CSRF_TOKEN,
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
handleAuthError(response)
if (response.status === 404) {
return { status: 'error', reason: 'invalid' }
}
if (!response.ok && response.status !== 400) {
throw new Error('HTTP status ' + response.status)
}
return response.json()
}
}

1103
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/app.vue
View File

File diff suppressed because it is too large Load Diff

47
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/checkinlist-item.vue
View File

@@ -1,28 +1,21 @@
<template>
<a class="list-group-item" href="#" @click.prevent="$emit('selected', list)">
<div class="row">
<div class="col-md-6">
{{ list.name }}
</div>
<div class="col-md-6 text-muted">
{{ subevent }}
</div>
</div>
</a>
</template>
<script>
export default {
components: {},
props: {
list: Object
},
computed: {
subevent () {
if (!this.list.subevent) return '';
const name = i18nstring_localize(this.list.subevent.name)
const date = moment.utc(this.list.subevent.date_from).tz(this.$root.timezone).format(this.$root.datetime_format)
return `${name} · ${date}`
}
},
}
<script setup lang="ts">
import { computed } from 'vue'
import type { CheckinList } from '../api'
import { formatSubevent } from '../i18n'
const props = defineProps<{
list: CheckinList
}>()
defineEmits<{
selected: [list: CheckinList]
}>()
const subevent = computed(() => formatSubevent(props.list.subevent))
</script>
<template lang="pug">
a.list-group-item(href="#", @click.prevent="$emit('selected', list)")
.row
.col-md-6 {{ list.name }}
.col-md-6.text-muted {{ subevent }}
</template>

166
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/checkinlist-select.vue
View File

@@ -1,101 +1,101 @@
<template>
<div class="panel panel-primary checkinlist-select">
<div class="panel-heading">
<h3 class="panel-title">
{{ $root.strings['checkinlist.select'] }}
</h3>
</div>
<ul class="list-group">
<checkinlist-item v-if="lists" v-for="l in lists" :list="l" :key="l.id" @selected="$emit('selected', l)"></checkinlist-item>
<li v-if="loading" class="list-group-item text-center">
<span class="fa fa-4x fa-cog fa-spin loading-icon"></span>
</li>
<li v-else-if="error" class="list-group-item text-center">
{{ error }}
</li>
<a v-else-if="next_url" class="list-group-item text-center" href="#" @click.prevent="loadNext">
{{ $root.strings['pagination.next'] }}
</a>
</ul>
</div>
</template>
<script>
export default {
components: {
CheckinlistItem: CheckinlistItem.default,
},
data() {
return {
loading: false,
error: null,
lists: null,
next_url: null,
}
},
// TODO: pagination
mounted() {
this.load()
},
methods: {
load() {
this.loading = true
const cutoff = moment().subtract(8, 'hours').toISOString()
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../api'
import type { CheckinList } from '../api'
import { STRINGS } from '../i18n'
import CheckinlistItem from './checkinlist-item.vue'
const emit = defineEmits<{
selected: [list: CheckinList]
}>()
const loading = ref(false)
const error = ref<unknown>(null)
const lists = ref<CheckinList[] | null>(null)
const nextUrl = ref<string | null>(null)
async function load () {
loading.value = true
error.value = null
try {
if (location.hash) {
fetch(this.$root.api.lists + location.hash.substr(1) + '/' + '?expand=subevent')
.then(response => response.json())
.then(data => {
this.loading = false
const listId = location.hash.substring(1)
try {
const data = await api.fetchCheckinList(listId)
loading.value = false
if (data.id) {
this.$emit('selected', data)
emit('selected', data)
} else {
location.hash = ''
this.load()
load()
}
})
.catch(reason => {
} catch {
location.hash = ''
this.load()
})
load()
}
return
}
fetch(this.$root.api.lists + '?exclude=checkin_count&exclude=position_count&expand=subevent&ends_after=' + cutoff)
.then(response => response.json())
.then(data => {
this.loading = false
const data = await api.fetchCheckinLists()
loading.value = false
if (data.results) {
this.lists = data.results
this.next_url = data.next
lists.value = data.results
nextUrl.value = data.next
} else if (data.results === 0) {
this.error = this.$root.strings['checkinlist.none']
error.value = STRINGS['checkinlist.none']
} else {
this.error = data
error.value = data
}
})
.catch(reason => {
this.loading = false
this.error = reason
})
},
loadNext() {
this.loading = true
fetch(this.next_url)
.then(response => response.json())
.then(data => {
this.loading = false
} catch (e) {
loading.value = false
error.value = e
}
}
async function loadNext () {
if (!nextUrl.value) return
loading.value = true
error.value = null
try {
const data = await api.fetchNextPage<CheckinList>(nextUrl.value)
loading.value = false
if (data.results) {
this.lists.push(...data.results)
this.next_url = data.next
lists.value.push(...data.results)
nextUrl.value = data.next
} else if (data.results === 0) {
this.error = this.$root.strings['checkinlist.none']
error.value = STRINGS['checkinlist.none']
} else {
this.error = data
error.value = data
}
})
.catch(reason => {
this.loading = false
this.error = reason
})
},
},
} catch (e) {
loading.value = false
error.value = e
}
}
onMounted(() => {
load()
})
</script>
<template lang="pug">
.panel.panel-primary.checkinlist-select
.panel-heading
h3.panel-title {{ STRINGS['checkinlist.select'] }}
ul.list-group
CheckinlistItem(
v-for="l in lists",
:key="l.id",
:list="l",
@selected="emit('selected', $event)"
)
li.list-group-item.text-center(v-if="loading")
span.fa.fa-4x.fa-cog.fa-spin.loading-icon
li.list-group-item.text-center(v-else-if="error") {{ error }}
a.list-group-item.text-center(v-else-if="nextUrl", href="#", @click.prevent="loadNext")
| {{ STRINGS['pagination.next'] }}
</template>

90
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/datefield.vue
View File

@@ -1,31 +1,24 @@
<template>
<input class="form-control" :required="required">
</template>
<script>
export default {
props: ["required", "value"],
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("YYYY-MM-DD"));
});
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-dateformat"),
locale: $("body").attr("data-datetimelocale"),
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { dateFormat, datetimeLocale } from '../i18n'
const props = defineProps<{
required?: boolean
modelValue?: string
id?: string
}>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
const input = ref<HTMLInputElement>()
const opts = {
format: dateFormat,
locale: datetimeLocale,
useCurrent: false,
showClear: this.required,
showClear: props.required,
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
@@ -35,20 +28,37 @@ export default {
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
close: 'fa fa-remove',
},
}
};
watch(() => props.modelValue, (val) => {
if (val) {
$(input.value!).data('DateTimePicker').date(moment(val))
}
},
watch: {
value: function (val) {
$(this.$el).data('DateTimePicker').date(moment(val));
},
},
destroyed: function () {
$(this.$el)
})
onMounted(() => {
$(input.value!)
.datetimepicker(opts)
.trigger('change')
.on('dp.change', function (this: HTMLElement) {
emit('update:modelValue', $(this).data('DateTimePicker').date().format('YYYY-MM-DD'))
})
if (!props.modelValue) {
$(input.value!).data('DateTimePicker').viewDate(moment().hour(0).minute(0).second(0).millisecond(0))
} else {
$(input.value!).data('DateTimePicker').date(moment(props.modelValue))
}
})
onUnmounted(() => {
$(input.value!)
.off()
.datetimepicker("destroy");
}
}
.datetimepicker('destroy')
})
</script>
<template lang="pug">
input.form-control(:id="id", ref="input", :required="required")
</template>

92
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/datetimefield.vue
View File

@@ -1,32 +1,25 @@
<template>
<input class="form-control" :required="required">
</template>
<script>
export default {
props: ["required", "value"],
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"),
timeZone: $("body").attr("data-timezone"),
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { datetimeFormat, datetimeLocale, timezone } from '../i18n'
const props = defineProps<{
required?: boolean
modelValue?: string
id?: string
}>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
const input = ref<HTMLInputElement>()
const opts = {
format: datetimeFormat,
locale: datetimeLocale,
timeZone: timezone,
useCurrent: false,
showClear: this.required,
showClear: props.required,
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
@@ -36,20 +29,37 @@ export default {
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
close: 'fa fa-remove',
},
}
};
watch(() => props.modelValue, (val) => {
if (val) {
$(input.value!).data('DateTimePicker').date(moment(val))
}
},
watch: {
value: function (val) {
$(this.$el).data('DateTimePicker').date(moment(val));
},
},
destroyed: function () {
$(this.$el)
})
onMounted(() => {
$(input.value!)
.datetimepicker(opts)
.trigger('change')
.on('dp.change', function (this: HTMLElement) {
emit('update:modelValue', $(this).data('DateTimePicker').date().toISOString())
})
if (!props.modelValue) {
$(input.value!).data('DateTimePicker').viewDate(moment().hour(0).minute(0).second(0).millisecond(0))
} else {
$(input.value!).data('DateTimePicker').date(moment(props.modelValue))
}
})
onUnmounted(() => {
$(input.value!)
.off()
.datetimepicker("destroy");
}
}
.datetimepicker('destroy')
})
</script>
<template lang="pug">
input.form-control(:id="id", ref="input", :required="required")
</template>

92
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/searchresult-item.vue
View File

@@ -1,48 +1,48 @@
<template>
<a class="list-group-item searchresult" href="#" @click.prevent="$emit('selected', position)" ref="a">
<div class="details">
<h4>{{ position.order }}-{{ position.positionid }} {{ position.attendee_name }}</h4>
<span>{{ itemvar }}<br></span>
<span v-if="subevent">{{ subevent }}<br></span>
<div class="secret">{{ position.secret }}</div>
</div>
<div :class="`status status-${status}`">
<span v-if="position.require_attention"><span class="fa fa-warning"></span><br></span>
{{ $root.strings[`status.${status}`] }}
</div>
</a>
</template>
<script>
export default {
components: {},
props: {
position: Object
},
computed: {
status() {
if (this.position.checkins.length) return 'redeemed';
if (this.position.order__status === 'n' && this.position.order__valid_if_pending) return 'pending_valid';
if (this.position.order__status === 'n' && this.position.order__require_approval) return 'require_approval';
return this.position.order__status
},
itemvar() {
if (this.position.variation) {
return `${i18nstring_localize(this.position.item.name)} – ${i18nstring_localize(this.position.variation.value)}`
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Position } from '../api'
import { STRINGS, i18nstringLocalize, formatSubevent } from '../i18n'
const props = defineProps<{
position: Position
}>()
defineEmits<{
selected: [position: Position]
}>()
const rootEl = ref<HTMLAnchorElement>()
const status = computed(() => {
if (props.position.checkins.length) return 'redeemed'
if (props.position.order__status === 'n' && props.position.order__valid_if_pending) return 'pending_valid'
if (props.position.order__status === 'n' && props.position.order__require_approval) return 'require_approval'
return props.position.order__status
})
const itemvar = computed(() => {
if (props.position.variation) {
return `${i18nstringLocalize(props.position.item.name)} – ${i18nstringLocalize(props.position.variation.value)}`
}
return i18nstring_localize(this.position.item.name)
},
subevent() {
if (!this.position.subevent) return ''
const name = i18nstring_localize(this.position.subevent.name)
const date = moment.utc(this.position.subevent.date_from).tz(this.$root.timezone).format(this.$root.datetime_format)
return `${name} · ${date}`
},
},
}
// secret
// status
// order code
// name
// seat
// require attention
return i18nstringLocalize(props.position.item.name)
})
const subevent = computed(() => formatSubevent(props.position.subevent))
defineExpose({ el: rootEl })
</script>
<template lang="pug">
a.list-group-item.searchresult(ref="rootEl", href="#", @click.prevent="$emit('selected', position)")
.details
h4 {{ position.order }}-{{ position.positionid }} {{ position.attendee_name }}
span {{ itemvar }}
br
span(v-if="subevent") {{ subevent }}
br
.secret {{ position.secret }}
.status(:class="`status-${status}`")
span(v-if="position.require_attention")
span.fa.fa-warning
br
| {{ STRINGS[`status.${status}`] }}
</template>

90
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/components/timefield.vue
View File

@@ -1,31 +1,24 @@
<template>
<input class="form-control" :required="required">
</template>
<script>
export default {
props: ["required", "value"],
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(moment(vm.value));
}
},
methods: {
opts: function () {
return {
format: $("body").attr("data-timeformat"),
locale: $("body").attr("data-datetimelocale"),
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { timeFormat, datetimeLocale } from '../i18n'
const props = defineProps<{
required?: boolean
modelValue?: string
id?: string
}>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
const input = ref<HTMLInputElement>()
const opts = {
format: timeFormat,
locale: datetimeLocale,
useCurrent: false,
showClear: this.required,
showClear: props.required,
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
@@ -35,20 +28,37 @@ export default {
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
close: 'fa fa-remove',
},
}
};
watch(() => props.modelValue, (val) => {
if (val) {
$(input.value!).data('DateTimePicker').date(moment(val))
}
},
watch: {
value: function (val) {
$(this.$el).data('DateTimePicker').date(moment(val));
},
},
destroyed: function () {
$(this.$el)
})
onMounted(() => {
$(input.value!)
.datetimepicker(opts)
.trigger('change')
.on('dp.change', function (this: HTMLElement) {
emit('update:modelValue', $(this).data('DateTimePicker').date().format('HH:mm:ss'))
})
if (!props.modelValue) {
$(input.value!).data('DateTimePicker').viewDate(moment().hour(0).minute(0).second(0).millisecond(0))
} else {
$(input.value!).data('DateTimePicker').date(moment(props.modelValue))
}
})
onUnmounted(() => {
$(input.value!)
.off()
.datetimepicker("destroy");
}
}
.datetimepicker('destroy')
})
</script>
<template lang="pug">
input.form-control(:id="id", ref="input", :required="required")
</template>

106
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/i18n.ts Normal file
View File

@@ -0,0 +1,106 @@
const body = document.body
export const timezone = body.dataset.timezone ?? 'UTC'
export const datetimeFormat = body.dataset.datetimeformat ?? 'L LT'
export const dateFormat = body.dataset.dateformat ?? 'L'
export const timeFormat = body.dataset.timeformat ?? 'LT'
export const datetimeLocale = body.dataset.datetimelocale ?? 'en'
export const pretixLocale = body.dataset.pretixlocale ?? 'en'
moment.locale(datetimeLocale)
export function gettext (msgid: string): string {
if (typeof django !== 'undefined' && typeof django.gettext !== 'undefined') {
return django.gettext(msgid)
}
return msgid
}
export function ngettext (singular: string, plural: string, count: number): string {
if (typeof django !== 'undefined' && typeof django.ngettext !== 'undefined') {
return django.ngettext(singular, plural, count)
}
return plural
}
export type I18nString = string | Record<string, string> | null | undefined
export function i18nstringLocalize (obj: I18nString): string {
// external
return i18nstring_localize(obj)
}
export const STRINGS: Record<string, string> = {
'checkinlist.select': gettext('Select a check-in list'),
'checkinlist.none': gettext('No active check-in lists found.'),
'checkinlist.switch': gettext('Switch check-in list'),
'results.headline': gettext('Search results'),
'results.none': gettext('No tickets found'),
'check.headline': gettext('Result'),
'check.attention': gettext('This ticket requires special attention'),
'scantype.switch': gettext('Switch direction'),
'scantype.entry': gettext('Entry'),
'scantype.exit': gettext('Exit'),
'input.placeholder': gettext('Scan a ticket or search and press return…'),
'pagination.next': gettext('Load more'),
'status.p': gettext('Valid'),
'status.n': gettext('Unpaid'),
'status.c': gettext('Canceled'),
'status.e': gettext('Canceled'),
'status.pending_valid': gettext('Confirmed'),
'status.require_approval': gettext('Approval pending'),
'status.redeemed': gettext('Redeemed'),
'modal.cancel': gettext('Cancel'),
'modal.continue': gettext('Continue'),
'modal.unpaid.head': gettext('Ticket not paid'),
'modal.unpaid.text': gettext('This ticket is not yet paid. Do you want to continue anyways?'),
'modal.questions': gettext('Additional information required'),
'result.ok': gettext('Valid ticket'),
'result.exit': gettext('Exit recorded'),
'result.already_redeemed': gettext('Ticket already used'),
'result.questions': gettext('Information required'),
'result.invalid': gettext('Unknown ticket'),
'result.product': gettext('Ticket type not allowed here'),
'result.unpaid': gettext('Ticket not paid'),
'result.rules': gettext('Entry not allowed'),
'result.revoked': gettext('Ticket code revoked/changed'),
'result.blocked': gettext('Ticket blocked'),
'result.invalid_time': gettext('Ticket not valid at this time'),
'result.canceled': gettext('Order canceled'),
'result.ambiguous': gettext('Ticket code is ambiguous on list'),
'result.unapproved': gettext('Order not approved'),
'status.checkin': gettext('Checked-in Tickets'),
'status.position': gettext('Valid Tickets'),
'status.inside': gettext('Currently inside'),
yes: gettext('Yes'),
no: gettext('No'),
}
export interface SubEvent {
name: Record<string, string>
date_from: string
}
export function formatSubevent (subevent: SubEvent | null | undefined): string {
if (!subevent) return ''
const name = i18nstringLocalize(subevent.name)
const date = moment.utc(subevent.date_from).tz(timezone).format(datetimeFormat)
return `${name} · ${date}`
}
export interface Question {
type: string
}
export function formatAnswer (value: string, question: Question): string {
if (question.type === 'B' && value === 'True') {
return STRINGS['yes']
} else if (question.type === 'B' && value === 'False') {
return STRINGS['no']
} else if (question.type === 'W' && value) {
return moment(value).tz(timezone).format('L LT')
} else if (question.type === 'D' && value) {
return moment(value).format('L')
}
return value
}

79
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/main.js
View File

@@ -1,79 +0,0 @@
/*global gettext, Vue, App*/
function gettext(msgid) {
if (typeof django !== 'undefined' && typeof django.gettext !== 'undefined') {
return django.gettext(msgid);
}
return msgid;
}
function ngettext(singular, plural, count) {
if (typeof django !== 'undefined' && typeof django.ngettext !== 'undefined') {
return django.ngettext(singular, plural, count);
}
return plural;
}
moment.locale(document.body.attributes['data-datetimelocale'].value)
window.vapp = new Vue({
components: {
App: App.default
},
render: function (h) {
return h('App')
},
data: {
api: {
lists: document.querySelector('#app').attributes['data-api-lists'].value,
},
strings: {
'checkinlist.select': gettext('Select a check-in list'),
'checkinlist.none': gettext('No active check-in lists found.'),
'checkinlist.switch': gettext('Switch check-in list'),
'results.headline': gettext('Search results'),
'results.none': gettext('No tickets found'),
'check.headline': gettext('Result'),
'check.attention': gettext('This ticket requires special attention'),
'scantype.switch': gettext('Switch direction'),
'scantype.entry': gettext('Entry'),
'scantype.exit': gettext('Exit'),
'input.placeholder': gettext('Scan a ticket or search and press return…'),
'pagination.next': gettext('Load more'),
'status.p': gettext('Valid'),
'status.n': gettext('Unpaid'),
'status.c': gettext('Canceled'),
'status.e': gettext('Canceled'),
'status.pending_valid': gettext('Confirmed'),
'status.require_approval': gettext('Approval pending'),
'status.redeemed': gettext('Redeemed'),
'modal.cancel': gettext('Cancel'),
'modal.continue': gettext('Continue'),
'modal.unpaid.head': gettext('Ticket not paid'),
'modal.unpaid.text': gettext('This ticket is not yet paid. Do you want to continue anyways?'),
'modal.questions': gettext('Additional information required'),
'result.ok': gettext('Valid ticket'),
'result.exit': gettext('Exit recorded'),
'result.already_redeemed': gettext('Ticket already used'),
'result.questions': gettext('Information required'),
'result.invalid': gettext('Unknown ticket'),
'result.product': gettext('Ticket type not allowed here'),
'result.unpaid': gettext('Ticket not paid'),
'result.rules': gettext('Entry not allowed'),
'result.revoked': gettext('Ticket code revoked/changed'),
'result.blocked': gettext('Ticket blocked'),
'result.invalid_time': gettext('Ticket not valid at this time'),
'result.canceled': gettext('Order canceled'),
'result.ambiguous': gettext('Ticket code is ambiguous on list'),
'result.unapproved': gettext('Order not approved'),
'status.checkin': gettext('Checked-in Tickets'),
'status.position': gettext('Valid Tickets'),
'status.inside': gettext('Currently inside'),
'yes': gettext('Yes'),
'no': gettext('No'),
},
event_name: document.querySelector('#app').attributes['data-event-name'].value,
timezone: document.body.attributes['data-timezone'].value,
datetime_format: document.body.attributes['data-datetimeformat'].value,
},
el: '#app'
})

17
src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/main.ts Normal file
View File

@@ -0,0 +1,17 @@
import { createApp } from 'vue'
// import './scss/main.scss'
import App from './components/app.vue'
const mountEl = document.querySelector<HTMLElement>('#app')!
const app = createApp(App, mountEl.dataset)
app.mount('#app')
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)
}

32
src/pretix/plugins/webcheckin/templates/pretixplugins/webcheckin/index.html
View File

@@ -4,6 +4,7 @@
{% load statici18n %}
{% load eventurl %}
{% load escapejson %}
{% load vite %}
<!DOCTYPE html>
<html>
<head>
@@ -23,11 +24,7 @@
<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}"
data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}"
data-pretixlocale="{{ request.LANGUAGE_CODE }}" data-timezone="{{ request.event.settings.timezone }}">
<div
data-api-lists="{% url "api-v1:checkinlist-list" event=request.event.slug organizer=request.organizer.slug %}"
data-api-questions="{% url "api-v1:question-list" event=request.event.slug organizer=request.organizer.slug %}"
data-event-name="{{ request.event.name }}"
id="app"></div>
<div id="app" data-event-name="{{ request.event.name }}"></div>
{% compress js %}
<script type="text/javascript" src="{% static "pretixbase/js/i18nstring.js" %}"></script>
<script type="text/javascript" src="{% static "moment/moment-with-locales.js" %}"></script>
@@ -35,22 +32,17 @@
<script type="text/javascript" src="{% static "jquery/js/jquery-3.6.4.min.js" %}"></script>
<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
{% endcompress %}
{% 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/vue" src="{% static 'pretixplugins/webcheckin/components/checkinlist-item.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/checkinlist-select.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/searchresult-item.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/datetimefield.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/datefield.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/timefield.vue' %}"></script>
<script type="text/vue" src="{% static 'pretixplugins/webcheckin/components/app.vue' %}"></script>
<script type="text/javascript" src="{% static "pretixplugins/webcheckin/main.js" %}"></script>
{% endcompress %}
<script type="application/json" id="countries">{{ countries|escapejson_dumps }}</script>
<script type="application/json" id="api-settings">
{
"urls": {
"lists": "{% url "api-v1:checkinlist-list" event=request.event.slug organizer=request.organizer.slug %}",
"questions": "{% url "api-v1:question-list" event=request.event.slug organizer=request.organizer.slug %}"
}
}
</script>
{% vite_hmr %}
{% vite_asset "src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/main.ts" %}
{% csrf_token %}
</body>
</html>

52
src/pretix/presale/views/widget.py
View File

@@ -122,9 +122,22 @@ def widget_css_etag(request, version, **kwargs):
return f'{_get_source_cache_key(version)}-{request.organizer.cache.get_or_set("css_version", default=lambda: int(time.time()))}'
def _use_vite(request):
if getattr(settings, 'PRETIX_WIDGET_VITE', False):
return True
origin = request.META.get('HTTP_ORIGIN', '')
gs = GlobalSettingsObject()
vite_origins = gs.settings.get('widget_vite_origins', as_type=str, default='')
if origin and vite_origins:
origins_list = [o.strip() for o in vite_origins.strip().splitlines() if o.strip()]
return origin in origins_list
return False
def widget_js_etag(request, version, lang, **kwargs):
gs = GlobalSettingsObject()
return gs.settings.get('widget_checksum_{}_{}'.format(version, lang))
variant = 'vite' if _use_vite(request) else 'legacy'
return gs.settings.get('widget_checksum_{}_{}_{}'.format(version, lang, variant))
@gzip_page
@@ -153,12 +166,15 @@ def widget_css(request, version, **kwargs):
return resp
def generate_widget_js(version, lang):
def generate_widget_js(version, lang, use_vite=False):
code = []
with language(lang):
# Provide isolation
code.append('(function (siteglobals) {\n')
code.append('var module = {}, exports = {};\n')
if use_vite:
code.append('const LANG = "%s";\n' % lang)
else:
code.append('var lang = "%s";\n' % lang)
c = JavaScriptCatalog()
@@ -181,10 +197,15 @@ def generate_widget_js(version, lang):
'plural': plural,
})
i18n_js = template.render(context)
i18n_js = i18n_js.replace('for (const ', 'for (var ') # remove if we really want to break IE11 for good
i18n_js = i18n_js.replace(r"value.includes(", r"-1 != value.indexOf(") # remove if we really want to break IE11 for good
code.append(i18n_js)
if use_vite:
vite_js = finders.find('vite/widget/widget.js')
if not vite_js:
raise FileNotFoundError('Vite widget build not found. Run: npm run build:widget')
with open(vite_js, 'r', encoding='utf-8') as fp:
code.append(fp.read())
else:
files = [
'vuejs/vue.js' if settings.DEBUG else 'vuejs/vue.min.js',
'pretixpresale/js/widget/docready.js',
@@ -215,15 +236,22 @@ def widget_js(request, version, lang, **kwargs):
if version < version_min:
version = version_min
cached_js = cache.get('widget_js_data_v{}_{}'.format(version, lang))
use_vite = _use_vite(request)
variant = 'vite' if use_vite else 'legacy'
cache_prefix = 'widget_js_data_v{}_{}_{}'.format(version, lang, variant)
cached_js = cache.get(cache_prefix)
if cached_js and not settings.DEBUG:
resp = HttpResponse(cached_js, content_type='text/javascript')
resp._csp_ignore = True
resp['Access-Control-Allow-Origin'] = '*'
return resp
settings_key = 'widget_file_v{}_{}_{}'.format(version, lang, variant)
checksum_key = 'widget_checksum_v{}_{}_{}'.format(version, lang, variant)
gs = GlobalSettingsObject()
fname = gs.settings.get('widget_file_v{}_{}'.format(version, lang))
fname = gs.settings.get(settings_key)
resp = None
if fname and not settings.DEBUG:
if isinstance(fname, File):
@@ -231,21 +259,21 @@ def widget_js(request, version, lang, **kwargs):
try:
data = default_storage.open(fname).read()
resp = HttpResponse(data, content_type='text/javascript')
cache.set('widget_js_data_v{}_{}'.format(version, lang), data, 3600 * 4)
cache.set(cache_prefix, data, 3600 * 4)
except:
logger.exception('Failed to open widget.js')
if not resp:
data = generate_widget_js(version, lang).encode()
data = generate_widget_js(version, lang, use_vite=use_vite).encode()
checksum = hashlib.sha1(data).hexdigest()
if not settings.DEBUG:
newname = default_storage.save(
'widget/widget.{}.{}.{}.js'.format(version, lang, checksum),
'widget/widget.{}.{}.{}.{}.js'.format(version, lang, variant, checksum),
ContentFile(data)
)
gs.settings.set('widget_file_v{}_{}'.format(version, lang), 'file://' + newname)
gs.settings.set('widget_checksum_v{}_{}'.format(version, lang), checksum)
cache.set('widget_js_data_v{}_{}'.format(version, lang), data, 3600 * 4)
gs.settings.set(settings_key, 'file://' + newname)
gs.settings.set(checksum_key, checksum)
cache.set(cache_prefix, data, 3600 * 4)
resp = HttpResponse(data, content_type='text/javascript')
resp._csp_ignore = True
resp['Access-Control-Allow-Origin'] = '*'

7
src/pretix/settings.py
View File

@@ -888,3 +888,10 @@ FILE_UPLOAD_MAX_SIZE_EMAIL_AUTO_ATTACHMENT = 1024 * 1024 * config.getint("pretix
FILE_UPLOAD_MAX_SIZE_OTHER = 1024 * 1024 * config.getint("pretix_file_upload", "max_size_other", fallback=10)
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
VITE_DEV_SERVER_PORT = 5173
VITE_DEV_SERVER = f"http://localhost:{VITE_DEV_SERVER_PORT}"
VITE_DEV_MODE = DEBUG
VITE_IGNORE = False # Used to ignore `collectstatic`/`rebuild`
PRETIX_WIDGET_VITE = os.environ.get('PRETIX_WIDGET_VITE', '') not in ('', '0')

6430
src/pretix/static/npm_dir/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
src/pretix/static/npm_dir/package.json
View File

@@ -1,16 +0,0 @@
{
"name": "pretix",
"version": "0.0.0",
"private": true,
"scripts": {},
"dependencies": {
"@babel/core": "^7.28.5",
"@babel/preset-env": "^7.29.3",
"@rollup/plugin-babel": "^6.1.0",
"@rollup/plugin-node-resolve": "^16.0.3",
"vue": "^2.7.16",
"rollup": "^2.79.1",
"rollup-plugin-vue": "^5.0.1",
"vue-template-compiler": "^2.7.16"
}
}

23
src/pretix/static/npm_dir/rollup.config.js
View File

@@ -1,23 +0,0 @@
import vue from 'rollup-plugin-vue'
import { getBabelOutputPlugin } from '@rollup/plugin-babel'
export default {
output: {
format: 'iife',
exports: 'named',
},
plugins: [
getBabelOutputPlugin({
presets: ['@babel/preset-env'],
// Running babel on iife output is apparently discouraged since it can lead to global
// variable leaks. Since we didn't get it to work on inputs, let's take that risk.
// (In our tests, it did not leak anything.)
allowAllFormats: true
}),
vue({
css: true,
compileTemplate: true,
needMap: false,
}),
],
};

318
src/pretix/static/pretixcontrol/js/ui/checkinrules.js
View File

@@ -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
View 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>

654
src/pretix/static/pretixcontrol/js/ui/checkinrules/checkin-rule.vue
View File

@@ -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 = [];
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']
}
this.$set(this.rule, event.target.value, current_val);
this.$delete(this.rule, current_op);
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 (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);
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 {
this.$set(this.rule[current_op][0], "var", event.target.value);
props.rule[currentOp][0].var = 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 if (VARS[target.value]?.type === 'int_by_datetime') {
delete props.rule[currentOp]
props.rule['!!'] = [{ [target.value]: [{ buildTime: [null, null] }] }]
} else {
this.$delete(this.rule, current_op);
this.$set(this.rule, "!!", [{"var": event.target.value}]);
delete props.rule[currentOp]
props.rule['!!'] = [{ var: 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));
}
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 {
this.$set(this.rule[this.operator], 1, parseInt(event.target.value));
props.rule[operator.value][1] = val
}
},
setTimeTolerance: function (event) {
if (this.rule[this.operator].length === 2) {
this.rule[this.operator].push(parseInt(event.target.value));
}
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 {
this.$set(this.rule[this.operator], 2, parseInt(event.target.value));
props.rule[operator.value][2] = val
}
},
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);
}
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 (this.rule[this.operator].length === 1) {
this.rule[this.operator].push(time);
if (props.rule[operator.value].length === 1) {
props.rule[operator.value].push(time)
} else {
this.$set(this.rule[this.operator], 1, time);
props.rule[operator.value][1] = time
}
if (event.target.value === "custom") {
this.$set(this.rule[this.operator], 2, 0);
if (val === 'custom') {
props.rule[operator.value][2] = 0
}
}
},
setTimeValue: function (val) {
if (this.vartype === "int_by_datetime") {
this.$set(this.rule[this.operator][0][this.variable][0]["buildTime"], 1, val);
}
function setTimeValue (val: string) {
if (vartype.value === 'int_by_datetime') {
props.rule[operator.value][0][variable.value][0]['buildTime'][1] = val
} else {
this.$set(this.rule[this.operator][1]["buildTime"], 1, val);
props.rule[operator.value][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);
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 {
this.$set(this.rule[this.operator], 1, products);
props.rule[operator.value][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);
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 {
this.$set(this.rule[this.operator], 1, products);
props.rule[operator.value][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);
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 {
this.$set(this.rule[this.operator], 1, products);
props.rule[operator.value][1] = products
}
},
setRightOperandEnum: function (event) {
if (this.rule[this.operator].length === 1) {
this.rule[this.operator].push(event.target.value);
}
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 {
this.$set(this.rule[this.operator], 1, event.target.value);
props.rule[operator.value][1] = val
}
},
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);
},
}
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>

44
src/pretix/static/pretixcontrol/js/ui/checkinrules/checkin-rules-editor.vue
View File

@@ -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>

305
src/pretix/static/pretixcontrol/js/ui/checkinrules/checkin-rules-visualization.vue
View File

@@ -1,51 +1,39 @@
<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() {
<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { rules } from './django-interop'
import VizNode from './viz-node.vue'
declare const d3: any
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 }))
const boxWidth = 300
const boxHeight = 62
const paddingX = 50
const marginX = 50
const marginY = 20
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".
*
@@ -76,18 +64,19 @@ export default {
* \ /
* --- D ---
*/
const graph = {
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) => { // returns [heads, tails]
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()
graph.nodes_by_id[node_id] = {
graphData.nodes_by_id[node_id] = {
rule: rule,
column: -1,
children: [],
@@ -98,16 +87,16 @@ export default {
const operator = Object.keys(rule)[0]
const operands = rule[operator]
if (operator === "and") {
let children = []
let tails = null
if (operator === 'and') {
let children: string[] = []
let tails: string[] | null = 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]
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) {
@@ -115,141 +104,173 @@ export default {
}
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)
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()
graph.nodes_by_id[node_id] = {
graphData.nodes_by_id[node_id] = {
rule: rule,
column: -1,
children: [],
}
return [[node_id], [node_id]]
}
}
graph.children = _add_to_graph(JSON.parse(JSON.stringify(this.$root.rules)))[0]
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, mincol) => {
for (let node of nodes) {
const _set_column_to_min = (nodes: GraphNode[], mincol: number) => {
for (const 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)
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(graph.children.map(nid => graph.nodes_by_id[nid]), 0)
_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, offset) => {
if (typeof node.y === "undefined") {
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 (let cid of node.children) {
used += Math.max(0, _set_y(graph.nodes_by_id[cid], offset + used) - 1)
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(graph, 0)
_set_y(graphData, 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)
graphData.height = 1
for (const node of [...Object.values(graphData.nodes_by_id)]) {
graphData.height = Math.max(graphData.height, (node.y ?? 0) + 1)
}
return graph
}
},
mounted() {
this.createZoom()
},
created() {
window.addEventListener('resize', this.createZoom)
},
destroyed() {
window.removeEventListener('resize', this.createZoom)
},
watch: {
maximized() {
this.$nextTick(() => {
this.createZoom()
return graphData
})
}
},
methods: {
createZoom() {
if (!this.$refs.svg) return
const viewportHeight = this.$refs.svg.clientHeight
const viewportWidth = this.$refs.svg.clientWidth
this.defaultScale = 1
const contentWidth = computed(() => {
return graph.value.columns * (boxWidth + marginX) + 2 * paddingX
})
this.zoom = d3
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(this.defaultScale * 0.5, 1), Math.max(5, this.contentHeight / viewportHeight, this.contentWidth / viewportWidth)])
.scaleExtent([Math.min(defaultScale.value * 0.5, 1), Math.max(5, contentHeight.value / viewportHeight, contentWidth.value / viewportWidth)])
.extent([[0, 0], [viewportWidth, viewportHeight]])
.filter(event => {
.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) && this.maximized
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 => {
.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) => {
this.zoomTransform = event.transform
.on('zoom', (event: any) => {
zoomTransform.value = event.transform
})
const initTransform = d3.zoomIdentity
.scale(this.defaultScale)
.translate(
0,
0
)
this.zoomTransform = initTransform
.scale(defaultScale.value)
.translate(0, 0)
zoomTransform.value = initTransform
// This sets correct d3 internal state for the initial centering
d3.select(this.$refs.svg)
.call(this.zoom.transform, initTransform)
d3.select(svg.value)
.call(zoom.value.transform, initTransform)
const svg = d3.select(this.$refs.svg).call(this.zoom)
svg.on('touchmove.zoom', null)
const svgSelection = d3.select(svg.value).call(zoom.value)
svgSelection.on('touchmove.zoom', null)
// TODO touch support
},
},
data() {
return {
maximized: false,
zoom: null,
defaultScale: 1,
zoomTransform: d3.zoomTransform({k: 1, x: 0, y: 0}),
}
}
}
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
View 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'
}
}

92
src/pretix/static/pretixcontrol/js/ui/checkinrules/datetimefield.vue
View File

@@ -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));
<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 {
$(this.$el).data("DateTimePicker").date(moment(vm.value));
$(input.value).data('DateTimePicker').date(moment(props.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)
})
onUnmounted(() => {
$(input.value)
.off()
.datetimepicker("destroy");
}
}
.datetimepicker('destroy')
})
</script>
<template lang="pug">
input.form-control(ref="input")
</template>

68
src/pretix/static/pretixcontrol/js/ui/checkinrules/django-interop.ts Normal file
View File

@@ -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
View 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)
}

60
src/pretix/static/pretixcontrol/js/ui/checkinrules/jsonlogic-boolalg.js
View File

@@ -1,19 +1,19 @@
function convert_to_dnf(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) {
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) {
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)
@@ -22,17 +22,17 @@ function convert_to_dnf(rules) {
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])})
let or_operands = []
for (let dval of arg_to_distribute['or']) {
or_operands.push({ and: other_args.concat([dval]) })
}
return {
"or": or_operands
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")
} else if (operator === '!' || operator === '!!' || operator === '?:' || operator === 'if') {
console.warn('Operator ' + operator + ' currently unsupported by convert_to_dnf')
return r
} else {
return r
@@ -41,35 +41,35 @@ function convert_to_dnf(rules) {
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)) {
if (typeof r !== 'object' || Array.isArray(r)) {
return r
}
var operator = Object.keys(r)[0]
var values = r[operator]
if (operator !== "or" && operator !== "and") {
let operator = Object.keys(r)[0]
let 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") {
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])
}
}
var result = {}
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
let 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
let operator = Object.keys(rules)[0]
let values = rules[operator]
let no_list = false
if (!Array.isArray(values)) {
values = [values]
no_list = true
@@ -77,11 +77,11 @@ function convert_to_dnf(rules) {
rules = {}
if (!no_list) {
rules[operator] = []
for (var v of values) {
rules[operator].push(convert_to_dnf(v))
for (let v of values) {
rules[operator].push(convertToDNF(v))
}
} else {
rules[operator] = convert_to_dnf(values[0])
rules[operator] = convertToDNF(values[0])
}
if (JSON.stringify(old_rules) === JSON.stringify(rules)) { // Let's hope this is good enough...
break

165
src/pretix/static/pretixcontrol/js/ui/checkinrules/lookup-select2.vue
View File

@@ -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);
<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[]
}
$(vm.$el).trigger("change");
},
opts: function () {
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",
theme: 'bootstrap',
delay: 100,
width: '100%',
multiple: true,
allowClear: this.required,
language: $("body").attr("data-select2-locale"),
allowClear: props.required,
language: $('body').attr('data-select2-locale'),
ajax: {
url: this.url,
data: function (params) {
url: props.url,
data: function (params: { term: string; page?: number }) {
return {
query: params.term,
page: params.page || 1
}
}
},
templateResult: function (res) {
templateResult: function (res: { id?: string; text: string }) {
if (!res.id) {
return res.text;
return res.text
}
var $ret = $("<span>").append(
$("<span>").addClass("primary").append($("<div>").text(res.text).html())
);
return $ret;
const $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) {
}
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)) {
$(this.$el).empty();
$(select.value).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);
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)
}
}
$(this.$el).trigger("change");
$(select.value).trigger('change')
}
},
},
destroyed: function () {
$(this.$el)
})
onMounted(() => {
build()
})
onUnmounted(() => {
$(select.value)
.off()
.select2("destroy");
}
}
.select2('destroy')
})
</script>
<template lang="pug">
select(ref="select")
slot
</template>

92
src/pretix/static/pretixcontrol/js/ui/checkinrules/timefield.vue
View File

@@ -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));
<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 {
$(this.$el).data("DateTimePicker").date(vm.value);
$(input.value).data('DateTimePicker').date(props.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)
})
onUnmounted(() => {
$(input.value)
.off()
.datetimepicker("destroy");
}
}
.datetimepicker('destroy')
})
</script>
<template lang="pug">
input.form-control(ref="input")
</template>

423
src/pretix/static/pretixcontrol/js/ui/checkinrules/viz-node.vue
View File

@@ -1,140 +1,43 @@
<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
}>()
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}
@@ -144,21 +47,23 @@
C ${endX - 25} ${endY} ${endX - 25} ${endY} ${endX} ${endY}
`
})
},
checkEdge() {
const startX = this.x + this.boxWidth + 1
const startY = this.y + this.boxHeight / 2
})
const checkEdge = computed(() => {
const startX = x.value + props.boxWidth + 1
const startY = y.value + props.boxHeight / 2
return `M ${startX} ${startY} L ${startX + 25} ${startY}`
},
rootEdge() {
if (this.node.column > 0) {
})
const rootEdge = computed(() => {
if (props.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 startY = props.boxHeight / 2 + props.marginY / 2
const endX = x.value - 1
const endY = y.value + props.boxHeight / 2
return `
M ${startX} ${startY}
@@ -167,89 +72,171 @@
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) {
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(this.node)
},
nodeClass: function () {
return _p(props.node)
})
const nodeClass = computed(() => {
return {
"node": true,
"node-true": this.result === true,
"node-false": this.result === false,
node: true,
'node-true': result.value === true,
'node-false': result.value === false,
}
}
},
methods: {
df (val) {
const format = $("body").attr("data-datetimeformat")
})
function df (val: string) {
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)
}
},
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>

0
src/pretix/static/pretixpresale/widget/TODOS.md Normal file
View File

47
src/pretix/static/pretixpresale/widget/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pretix Widget</title>
<link id="widget-css" rel="stylesheet" type="text/css" crossorigin>
</head>
<body>
<div id="widget-container"></div>
<script>
{
const params = new URLSearchParams(window.location.search)
const knownParams = new Set(['type', 'host', 'org', 'event', 'mode', 'lang', 'button-text'])
const type = params.get('type') || 'widget'
const host = params.get('host') || 'http://localhost:8000'
const org = params.get('org') || 'testorg'
const event = params.get('event') || 'testevent'
const mode = params.get('mode') || 'dev'
const lang = params.get('lang') || 'de'
const baseUrl = `${host}/${org}/${event}`
document.getElementById('widget-css').href = `${baseUrl}/widget/v2.css`
const el = document.createElement(type === 'button' ? 'pretix-button' : 'pretix-widget')
el.setAttribute('event', `${baseUrl}/`)
if (type === 'button') {
el.textContent = params.get('button-text') || 'Buy tickets!'
}
for (const [key, value] of params) {
if (knownParams.has(key)) continue
el.setAttribute(key, value)
}
document.getElementById('widget-container').appendChild(el)
const script = document.createElement('script')
if (mode === 'prod') {
Object.assign(script, { type: 'text/javascript', src: `${host}/widget/v2.${lang}.js`, async: true, crossOrigin: 'anonymous' })
} else {
Object.assign(script, { type: 'module', src: '/src/main.ts' })
}
document.body.appendChild(script)
}
</script>
</body>
</html>

93
src/pretix/static/pretixpresale/widget/src/api.ts Normal file
View File

@@ -0,0 +1,93 @@
import type { Category, DayEntry, EventEntry, MetaFilterField } from '~/types'
export class ApiError extends Error {
status: number
responseUrl: string
constructor (status: number, responseUrl: string) {
super(`HTTP ${status}`)
this.status = status
this.responseUrl = responseUrl
}
}
// --- Product list ---
export interface ProductListResponse {
target_url?: string
subevent?: string | number
name?: string
frontpage_text?: string
date_range?: string
location?: string
items_by_category?: Category[]
currency?: string
display_net_prices?: boolean
voucher_explanation_text?: string
error?: string
display_add_to_cart?: boolean
waiting_list_enabled?: boolean
show_variations_expanded?: boolean
cart_exists?: boolean
vouchers_exist?: boolean
has_seating_plan?: boolean
has_seating_plan_waitinglist?: boolean
itemnum?: number
poweredby?: string
events?: EventEntry[]
has_more_events?: boolean
meta_filter_fields?: MetaFilterField[]
weeks?: DayEntry[][]
date?: string
days?: DayEntry[]
week?: [number, number]
}
export async function fetchProductList (url: string) {
const response = await fetch(url)
if (!response.ok) {
throw new ApiError(response.status, response.url)
}
return {
data: await response.json() as ProductListResponse,
responseUrl: response.url,
}
}
export interface CartResponse {
redirect?: string
cart_id?: string
success?: boolean
message?: string
has_cart?: boolean
async_id?: string
check_url?: string
}
export async function submitCart (endpoint: string, formData: FormData) {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(formData as any).toString(),
})
if (!response.ok) {
throw new ApiError(response.status, response.url)
}
return await response.json() as CartResponse
}
export async function checkAsyncTask (url: string) {
const response = await fetch(url)
if (!response.ok) {
throw new ApiError(response.status, response.url)
}
return await response.json() as CartResponse
}
export async function createCart (url: string) {
const response = await fetch(url)
if (!response.ok) {
throw new ApiError(response.status, response.url)
}
return await response.json() as CartResponse
}

67
src/pretix/static/pretixpresale/widget/src/button.ts Normal file
View File

@@ -0,0 +1,67 @@
import { createApp, type App } from 'vue'
import ButtonComponent from '~/components/Button.vue'
import { createWidgetStore, StoreKey } from '~/sharedStore'
import { makeid } from '~/utils'
import type { WidgetData } from '~/types'
export function createButtonInstance (element: Element, htmlId?: string): App {
let targetUrl = element.attributes.event.value
if (!targetUrl.match(/\/$/)) {
targetUrl += '/'
}
const widgetData: WidgetData = JSON.parse(JSON.stringify(window.PretixWidget.widget_data))
for (const attr of Array.from(element.attributes)) {
if (attr.name.match(/^data-.*$/)) {
widgetData[attr.name.replace(/^data-/, '')] = attr.value
}
}
const rawItems = element.attributes.items?.value || ''
// Parse items string (format: "item_1=2,item_3=1")
const buttonItems: { item: string; count: string }[] = []
for (const itemStr of rawItems.split(',')) {
if (itemStr.includes('=')) {
const [item, count] = itemStr.split('=')
buttonItems.push({ item, count })
}
}
const store = createWidgetStore({
targetUrl,
voucher: element.attributes.voucher?.value || null,
subevent: element.attributes.subevent?.value || null,
skipSsl: 'skip-ssl-check' in element.attributes,
disableIframe: 'disable-iframe' in element.attributes,
widgetData,
htmlId: htmlId || element.id || makeid(16),
isButton: true,
buttonItems,
buttonText: element.innerHTML,
keepCart: 'keep-cart' in element.attributes || buttonItems.length > 0,
})
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
if (mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-')) {
const attrName = mutation.attributeName.substring(5)
const attrValue = (mutation.target as Element).getAttribute(mutation.attributeName)
if (attrValue !== null) {
store.widgetData[attrName] = attrValue
}
}
}
})
const app = createApp(ButtonComponent)
app.provide(StoreKey, store)
app.config.errorHandler = (error, _vm, info) => {
console.error('[pretix-button]', info, error)
}
app.mount(element)
observer.observe(element, { attributes: true })
return app
}

153
src/pretix/static/pretixpresale/widget/src/components/AvailBox.vue Normal file
View File

@@ -0,0 +1,153 @@
<script setup lang="ts">
import { computed, ref, inject, onMounted } from 'vue'
import type { Item, Variation } from '~/types'
import { StoreKey, globalWidgetId } from '~/sharedStore'
import { STRINGS } from '~/i18n'
const props = defineProps<{
item: Item
variation?: Variation
}>()
const store = inject(StoreKey)!
const quantity = ref<HTMLInputElement>()
const avail = computed(() => props.item.has_variations ? props.variation.avail : props.item.avail)
const orderMax = computed(() => props.item.has_variations ? props.variation.order_max : props.item.order_max)
const inputName = computed(() => {
if (props.item.has_variations) {
return `variation_${props.item.id}_${props.variation.id}`
}
return `item_${props.item.id}`
})
const unavailabilityReasonMessage = computed(() => {
const reason = props.item.current_unavailability_reason || props.variation?.current_unavailability_reason
if (reason) {
return STRINGS[`unavailable_${reason}`] || reason
}
return ''
})
const voucherJumpLink = computed(() => `#${store.htmlId}-voucher-input`)
const ariaLabelledby = computed(() => `${store.htmlId}-item-label-${props.item.id}`)
const decLabel = computed(() => {
// TODO
const name = props.item.has_variations ? props.variation.value : props.item.name
return `- ${name}: ${STRINGS.quantity_dec}`
})
const incLabel = computed(() => {
const name = props.item.has_variations ? props.variation.value : props.item.name
return `+ ${name}: ${STRINGS.quantity_inc}`
})
const labelSelectItem = computed(() => {
if (props.item.has_variations) return STRINGS.select_variant.replace('%s', props.variation.value)
return STRINGS.select_item.replace('%s', props.item.name)
})
const waitingListShow = computed(() => avail.value[0] < 100 && store.waitingListEnabled && props.item.allow_waitinglist)
const waitingListUrl = computed(() => {
let u = `${store.targetUrl}w/${globalWidgetId}/waitinglist/?locale=${LANG}&item=${props.item.id}`
if (props.item.has_variations && props.variation) {
u += `&var=${props.variation.id}`
}
if (store.subevent) {
u += `&subevent=${store.subevent}`
}
u += `&widget_data=${encodeURIComponent(store.widgetDataJson)}`
u += store.consentParameter
return u
})
function onStep (e: Event) {
const target = e.target as HTMLElement
const button = target.tagName === 'BUTTON' ? target : target.closest('button')
if (!button || !quantity.value) return
const step = parseFloat(button.getAttribute('data-step') || '0')
const input = quantity.value
const min = parseFloat(input.min) || 0
const max = parseFloat(input.max) || Number.MAX_SAFE_INTEGER
const currentValue = parseInt(input.value || '0')
input.value = String(Math.max(min, Math.min(max, currentValue + step)))
input.dispatchEvent(new CustomEvent('change', { bubbles: true }))
}
onMounted(() => {
// Auto-select first item if single item with no variations
if (
!store.cartExists
&& store.itemnum === 1
&& (!store.categories[0]?.items[0]?.has_variations || store.categories[0]?.items[0]?.variations.length < 2)
&& !store.hasSeatingPlan
&& quantity.value
) {
quantity.value.value = '1'
if (orderMax.value === 1 && quantity.value.type === 'checkbox') {
;(quantity.value as HTMLInputElement).checked = true
}
}
})
</script>
<template lang="pug">
.pretix-widget-availability-box
.pretix-widget-availability-unavailable(v-if="item.current_unavailability_reason === 'require_voucher'")
small
a(:href="voucherJumpLink", :aria-describedby="ariaLabelledby") {{ unavailabilityReasonMessage }}
.pretix-widget-availability-unavailable(v-else-if="unavailabilityReasonMessage")
small {{ unavailabilityReasonMessage }}
.pretix-widget-availability-unavailable(v-else-if="avail[0] < 100 && avail[0] > 10") {{ STRINGS.reserved }}
.pretix-widget-availability-gone(v-else-if="avail[0] <= 10") {{ STRINGS.sold_out }}
.pretix-widget-waiting-list-link(v-if="waitingListShow && !unavailabilityReasonMessage")
a(:href="waitingListUrl", target="_blank", @click="$root.open_link_in_frame") {{ STRINGS.waiting_list }}
.pretix-widget-availability-available(v-if="!unavailabilityReasonMessage && avail[0] === 100")
label.pretix-widget-item-count-single-label.pretix-widget-btn-checkbox(v-if="orderMax === 1")
input(
ref="quantity",
type="checkbox",
value="1",
:name="inputName",
:aria-label="labelSelectItem"
)
span.pretix-widget-icon-cart(aria-hidden="true")
| {{ STRINGS.select }}
.pretix-widget-item-count-group(v-else, role="group", :aria-label="item.name")
button.pretix-widget-btn-default.pretix-widget-item-count-dec(
type="button",
data-step="-1",
:data-controls="`input_${inputName}`",
:aria-label="decLabel",
@click.prevent.stop="onStep"
)
span -
input.pretix-widget-item-count-multiple(
:id="`input_${inputName}`",
ref="quantity",
type="number",
inputmode="numeric",
pattern="\\d*",
placeholder="0",
min="0",
:max="orderMax",
:name="inputName",
:aria-labelledby="ariaLabelledby"
)
button.pretix-widget-btn-default.pretix-widget-item-count-inc(
type="button",
data-step="1",
:data-controls="`input_${inputName}`",
:aria-label="incLabel",
@click.prevent.stop="onStep"
)
span +
</template>
<style lang="sass">
</style>

54
src/pretix/static/pretixpresale/widget/src/components/Button.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import { StoreKey } from '~/sharedStore'
import Overlay from './Overlay.vue'
const lang = LANG // we need this so the template sees the variable
const store = inject(StoreKey)!
const form = ref<HTMLFormElement>()
const formMethod = computed(() => {
if (!store.useIframe && store.isButton && store.items.length === 0) {
return 'get'
}
return 'post'
})
function handleBuy (event: Event) {
if (form.value) {
const formData = new FormData(form.value)
store.buy(formData, event)
}
}
defineExpose({
form,
buy: handleBuy,
})
</script>
<template lang="pug">
.pretix-widget-wrapper
.pretix-widget-button-container
form(ref="form", :method="formMethod", :action="store.formAction", :target="store.formTarget")
input(v-if="store.voucherCode", type="hidden", name="_voucher_code", :value="store.voucherCode")
input(v-if="store.voucherCode", type="hidden", name="voucher", :value="store.voucherCode")
input(type="hidden", name="subevent", :value="store.subevent")
input(type="hidden", name="locale", :value="lang")
input(type="hidden", name="widget_data", :value="store.widgetDataJson")
input(v-if="store.consentParameterValue", type="hidden", name="consent", :value="store.consentParameterValue")
input(
v-for="item in store.items",
:key="item.item",
type="hidden",
:name="item.item",
:value="item.count"
)
button.pretix-button(@click="handleBuy", v-html="store.buttonText")
.pretix-widget-clear
Overlay
</template>
<style lang="sass">
</style>

23
src/pretix/static/pretixpresale/widget/src/components/Category.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { Category } from '~/types'
import Item from './Item.vue'
defineProps<{
category: Category
}>()
</script>
<template lang="pug">
.pretix-widget-category(:data-id="category.id")
h3.pretix-widget-category-name(v-if="category.name") {{ category.name }}
.pretix-widget-category-description(v-if="category.description", v-html="category.description")
.pretix-widget-category-items
Item(
v-for="item in category.items",
:key="item.id",
:item="item",
:category="category"
)
</template>
<style lang="sass">
</style>

118
src/pretix/static/pretixpresale/widget/src/components/EventCalendar.vue Normal file
View File

@@ -0,0 +1,118 @@
<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import { padNumber } from '~/utils'
import EventCalendarRow from './EventCalendarRow.vue'
import EventListFilterForm from './EventListFilterForm.vue'
defineProps<{
mobile: boolean
}>()
const store = inject(StoreKey)!
const calendar = ref<HTMLDivElement>()
const displayEventInfo = computed(() => store.displayEventInfo || (store.displayEventInfo === null && store.parentStack.length > 0))
const monthname = computed(() => {
// TODO proper date formatting?
if (!store.date) return ''
const monthNum = store.date.substr(5, 2)
const year = store.date.substr(0, 4)
return `${STRINGS.months[monthNum]} ${year}`
})
const id = computed(() => `${store.htmlId}-event-calendar-table`)
const ariaLabelledby = computed(() => `${store.htmlId}-event-calendar-table-label`)
function backToList () {
// TODO should be in store
store.weeks = null
store.view = 'events'
store.name = null
store.frontpageText = null
}
function prevmonth () {
if (!store.date) return
let curMonth = parseInt(store.date.substr(5, 2))
let curYear = parseInt(store.date.substr(0, 4))
curMonth--
if (curMonth < 1) {
curMonth = 12
curYear--
}
store.date = `${curYear}-${padNumber(curMonth, 2)}-01`
store.loading++
store.reload({ focus: `#${id.value}` })
}
function nextmonth () {
if (!store.date) return
let curMonth = parseInt(store.date.substr(5, 2))
let curYear = parseInt(store.date.substr(0, 4))
curMonth++
if (curMonth > 12) {
curMonth = 1
curYear++
}
store.date = `${curYear}-${padNumber(curMonth, 2)}-01`
store.loading++
store.reload({ focus: `#${id.value}` })
}
</script>
<template lang="pug">
.pretix-widget-event-calendar(ref="calendar")
//- Back navigation
.pretix-widget-back(v-if="store.events !== null")
a(href="#", role="button", @click.prevent.stop="backToList")
| &lsaquo; {{ STRINGS.back }}
//- Headline
.pretix-widget-event-header(v-if="displayEventInfo")
strong {{ store.name }}
.pretix-widget-event-description(
v-if="displayEventInfo && store.frontpageText",
v-html="store.frontpageText"
)
//- Filter
EventListFilterForm(v-if="!store.disableFilters && store.metaFilterFields.length > 0")
//- Calendar navigation
.pretix-widget-event-calendar-head
a.pretix-widget-event-calendar-previous-month(href="#", @click.prevent.stop="prevmonth")
| &laquo; {{ STRINGS.previous_month }}
|
strong(:id="ariaLabelledby") {{ monthname }}
|
a.pretix-widget-event-calendar-next-month(href="#", @click.prevent.stop="nextmonth")
| {{ STRINGS.next_month }} &raquo;
//- Calendar
table.pretix-widget-event-calendar-table(
:id="id",
tabindex="0",
:aria-labelledby="ariaLabelledby"
)
thead
tr
th(:aria-label="STRINGS.days.MONDAY") {{ STRINGS.days.MO }}
th(:aria-label="STRINGS.days.TUESDAY") {{ STRINGS.days.TU }}
th(:aria-label="STRINGS.days.WEDNESDAY") {{ STRINGS.days.WE }}
th(:aria-label="STRINGS.days.THURSDAY") {{ STRINGS.days.TH }}
th(:aria-label="STRINGS.days.FRIDAY") {{ STRINGS.days.FR }}
th(:aria-label="STRINGS.days.SATURDAY") {{ STRINGS.days.SA }}
th(:aria-label="STRINGS.days.SUNDAY") {{ STRINGS.days.SU }}
tbody
EventCalendarRow(
v-for="(week, idx) in store.weeks",
:key="idx",
:week="week",
:mobile="mobile"
)
</template>
<style lang="sass">
</style>

120
src/pretix/static/pretixpresale/widget/src/components/EventCalendarCell.vue Normal file
View File

@@ -0,0 +1,120 @@
<script setup lang="ts">
import { computed, inject, ref, onMounted, watch } from 'vue'
import type { DayEntry } from '~/types'
import { StoreKey } from '~/sharedStore'
import EventCalendarEvent from './EventCalendarEvent.vue'
const props = defineProps<{
day: DayEntry | null
mobile: boolean
}>()
const store = inject(StoreKey)!
const cellEl = ref<HTMLTableCellElement>()
const daynum = computed(() => {
if (!props.day) return ''
return props.day.date.substr(8)
})
const dateStr = computed(() => props.day ? new Date(props.day.date).toLocaleDateString() : '')
const role = computed(() => !props.day || !props.day.events.length || !props.mobile ? 'cell' : 'button')
const tabindex = computed(() => role.value === 'button' ? '0' : '-1')
const classObject = computed(() => {
const o: Record<string, boolean> = {}
if (props.day && props.day.events.length > 0) {
o['pretix-widget-has-events'] = true // TODO static
let best = 'red'
let allLow = true
// TODO decopypasta
for (const ev of props.day.events) {
if (ev.availability.color === 'green') {
best = 'green'
if (ev.availability.reason !== 'low') {
allLow = false
}
} else if (ev.availability.color === 'orange' && best !== 'green') {
best = 'orange'
}
}
o[`pretix-widget-day-availability-${best}`] = true
if (best === 'green' && allLow) {
o['pretix-widget-day-availability-low'] = true
}
}
return o
})
function selectDay (e: Event) {
if (!props.day || !props.day.events.length || !props.mobile) return
e.preventDefault()
e.stopPropagation()
// TODO decopypasta
if (props.day.events.length === 1) {
const ev = props.day.events[0]
store.parentStack.push(store.targetUrl)
store.targetUrl = ev.event_url
store.error = null
store.subevent = ev.subevent ?? null
store.loading++
store.reload()
} else {
store.events = props.day.events
store.view = 'events'
}
}
function onKeyDown (e: KeyboardEvent) {
const keyDown = e.key ?? e.keyCode
if (keyDown === 'Enter' || keyDown === 13 || ['Spacebar', ' '].includes(keyDown as string) || keyDown === 32) {
// (prevent default so the page doesn't scroll when pressing space)
e.preventDefault()
selectDay(e)
}
}
function attachListeners () {
if (role.value === 'button' && cellEl.value) {
cellEl.value.addEventListener('click', selectDay)
cellEl.value.addEventListener('keydown', onKeyDown)
}
}
function detachListeners () {
if (cellEl.value) {
cellEl.value.removeEventListener('click', selectDay)
cellEl.value.removeEventListener('keydown', onKeyDown)
}
}
onMounted(() => {
attachListeners()
})
// TODO why different from old version?
watch(role, (newValue, oldValue) => {
if (newValue === 'button' && oldValue !== 'button') {
attachListeners()
} else if (newValue !== 'button' && oldValue === 'button') {
detachListeners()
}
})
</script>
<template lang="pug">
td(
ref="cellEl",
:class="classObject",
:role="role",
:tabindex="tabindex",
:aria-label="dateStr"
)
.pretix-widget-event-calendar-day(v-if="day", :aria-label="dateStr") {{ daynum }}
.pretix-widget-event-calendar-events(v-if="day")
EventCalendarEvent(v-for="e in day.events", :key="e.event_url", :event="e")
</template>
<style lang="sass">
</style>

45
src/pretix/static/pretixpresale/widget/src/components/EventCalendarEvent.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { EventEntry } from '~/types'
import { StoreKey } from '~/sharedStore'
const props = defineProps<{
event: EventEntry
describedby?: string
}>()
const store = inject(StoreKey)!
const classObject = computed(() => {
const o: Record<string, boolean> = {
'pretix-widget-event-calendar-event': true,
}
o[`pretix-widget-event-availability-${props.event.availability.color}`] = true
if (props.event.availability.reason) {
o[`pretix-widget-event-availability-${props.event.availability.reason}`] = true
}
return o
})
function select () {
store.parentStack.push(store.targetUrl)
store.targetUrl = props.event.event_url
store.error = null
store.subevent = props.event.subevent ?? null
store.loading++
store.reload()
}
</script>
<template lang="pug">
a.pretix-widget-event-calendar-event(
href="#",
:class="classObject",
:aria-describedby="describedby",
@click.prevent.stop="select"
)
strong.pretix-widget-event-calendar-event-name {{ event.name }}
.pretix-widget-event-calendar-event-date(v-if="!event.continued && event.time") {{ event.time }}
.pretix-widget-event-calendar-event-availability(v-if="!event.continued && event.availability.text") {{ event.availability.text }}
</template>
<style lang="sass">
</style>

15
src/pretix/static/pretixpresale/widget/src/components/EventCalendarRow.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import type { DayEntry } from '~/types'
import EventCalendarCell from './EventCalendarCell.vue'
defineProps<{
week: (DayEntry | null)[]
mobile: boolean
}>()
</script>
<template lang="pug">
tr
EventCalendarCell(v-for="(d, idx) in week", :key="idx", :day="d", :mobile="mobile")
</template>
<style lang="sass">
</style>

237
src/pretix/static/pretixpresale/widget/src/components/EventForm.vue Normal file
View File

@@ -0,0 +1,237 @@
<script setup lang="ts">
import { computed, inject, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import Category from './Category.vue'
const store = inject(StoreKey)!
const form = ref<HTMLFormElement>()
const voucherinput = ref<HTMLInputElement>()
const isItemsSelected = ref(false)
const localVoucher = ref('')
const idVoucherInput = computed(() => `${store.htmlId}-voucher-input`)
const ariaLabelledby = computed(() => `${store.htmlId}-voucher-headline`)
const displayEventInfo = computed(() => store.displayEventInfo || (store.displayEventInfo === null && (store.events || store.weeks || store.days)))
const idCartExistsMsg = computed(() => `${store.htmlId}-cart-exists`)
const buyLabel = computed(() => {
let allFree = true
for (const cat of store.categories) {
for (const item of cat.items) {
for (const v of item.variations) {
if (v.price.gross !== '0.00') {
allFree = false
break
}
}
if ((item.variations.length === 0 && item.price.gross !== '0.00') || item.mandatory_priced_addons) {
allFree = false
break
}
}
if (!allFree) break
}
return allFree ? STRINGS.register : STRINGS.buy
})
const hiddenParams = computed(() => {
const params = new URL(store.getVoucherFormTarget()).searchParams
params.delete('iframe')
params.delete('take_cart_id')
return [...params.entries()]
})
const showVoucherForm = computed(() => store.vouchersExist && !store.disableVouchers && !store.voucherCode)
async function backToList () {
store.targetUrl = store.parentStack.pop() || store.targetUrl
store.error = null
if (!store.subevent) {
// reset if we are not in a series
store.name = null
store.frontpageText = null
}
store.subevent = null
store.offset = 0
store.appendEvents = false
store.triggerLoadCallback()
if (store.events !== undefined && store.events !== null) {
store.view = 'events'
} else if (store.days !== undefined && store.days !== null) {
store.view = 'days'
} else {
store.view = 'weeks'
}
// wait for redraw, then focus content element for better a11y
const rootEl = form.value?.closest('.pretix-widget-wrapper') as HTMLElement | null
await nextTick()
rootEl?.focus()
}
function calcItemsSelected () {
if (!form.value) return
const checkboxes = form.value.querySelectorAll<HTMLInputElement>('input[type=checkbox], input[type=radio]')
const hasChecked = Array.from(checkboxes).some((el) => el.checked)
const numberInputs = form.value.querySelectorAll<HTMLInputElement>('.pretix-widget-item-count-group input')
const hasQuantity = Array.from(numberInputs).some((el) => parseInt(el.value || '0') > 0)
isItemsSelected.value = hasChecked || hasQuantity
}
function _focusVoucherField () {
voucherinput.value?.focus()
}
function handleBuy (event: Event) {
if (form.value) {
const formData = new FormData(form.value)
store.buy(formData, event)
}
}
function handleRedeem (event: Event) {
store.redeem(localVoucher.value, event)
}
onMounted(() => {
if (form.value) {
form.value.addEventListener('change', calcItemsSelected)
}
})
onBeforeUnmount(() => {
if (form.value) {
form.value.removeEventListener('change', calcItemsSelected)
}
})
watch(() => store.overlay?.frameShown, (newValue) => {
if (!newValue && form.value) {
form.value.reset()
calcItemsSelected()
}
})
</script>
<template lang="pug">
.pretix-widget-event-form
//- Back navigation
.pretix-widget-event-list-back(v-if="store.events || store.weeks || store.days")
a(v-if="!store.subevent", href="#", rel="back", @click.prevent.stop="backToList")
| &lsaquo; {{ STRINGS.back_to_list }}
a(v-if="store.subevent", href="#", rel="back", @click.prevent.stop="backToList")
| &lsaquo; {{ STRINGS.back_to_dates }}
//- Event name
.pretix-widget-event-header(v-if="displayEventInfo")
strong(role="heading", aria-level="2") {{ store.name }}
//- Date range
.pretix-widget-event-details(v-if="displayEventInfo && store.dateRange") {{ store.dateRange }}
//- Location
.pretix-widget-event-location(
v-if="displayEventInfo && store.location",
v-html="store.location"
)
//- Description
.pretix-widget-event-description(
v-if="displayEventInfo && store.frontpageText",
v-html="store.frontpageText"
)
//- Form start
form(
ref="form",
method="post",
:action="store.formAction",
:target="store.formTarget",
@submit="handleBuy"
)
input(v-if="store.voucherCode", type="hidden", name="_voucher_code", :value="store.voucherCode")
input(type="hidden", name="subevent", :value="store.subevent")
input(type="hidden", name="widget_data", :value="store.widgetDataJson")
input(v-if="store.consentParameterValue", type="hidden", name="consent", :value="store.consentParameterValue")
//- Error message
.pretix-widget-error-message(v-if="store.error") {{ store.error }}
//- Resume cart
.pretix-widget-info-message.pretix-widget-clickable(v-if="store.cartExists")
span(:id="idCartExistsMsg") {{ STRINGS.cart_exists }}
button.pretix-widget-resume-button(
type="button",
:aria-describedby="idCartExistsMsg",
@click.prevent.stop="store.resume()"
) {{ STRINGS.resume_checkout }}
//- Seating plan
.pretix-widget-seating-link-wrapper(v-if="store.hasSeatingPlan")
button.pretix-widget-seating-link(type="button", @click.prevent.stop="store.startseating()")
| {{ STRINGS.show_seating }}
//- Waiting list for seating plan
.pretix-widget-seating-waitinglist(v-if="store.hasSeatingPlan && store.hasSeatingPlanWaitinglist")
.pretix-widget-seating-waitinglist-text {{ STRINGS.seating_plan_waiting_list }}
.pretix-widget-seating-waitinglist-button-wrap
button.pretix-widget-seating-waitinglist-button(@click.prevent.stop="store.startwaiting()")
| {{ STRINGS.waiting_list }}
.pretix-widget-clear
//- Actual Product list
Category(v-for="category in store.categories", :key="category.id", :category="category")
//- Buy button
.pretix-widget-action(v-if="store.displayAddToCart")
button(
v-if="!store.cartExists || isItemsSelected",
type="submit",
:aria-describedby="idCartExistsMsg"
) {{ buyLabel }}
button(
v-else,
type="button",
:aria-describedby="idCartExistsMsg",
@click.prevent.stop="store.resume()"
) {{ STRINGS.resume_checkout }}
//- Voucher form
form(
v-if="showVoucherForm",
method="get",
:action="store.getVoucherFormTarget()",
target="_blank"
)
.pretix-widget-voucher
h3.pretix-widget-voucher-headline(:id="ariaLabelledby") {{ STRINGS.redeem_voucher }}
.pretix-widget-voucher-text(
v-if="store.voucherExplanationText",
v-html="store.voucherExplanationText"
)
.pretix-widget-voucher-input-wrap
input.pretix-widget-voucher-input(
:id="idVoucherInput",
ref="voucherinput",
v-model="localVoucher",
type="text",
name="voucher",
:placeholder="STRINGS.voucher_code",
:aria-labelledby="ariaLabelledby"
)
input(
v-for="p in hiddenParams",
:key="p[0]",
type="hidden",
:name="p[0]",
:value="p[1]"
)
.pretix-widget-voucher-button-wrap
button(@click="handleRedeem") {{ STRINGS.redeem }}
.pretix-widget-clear
</template>
<style lang="sass">
</style>

69
src/pretix/static/pretixpresale/widget/src/components/EventList.vue Normal file
View File

@@ -0,0 +1,69 @@
<script setup lang="ts">
import { computed, inject, nextTick } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import EventListEntry from './EventListEntry.vue'
import EventListFilterForm from './EventListFilterForm.vue'
const store = inject(StoreKey)!
const displayEventInfo = computed(() => store.displayEventInfo || (store.displayEventInfo === null && store.parentStack.length > 0))
async function backToCalendar (event: MouseEvent) {
// make sure to always focus content element
await nextTick()
const rootEl = (event.target as HTMLElement).closest('.pretix-widget-wrapper') as HTMLElement | null
rootEl?.focus()
store.offset = 0
store.appendEvents = false
if (store.weeks) {
store.events = null
store.view = 'weeks'
store.name = null
store.frontpageText = null
} else {
store.loading++
store.targetUrl = store.parentStack.pop() || store.targetUrl
store.error = null
store.reload()
}
}
function loadMore () {
store.appendEvents = true
store.offset += 50
store.loading++
store.reload()
}
console.log(store)
</script>
<template lang="pug">
.pretix-widget-event-list
.pretix-widget-back(v-if="store.weeks || store.parentStack.length > 0")
a(href="#", rel="prev", @click.prevent.stop="backToCalendar")
| &lsaquo; {{ STRINGS.back }}
.pretix-widget-event-header(v-if="displayEventInfo")
strong {{ store.name }}
.pretix-widget-event-description(
v-if="displayEventInfo && store.frontpageText",
v-html="store.frontpageText"
)
EventListFilterForm(v-if="!store.disableFilters && store.metaFilterFields.length > 0")
EventListEntry(
v-for="event in store.events",
:key="event.event_url",
:event="event"
)
p.pretix-widget-event-list-load-more(v-if="store.hasMoreEvents")
button(@click.prevent.stop="loadMore") {{ STRINGS.load_more }}
</template>
<style lang="sass">
</style>

44
src/pretix/static/pretixpresale/widget/src/components/EventListEntry.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { EventEntry } from '~/types'
import { StoreKey } from '~/sharedStore'
const props = defineProps<{
event: EventEntry
}>()
const store = inject(StoreKey)!
const classObject = computed(() => {
const o: Record<string, boolean> = {
'pretix-widget-event-list-entry': true,
}
o[`pretix-widget-event-availability-${props.event.availability.color}`] = true
if (props.event.availability.reason) {
o[`pretix-widget-event-availability-${props.event.availability.reason}`] = true
}
return o
})
const location = computed(() => props.event.location.replace(/\s*\n\s*/g, ', '))
function select () {
store.parentStack.push(store.targetUrl)
store.targetUrl = props.event.event_url
store.error = null
store.subevent = props.event.subevent ?? null
store.loading++
store.reload()
}
</script>
<template lang="pug">
a.pretix-widget-event-list-entry(href="#", :class="classObject", @click.prevent.stop="select")
.pretix-widget-event-list-entry-name {{ event.name }}
.pretix-widget-event-list-entry-date {{ event.date_range }}
//- hidden by css for now, but used by a few people
.pretix-widget-event-list-entry-location {{ location }}
.pretix-widget-event-list-entry-availability
span {{ event.availability.text }}
</template>
<style lang="sass">
</style>

26
src/pretix/static/pretixpresale/widget/src/components/EventListFilterField.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { MetaFilterField } from '~/types'
import { StoreKey, globalWidgetId } from '~/sharedStore'
const props = defineProps<{
field: MetaFilterField
}>()
const store = inject(StoreKey)!
const id = computed(() => `${globalWidgetId}_${props.field.key}`)
const currentValue = computed(() => {
const filterParams = new URLSearchParams(store.filter || '')
return filterParams.get(props.field.key) || ''
})
</script>
<template lang="pug">
.pretix-widget-event-list-filter-field
label(:for="id") {{ field.label }}
select(:id="id", :name="field.key", :value="currentValue")
option(v-for="choice in field.choices", :key="choice[0]", :value="choice[0]") {{ choice[1] }}
</template>
<style lang="sass">
</style>

40
src/pretix/static/pretixpresale/widget/src/components/EventListFilterForm.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
import { inject, ref } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import EventListFilterField from './EventListFilterField.vue'
const store = inject(StoreKey)!
const filterform = ref<HTMLFormElement>()
function onSubmit (e: Event) {
e.preventDefault()
if (!filterform.value) return
const formData = new FormData(filterform.value)
const filterParams = new URLSearchParams()
formData.forEach((value, key) => {
if (value !== '') {
filterParams.set(key, value as string)
}
})
store.filter = filterParams.toString()
store.loading++
store.reload()
}
</script>
<template lang="pug">
form.pretix-widget-event-list-filter-form(ref="filterform", @submit="onSubmit")
fieldset.pretix-widget-event-list-filter-fieldset
legend {{ STRINGS.filter_events_by }}
EventListFilterField(
v-for="field in store.metaFilterFields",
:key="field.key",
:field="field"
)
button {{ STRINGS.filter }}
</template>
<style lang="sass">
</style>

96
src/pretix/static/pretixpresale/widget/src/components/EventWeekCalendar.vue Normal file
View File

@@ -0,0 +1,96 @@
<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import { getISOWeeks } from '~/utils'
import EventWeekCell from './EventWeekCell.vue'
import EventListFilterForm from './EventListFilterForm.vue'
defineProps<{
mobile: boolean
}>()
const store = inject(StoreKey)!
const weekcalendar = ref<HTMLDivElement>()
const displayEventInfo = computed(() => store.displayEventInfo || (store.displayEventInfo === null && store.parentStack.length > 0))
const weekname = computed(() => {
if (!store.week) return ''
const curWeek = store.week[1]
const curYear = store.week[0]
return `${curWeek} / ${curYear}`
})
const id = computed(() => `${store.htmlId}-event-week-table`)
function backToList () {
store.weeks = null
store.name = null
store.frontpageText = null
store.view = 'events'
}
function prevweek () {
if (!store.week) return
let curWeek = store.week[1]
let curYear = store.week[0]
curWeek--
if (curWeek < 1) {
curYear--
curWeek = getISOWeeks(curYear)
}
store.week = [curYear, curWeek]
store.loading++
store.reload({ focus: `#${id.value}` })
}
function nextweek () {
if (!store.week) return
let curWeek = store.week[1]
let curYear = store.week[0]
curWeek++
if (curWeek > getISOWeeks(curYear)) {
curWeek = 1
curYear++
}
store.week = [curYear, curWeek]
store.loading++
store.reload({ focus: `#${id.value}` })
}
</script>
<template lang="pug">
.pretix-widget-event-calendar.pretix-widget-event-week-calendar(ref="weekcalendar")
//- Back navigation
.pretix-widget-back(v-if="store.events !== null")
a(href="#", role="button", @click.prevent.stop="backToList")
| &lsaquo; {{ STRINGS.back }}
//- Event header
.pretix-widget-event-header(v-if="displayEventInfo")
strong {{ store.name }}
//- Filter
EventListFilterForm(v-if="!store.disableFilters && store.metaFilterFields.length > 0")
//- Calendar navigation
.pretix-widget-event-description(
v-if="store.frontpageText && displayEventInfo",
v-html="store.frontpageText"
)
.pretix-widget-event-calendar-head
a.pretix-widget-event-calendar-previous-month(href="#", role="button", @click.prevent.stop="prevweek")
| &laquo; {{ STRINGS.previous_week }}
|
strong {{ weekname }}
|
a.pretix-widget-event-calendar-next-month(href="#", role="button", @click.prevent.stop="nextweek")
| {{ STRINGS.next_week }} &raquo;
//- Actual calendar
.pretix-widget-event-week-table(:id="id", tabindex="0", :aria-label="weekname")
.pretix-widget-event-week-col(v-for="d in store.days", :key="d?.date || ''")
EventWeekCell(:day="d", :mobile="mobile")
</template>
<style lang="sass">
</style>

75
src/pretix/static/pretixpresale/widget/src/components/EventWeekCell.vue Normal file
View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { DayEntry } from '~/types'
import { StoreKey } from '~/sharedStore'
import EventCalendarEvent from './EventCalendarEvent.vue'
const props = defineProps<{
day: DayEntry | null
mobile: boolean // TODO inject?
}>()
const store = inject(StoreKey)!
const id = computed(() => props.day ? `${store.htmlId}-${props.day.date}` : '')
const dayhead = computed(() => {
if (!props.day) return ''
return props.day.day_formatted
})
const classObject = computed(() => {
const o: Record<string, boolean> = {}
if (props.day && props.day.events.length > 0) {
o['pretix-widget-has-events'] = true
let best = 'red'
let allLow = true
for (const ev of props.day.events) {
if (ev.availability.color === 'green') {
best = 'green'
if (ev.availability.reason !== 'low') {
allLow = false
}
} else if (ev.availability.color === 'orange' && best !== 'green') {
best = 'orange'
}
}
o[`pretix-widget-day-availability-${best}`] = true
if (best === 'green' && allLow) {
o['pretix-widget-day-availability-low'] = true
}
}
return o
})
function selectDay () {
if (!props.day || !props.day.events.length || !props.mobile) return
if (props.day.events.length === 1) {
const ev = props.day.events[0]
// TODO store mutation bad
store.parentStack.push(store.targetUrl)
store.targetUrl = ev.event_url
store.error = null
store.subevent = ev.subevent ?? null
store.loading++
store.reload()
} else {
store.events = props.day.events
store.view = 'events'
}
}
</script>
<template lang="pug">
div(:class="classObject", @click.prevent.stop="selectDay")
.pretix-widget-event-calendar-day(v-if="day", :id="id") {{ dayhead }}
.pretix-widget-event-calendar-events(v-if="day")
EventCalendarEvent(
v-for="e in day.events",
:key="e.event_url",
:event="e",
:describedby="id"
)
</template>
<style lang="sass">
</style>

218
src/pretix/static/pretixpresale/widget/src/components/Item.vue Normal file
View File

@@ -0,0 +1,218 @@
<script setup lang="ts">
import { computed, inject, ref, watch, onMounted } from 'vue'
import type { Item, Category } from '~/types'
import { StoreKey } from '~/sharedStore'
import { STRINGS, interpolate } from '~/i18n'
import { floatformat } from '~/utils'
import AvailBox from './AvailBox.vue'
import PriceBox from './PriceBox.vue'
import Variation from './Variation.vue'
const props = defineProps<{
item: Item
category: Category
}>()
const store = inject(StoreKey)!
const expanded = ref(store.showVariationsExpanded)
const variations = ref<HTMLDivElement>()
const classObject = computed(() => ({
'pretix-widget-item': true,
'pretix-widget-item-with-picture': !!props.item.picture,
'pretix-widget-item-with-variations': props.item.has_variations,
}))
const varClasses = computed(() => ({
'pretix-widget-item-variations': true,
'pretix-widget-item-variations-expanded': expanded.value,
}))
const pictureAltText = computed(() => interpolate(STRINGS.image_of, [props.item.name]))
const headingLevel = computed(() => props.category.name ? '4' : '3')
const itemLabelId = computed(() => `${store.htmlId}-item-label-${props.item.id}`)
const itemDescId = computed(() => `${store.htmlId}-item-desc-${props.item.id}`)
const itemPriceId = computed(() => `${store.htmlId}-item-price-${props.item.id}`)
const ariaLabelledby = computed(() => `${itemLabelId.value} ${itemPriceId.value}`)
const minOrderStr = computed(() => interpolate(STRINGS.order_min, [props.item.order_min]))
const quotaLeftStr = computed(() => interpolate(STRINGS.quota_left, [props.item.avail[1]]))
const showToggle = computed(() => props.item.has_variations && !store.showVariationsExpanded)
// TODO dedupe?
const showPrices = computed(() => {
let hasPriced = false
let cntItems = 0
for (const cat of store.categories) {
for (const item of cat.items) {
if (item.has_variations) {
cntItems += item.variations.length
hasPriced = true
} else {
cntItems++
hasPriced = hasPriced || item.price.gross !== '0.00' || item.free_price
}
}
}
return hasPriced || cntItems > 1
})
// TODO XSS
const pricerange = computed(() => {
if (props.item.free_price) {
return interpolate(
STRINGS.price_from,
{
currency: store.currency,
price: floatformat(props.item.min_price || '0', 2),
},
true
).replace(
store.currency,
`<span class="pretix-widget-pricebox-currency">${store.currency}</span>`
)
} else if (props.item.min_price !== props.item.max_price) {
return `<span class="pretix-widget-pricebox-currency">${store.currency}</span> ${floatformat(props.item.min_price || '0', 2)} – ${floatformat(props.item.max_price || '0', 2)}`
} else if (props.item.min_price === '0.00' && props.item.max_price === '0.00') {
if (props.item.mandatory_priced_addons) {
return '\xA0' // nbsp, because an empty string would cause the HTML element to collapse
}
return STRINGS.free
} else {
return `<span class="pretix-widget-pricebox-currency">${store.currency}</span> ${floatformat(props.item.min_price || '0', 2)}`
}
})
const variationsToggleLabel = computed(() => expanded.value ? STRINGS.hide_variations : STRINGS.variations)
function expand () {
expanded.value = !expanded.value
}
function lightbox () {
if (store.overlay) {
store.overlay.lightbox = {
image: props.item.picture_fullsize || '',
description: props.item.name,
loading: true, // TODO why?
}
}
}
onMounted(() => {
if (variations.value && !expanded.value) {
variations.value.hidden = true
variations.value.addEventListener('transitionend', function (event) {
if (event.target === variations.value) {
if (variations.value) {
variations.value.hidden = !expanded.value
variations.value.style.maxHeight = 'none'
}
}
})
}
})
watch(expanded, (newValue) => {
const v = variations.value
if (!v) return
v.hidden = false
v.style.maxHeight = `${newValue ? 0 : v.scrollHeight}px`
// Vue.nextTick does not work here
setTimeout(() => {
v.style.maxHeight = `${!newValue ? 0 : v.scrollHeight}px`
}, 50)
})
</script>
<template lang="pug">
div(
:class="classObject",
:data-id="item.id",
role="group",
:aria-labelledby="ariaLabelledby",
:aria-describedby="itemDescId"
)
.pretix-widget-item-row.pretix-widget-main-item-row
//- Product description
.pretix-widget-item-info-col
a.pretix-widget-item-picture-link(
v-if="item.picture",
:href="item.picture_fullsize",
@click.prevent.stop="lightbox"
)
img.pretix-widget-item-picture(:src="item.picture", :alt="pictureAltText")
.pretix-widget-item-title-and-description
strong.pretix-widget-item-title(
:id="itemLabelId",
role="heading",
:aria-level="headingLevel"
) {{ item.name }}
.pretix-widget-item-description(
v-if="item.description",
:id="itemDescId",
v-html="item.description"
)
p.pretix-widget-item-meta(v-if="item.order_min && item.order_min > 1")
small {{ minOrderStr }}
p.pretix-widget-item-meta(
v-if="!item.has_variations && item.avail[1] !== null && item.avail[0] === 100"
)
small {{ quotaLeftStr }}
//- Price
.pretix-widget-item-price-col(:id="itemPriceId")
PriceBox(
v-if="!item.has_variations && showPrices",
:price="item.price",
:freePrice="item.free_price",
:mandatoryPricedAddons="item.mandatory_priced_addons",
:suggestedPrice="item.suggested_price",
:fieldName="`price_${item.id}`",
:originalPrice="item.original_price",
:itemId="item.id"
)
.pretix-widget-pricebox(v-if="item.has_variations && showPrices", v-html="pricerange")
span(v-if="!showPrices") &nbsp;
//- Availability
.pretix-widget-item-availability-col
button.pretix-widget-collapse-indicator(
v-if="showToggle",
type="button",
:aria-expanded="expanded ? 'true' : 'false'",
:aria-controls="`${item.id}-variants`",
:aria-describedby="itemDescId",
@click.prevent.stop="expand"
) {{ variationsToggleLabel }}
AvailBox(v-if="!item.has_variations", :item="item")
.pretix-widget-clear
//- Variations
div(
v-if="item.has_variations",
:id="`${item.id}-variants`",
ref="variations",
:class="varClasses"
)
Variation(
v-for="variation in item.variations",
:key="variation.id",
:variation="variation",
:item="item",
:category="category"
)
</template>
<style lang="sass">
</style>

231
src/pretix/static/pretixpresale/widget/src/components/Overlay.vue Normal file
View File

@@ -0,0 +1,231 @@
<script setup lang="ts">
import { computed, ref, watch, onMounted, onUnmounted, inject, nextTick } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
const store = inject(StoreKey)!
const cancelBlocked = ref(false)
const lightboxImage = ref<HTMLImageElement>()
const frameDialog = ref<HTMLDialogElement>()
const alertDialog = ref<HTMLDialogElement>()
const lightboxDialog = ref<HTMLDialogElement>()
const iframe = ref<HTMLIFrameElement>()
const closeButton = ref<HTMLButtonElement>()
const frameClasses = computed(() => ({
'pretix-widget-frame-holder': true,
'pretix-widget-frame-shown': store.overlay.frameShown || store.overlay.frameLoading,
'pretix-widget-frame-isloading': store.overlay.frameLoading,
}))
const alertClasses = computed(() => ({
'pretix-widget-alert-holder': true,
'pretix-widget-alert-shown': store.overlay.errorMessage,
}))
const lightboxClasses = computed(() => ({
'pretix-widget-lightbox-holder': true,
'pretix-widget-lightbox-shown': store.overlay.lightbox,
'pretix-widget-lightbox-isloading': store.overlay.lightbox?.loading,
}))
const cancelBlockedClasses = computed(() => ({
'pretix-widget-visibility-hidden': !cancelBlocked.value,
}))
const errorMessageId = computed(() => `${store.htmlId}-error-message`)
function onMessage (e: MessageEvent) {
if (e.data.type && e.data.type === 'pretix:widget:title') {
if (iframe.value) {
iframe.value.title = e.data.title
}
}
}
function lightboxClose () {
store.overlay.lightbox = null
}
function lightboxLoaded () {
if (store.overlay.lightbox) {
store.overlay.lightbox.loading = false
}
}
function errorClose (e: Event) {
const dialog = e.target as HTMLDialogElement
if (dialog.returnValue === 'continue' && store.overlay.errorUrlAfter) {
if (store.overlay.errorUrlAfterNewTab) {
window.open(store.overlay.errorUrlAfter)
} else {
store.overlay.frameSrc = store.overlay.errorUrlAfter
store.overlay.frameLoading = true
}
}
store.overlay.errorMessage = null
store.overlay.errorUrlAfter = null
store.overlay.errorUrlAfterNewTab = false
}
function close (e) {
if (store.overlay.frameLoading) {
// Chrome does not allow blocking dialog.cancel event more than once
// => wiggle the loading-element and re-open the modal
cancel(e)
frameDialog.value?.showModal()
return
}
store.overlay.frameShown = false
store.frameDismissed = true
store.overlay.frameSrc = ''
store.reload()
triggerCloseCallback()
}
function cancel (e: Event) {
// do not allow to cancel while frame is loading as we cannot abort the operation
if (store.overlay.frameLoading) {
e.preventDefault()
const target = e.target as HTMLElement
target.addEventListener('animationend', function () {
target.classList.remove('pretix-widget-shake-once')
}, { once: true })
target.classList.add('pretix-widget-shake-once')
cancelBlocked.value = true
}
}
function iframeLoaded () {
if (store.overlay.frameLoading) {
store.overlay.frameLoading = false
cancelBlocked.value = false
if (store.overlay.frameSrc) {
store.overlay.frameShown = true
}
}
}
function triggerCloseCallback () {
nextTick(() => {
for (const callback of (window as any).PretixWidget._closed || []) {
callback()
}
})
}
// TODO check if watchEffect is better for the following watchers
watch(() => store.overlay.lightbox, (newValue, oldValue) => {
if (!newValue) return
if (newValue.image !== oldValue?.image) {
newValue.loading = true
}
if (!oldValue) {
lightboxDialog.value?.showModal()
}
})
watch(() => store.overlay.errorMessage, (newValue, oldValue) => {
if (newValue && !oldValue) {
alertDialog.value?.showModal()
}
})
watch(() => store.overlay.frameShown, async (newValue) => {
if (!newValue) return
await nextTick()
closeButton.value?.focus()
})
watch(() => store.overlay.frameSrc, (newValue, oldValue) => {
// show loading spinner only when previously no frame_src was set
if (newValue && !oldValue) {
store.overlay.frameLoading = true
}
if (iframe.value) {
// to close and unload the iframe, frame_src can be empty -> make it valid HTML with about:blank
iframe.value.src = newValue || 'about:blank'
}
})
watch(() => store.overlay.frameLoading, (newValue) => {
if (newValue) {
if (frameDialog.value && !frameDialog.value.open) {
frameDialog.value.showModal()
}
} else {
if (!store.overlay.frameSrc && frameDialog.value?.open) { // finished loading, but no iframe to display => close
frameDialog.value.close()
}
}
})
onMounted(() => {
window.addEventListener('message', onMessage, false)
})
onUnmounted(() => {
window.removeEventListener('message', onMessage, false)
})
</script>
<template lang="pug">
Teleport(to="body")
.pretix-widget-overlay
dialog(ref="frameDialog", :class="frameClasses", :aria-label="STRINGS.checkout", @close="close", @cancel="cancel")
.pretix-widget-frame-loading(v-show="store.overlay.frameLoading")
svg(width="256", height="256", viewBox="0 0 1792 1792", xmlns="http://www.w3.org/2000/svg")
path.pretix-widget-primary-color(d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z")
p(:class="cancelBlockedClasses")
strong {{ STRINGS.cancel_blocked }}
.pretix-widget-frame-inner(v-show="store.overlay.frameShown")
form.pretix-widget-frame-close(method="dialog")
button(ref="closeButton", :aria-label="STRINGS.close_checkout", autofocus)
svg(:alt="STRINGS.close", height="16", viewBox="0 0 512 512", width="16", xmlns="http://www.w3.org/2000/svg")
path(fill="#fff", d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z")
iframe(
ref="iframe",
frameborder="0",
width="650",
height="650",
:name="store.widgetId",
src="about:blank",
allow="autoplay *; camera *; fullscreen *; payment *",
:title="STRINGS.checkout",
referrerpolicy="origin",
@load="iframeLoaded"
) Please enable frames in your browser!
dialog(ref="alertDialog", :class="alertClasses", role="alertdialog", :aria-labelledby="errorMessageId", @close="errorClose")
form.pretix-widget-alert-box(method="dialog")
p(:id="errorMessageId") {{ store.overlay.errorMessage }}
p
button(v-if="store.overlay.errorUrlAfter", value="continue", autofocus, :aria-describedby="errorMessageId")
| {{ STRINGS.continue }}
button(v-else, autofocus, :aria-describedby="errorMessageId") {{ STRINGS.close }}
transition(name="bounce")
svg.pretix-widget-alert-icon(v-if="store.overlay.errorMessage", width="64", height="64", viewBox="0 0 1792 1792", xmlns="http://www.w3.org/2000/svg")
path(style="fill:#ffffff;", d="M 599.86438,303.72882 H 1203.5254 V 1503.4576 H 599.86438 Z")
path.pretix-widget-primary-color(d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm128 1247v-190q0-14-9-23.5t-22-9.5h-192q-13 0-23 10t-10 23v190q0 13 10 23t23 10h192q13 0 22-9.5t9-23.5zm-2-344l18-621q0-12-10-18-10-8-24-8h-220q-14 0-24 8-10 6-10 18l17 621q0 10 10 17.5t24 7.5h185q14 0 23.5-7.5t10.5-17.5z")
dialog(ref="lightboxDialog", :class="lightboxClasses", role="alertdialog", @close="lightboxClose")
.pretix-widget-lightbox-loading(v-if="store.overlay.lightbox?.loading")
svg(width="256", height="256", viewBox="0 0 1792 1792", xmlns="http://www.w3.org/2000/svg")
path.pretix-widget-primary-color(d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z")
.pretix-widget-lightbox-inner(v-if="store.overlay.lightbox")
form.pretix-widget-lightbox-close(method="dialog")
button(:aria-label="STRINGS.close", autofocus)
svg(:alt="STRINGS.close", height="16", viewBox="0 0 512 512", width="16", xmlns="http://www.w3.org/2000/svg")
path(fill="#fff", d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z")
figure.pretix-widget-lightbox-image
img(
ref="lightboxImage",
:src="store.overlay.lightbox.image",
:alt="store.overlay.lightbox.description",
crossorigin,
@load="lightboxLoaded"
)
figcaption(v-if="store.overlay.lightbox.description") {{ store.overlay.lightbox.description }}
</template>
<style lang="sass">
</style>

114
src/pretix/static/pretixpresale/widget/src/components/PriceBox.vue Normal file
View File

@@ -0,0 +1,114 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { Price } from '~/types'
import { StoreKey } from '~/sharedStore'
import { STRINGS, interpolate } from '~/i18n'
import { floatformat, autofloatformat, stripHTML } from '~/utils'
const props = defineProps<{
price: Price
freePrice: boolean
fieldName: string
suggestedPrice?: Price | null
originalPrice?: string | null
mandatoryPricedAddons?: boolean
itemId: number
}>()
const store = inject(StoreKey)!
const priceBoxId = computed(() => `${store.htmlId}-item-pricebox-${props.itemId}`)
const priceDescId = computed(() => `${store.htmlId}-item-pricedesc-${props.itemId}`)
const ariaLabelledby = computed(() => `${store.htmlId}-item-label-${props.itemId} ${priceBoxId.value}`)
const displayPrice = computed(() => {
if (store.displayNetPrices) {
return floatformat(parseFloat(props.price.net), 2)
}
return floatformat(parseFloat(props.price.gross), 2)
})
const displayPriceNonlocalized = computed(() => {
if (store.displayNetPrices) {
return parseFloat(props.price.net).toFixed(2)
}
return parseFloat(props.price.gross).toFixed(2)
})
const suggestedPriceNonlocalized = computed(() => {
const price = props.suggestedPrice ?? props.price
if (store.displayNetPrices) {
return parseFloat(price.net).toFixed(2)
}
return parseFloat(price.gross).toFixed(2)
})
// TODO BAD
const originalLine = computed(() => {
if (!props.originalPrice) return ''
return `<span class="pretix-widget-pricebox-currency">${store.currency}</span> ${floatformat(parseFloat(props.originalPrice), 2)}`
})
// TODO BAD
const priceline = computed(() => {
if (props.price.gross === '0.00') {
if (props.mandatoryPricedAddons && !props.originalPrice) {
return '\u00A0' // nbsp
}
return STRINGS.free
}
return `<span class="pretix-widget-pricebox-currency">${store.currency}</span> ${displayPrice.value}`
})
const originalPriceAriaLabel = computed(() => interpolate(STRINGS.original_price, [stripHTML(originalLine.value)]))
const newPriceAriaLabel = computed(() => interpolate(STRINGS.new_price, [stripHTML(priceline.value)]))
const taxline = computed(() => {
if (store.displayNetPrices) {
if (props.price.includes_mixed_tax_rate) {
return STRINGS.tax_plus_mixed
}
return interpolate(STRINGS.tax_plus, {
rate: autofloatformat(props.price.rate, 2),
taxname: props.price.name,
}, true)
} else {
if (props.price.includes_mixed_tax_rate) {
return STRINGS.tax_incl_mixed
}
return interpolate(STRINGS.tax_incl, {
rate: autofloatformat(props.price.rate, 2),
taxname: props.price.name,
}, true)
}
})
const showTaxline = computed(() => props.price.rate !== '0.00' && props.price.gross !== '0.00')
</script>
<template lang="pug">
.pretix-widget-pricebox
span(v-if="!freePrice && !originalPrice", v-html="priceline")
span(v-if="!freePrice && originalPrice")
del.pretix-widget-pricebox-original-price(:aria-label="originalPriceAriaLabel", v-html="originalLine")
|
ins.pretix-widget-pricebox-new-price(:aria-label="newPriceAriaLabel", v-html="priceline")
div(v-if="freePrice")
span.pretix-widget-pricebox-currency(:id="priceBoxId") {{ store.currency }}
|
input.pretix-widget-pricebox-price-input(
type="number",
placeholder="0",
:min="displayPriceNonlocalized",
:value="suggestedPriceNonlocalized",
:name="fieldName",
step="any",
:aria-labelledby="ariaLabelledby",
:aria-describedby="priceDescId"
)
small.pretix-widget-pricebox-tax(v-if="showTaxline", :id="priceDescId") {{ taxline }}
</template>
<style lang="sass">
</style>

97
src/pretix/static/pretixpresale/widget/src/components/Variation.vue Normal file
View File

@@ -0,0 +1,97 @@
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { Variation, Item, Category } from '~/types'
import { StoreKey } from '~/sharedStore'
import { STRINGS, interpolate } from '~/i18n'
import AvailBox from './AvailBox.vue'
import PriceBox from './PriceBox.vue'
const props = defineProps<{
variation: Variation
item: Item
category: Category
}>()
const store = inject(StoreKey)!
const origPrice = computed(() => props.variation.original_price || props.item.original_price)
const quotaLeftStr = computed(() => interpolate(STRINGS.quota_left, [props.variation.avail[1]]))
const variationLabelId = computed(() => `${store.htmlId}-variation-label-${props.item.id}-${props.variation.id}`)
const variationDescId = computed(() => `${store.htmlId}-variation-desc-${props.item.id}-${props.variation.id}`)
const variationPriceId = computed(() => `${store.htmlId}-variation-price-${props.item.id}-${props.variation.id}`)
const ariaLabelledby = computed(() => `${variationLabelId.value} ${variationPriceId.value}`)
const headingLevel = computed(() => props.category.name ? '5' : '4')
const showQuotaLeft = computed(() => props.variation.avail[1] !== null && props.variation.avail[0] === 100)
// TODO dedupe?
const showPrices = computed(() => {
// Determine if prices should be shown
let hasPriced = false
let cntItems = 0
for (const cat of store.categories) {
for (const item of cat.items) {
if (item.has_variations) {
cntItems += item.variations.length
hasPriced = true
} else {
cntItems++
hasPriced = hasPriced || item.price.gross !== '0.00' || item.free_price
}
}
}
return hasPriced || cntItems > 1
})
</script>
<template lang="pug">
.pretix-widget-variation(
:data-id="variation.id",
role="group",
:aria-labelledby="ariaLabelledby",
:aria-describedby="variationDescId"
)
.pretix-widget-item-row
//- Variation description
.pretix-widget-item-info-col
.pretix-widget-item-title-and-description
strong.pretix-widget-item-title(
:id="variationLabelId",
role="heading",
:aria-level="headingLevel"
) {{ variation.value }}
.pretix-widget-item-description(
v-if="variation.description",
:id="variationDescId",
v-html="variation.description"
)
p.pretix-widget-item-meta(v-if="showQuotaLeft")
small {{ quotaLeftStr }}
//- Price
.pretix-widget-item-price-col(:id="variationPriceId")
PriceBox(
v-if="showPrices",
:price="variation.price",
:freePrice="item.free_price",
:originalPrice="origPrice",
:mandatoryPricedAddons="item.mandatory_priced_addons",
:suggestedPrice="variation.suggested_price",
:fieldName="`price_${item.id}_${variation.id}`",
:itemId="item.id"
)
span(v-if="!showPrices") &nbsp;
//- Availability
.pretix-widget-item-availability-col
AvailBox(:item="item", :variation="variation")
.pretix-widget-clear
</template>
<style lang="sass">
</style>

76
src/pretix/static/pretixpresale/widget/src/components/Widget.vue Normal file
View File

@@ -0,0 +1,76 @@
<script setup lang="ts">
import { computed, inject, ref, onMounted, watch } from 'vue'
import { StoreKey } from '~/sharedStore'
import { STRINGS } from '~/i18n'
import EventForm from './EventForm.vue'
import EventList from './EventList.vue'
import EventCalendar from './EventCalendar.vue'
import EventWeekCalendar from './EventWeekCalendar.vue'
import Overlay from './Overlay.vue'
const emit = defineEmits<{
mounted: []
}>()
const store = inject(StoreKey)!
const wrapper = ref<HTMLDivElement>()
const formcomp = ref<InstanceType<typeof EventForm>>()
const mobile = ref(false)
const classObject = computed(() => ({
'pretix-widget': true,
'pretix-widget-mobile': mobile.value,
'pretix-widget-use-custom-spinners': true,
}))
watch(mobile, (newValue) => {
store.mobile = newValue
})
onMounted(() => {
if (wrapper.value) {
const resizeObserver = new ResizeObserver((entries) => {
mobile.value = entries[0].contentRect.width <= 800
})
resizeObserver.observe(wrapper.value)
}
store.reload() // TODO call earlier?
emit('mounted') // TODO where does this go?
})
watch(() => store.view, (_newValue, oldValue) => {
if (oldValue && wrapper.value) {
// always make sure the widget is scrolled to the top
// as we only check top, we do not need to wait for a redraw
const rect = wrapper.value.getBoundingClientRect()
if (rect.top < 0) {
wrapper.value.scrollIntoView()
}
}
})
</script>
<template lang="pug">
.pretix-widget-wrapper(ref="wrapper", tabindex="0", role="article", :aria-label="store.name")
div(:class="classObject")
.pretix-widget-loading(v-show="store.loading > 0")
svg(width="128", height="128", viewBox="0 0 1792 1792", xmlns="http://www.w3.org/2000/svg")
path.pretix-widget-primary-color(d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z")
.pretix-widget-error-message(v-if="store.error && store.view !== 'event'") {{ store.error }}
.pretix-widget-error-action(v-if="store.error && store.connectionError")
a.pretix-widget-button(:href="store.newTabTarget", target="_blank") {{ STRINGS.open_new_tab }}
EventForm(v-if="store.view === 'event'", ref="formcomp")
EventList(v-if="store.view === 'events'")
EventCalendar(v-if="store.view === 'weeks'", :mobile="mobile")
EventWeekCalendar(v-if="store.view === 'days'", :mobile="mobile")
.pretix-widget-clear
.pretix-widget-attribution(v-if="store.poweredby", v-html="store.poweredby")
Overlay
</template>
<style lang="sass">
</style>

3
src/pretix/static/pretixpresale/widget/src/globals.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
interface NamedNodeMap {
[key: string]: Attr | undefined;
}

126
src/pretix/static/pretixpresale/widget/src/i18n.ts Normal file
View File

@@ -0,0 +1,126 @@
// Internationalization strings for the pretix widget
// In production, widget.py injects the `django` global before this script loads.
// In dev mode, Django's i18n file expects `this` to be the global object, but
// ES modules have `this` as undefined — so we import as raw text and execute
// with a local context.
interface Django {
pgettext: (context: string, text: string) => string
gettext: (text: string) => string
interpolate: (fmt: string, obj: Record<string, unknown> | unknown[], named?: boolean) => string
get_format: (formatType: string) => string | number
}
let django: Django
if (import.meta.env.DEV) {
// TODO this does not actually grab the correct language strings
const modules = import.meta.glob('../../../jsi18n/*/djangojs.js', { eager: true, query: '?raw', import: 'default' }) as Record<string, string>
const key = `../../../jsi18n/${LANG}/djangojs.js`
const raw = modules[key]
if (!raw) throw new Error(`Missing i18n module for lang "${LANG}": ${key}`)
const context: { django?: Django } = {}
new Function(raw).call(context)
django = context.django!
} else {
django = (globalThis as any).django
}
export const STRINGS = {
quantity: django.pgettext('widget', 'Quantity'),
quantity_dec: django.pgettext('widget', 'Decrease quantity'),
quantity_inc: django.pgettext('widget', 'Increase quantity'),
filter_events_by: django.pgettext('widget', 'Filter events by'),
filter: django.pgettext('widget', 'Filter'),
price: django.pgettext('widget', 'Price'),
original_price: django.pgettext('widget', 'Original price: %s'),
new_price: django.pgettext('widget', 'New price: %s'),
select: django.pgettext('widget', 'Select'),
select_item: django.pgettext('widget', 'Select %s'),
select_variant: django.pgettext('widget', 'Select variant %s'),
sold_out: django.pgettext('widget', 'Sold out'),
buy: django.pgettext('widget', 'Buy'),
register: django.pgettext('widget', 'Register'),
reserved: django.pgettext('widget', 'Reserved'),
free: django.pgettext('widget', 'FREE'),
price_from: django.pgettext('widget', 'from %(currency)s %(price)s'),
image_of: django.pgettext('widget', 'Image of %s'),
tax_incl: django.pgettext('widget', 'incl. %(rate)s% %(taxname)s'),
tax_plus: django.pgettext('widget', 'plus %(rate)s% %(taxname)s'),
tax_incl_mixed: django.pgettext('widget', 'incl. taxes'),
tax_plus_mixed: django.pgettext('widget', 'plus taxes'),
quota_left: django.pgettext('widget', 'currently available: %s'),
unavailable_require_voucher: django.pgettext('widget', 'Only available with a voucher'),
unavailable_available_from: django.pgettext('widget', 'Not yet available'),
unavailable_available_until: django.pgettext('widget', 'Not available anymore'),
unavailable_active: django.pgettext('widget', 'Currently not available'),
unavailable_hidden_if_item_available: django.pgettext('widget', 'Not yet available'),
order_min: django.pgettext('widget', 'minimum amount to order: %s'),
exit: django.pgettext('widget', 'Close ticket shop'),
loading_error: django.pgettext('widget', 'The ticket shop could not be loaded.'),
loading_error_429: django.pgettext('widget', 'There are currently a lot of users in this ticket shop. Please open the shop in a new tab to continue.'),
open_new_tab: django.pgettext('widget', 'Open ticket shop'),
checkout: django.pgettext('widget', 'Checkout'),
cart_error: django.pgettext('widget', 'The cart could not be created. Please try again later'),
cart_error_429: django.pgettext('widget', 'We could not create your cart, since there are currently too many users in this ticket shop. Please click "Continue" to retry in a new tab.'),
waiting_list: django.pgettext('widget', 'Waiting list'),
cart_exists: django.pgettext('widget', 'You currently have an active cart for this event. If you select more products, they will be added to your existing cart.'),
resume_checkout: django.pgettext('widget', 'Resume checkout'),
redeem_voucher: django.pgettext('widget', 'Redeem a voucher'),
redeem: django.pgettext('widget', 'Redeem'),
voucher_code: django.pgettext('widget', 'Voucher code'),
close: django.pgettext('widget', 'Close'),
close_checkout: django.pgettext('widget', 'Close checkout'),
cancel_blocked: django.pgettext('widget', 'You cannot cancel this operation. Please wait for loading to finish.'),
continue: django.pgettext('widget', 'Continue'),
variations: django.pgettext('widget', 'Show variants'),
hide_variations: django.pgettext('widget', 'Hide variants'),
back_to_list: django.pgettext('widget', 'Choose a different event'),
back_to_dates: django.pgettext('widget', 'Choose a different date'),
back: django.pgettext('widget', 'Back'),
next_month: django.pgettext('widget', 'Next month'),
previous_month: django.pgettext('widget', 'Previous month'),
next_week: django.pgettext('widget', 'Next week'),
previous_week: django.pgettext('widget', 'Previous week'),
show_seating: django.pgettext('widget', 'Open seat selection'),
seating_plan_waiting_list: django.pgettext('widget', 'Some or all ticket categories are currently sold out. If you want, you can add yourself to the waiting list. We will then notify if seats are available again.'),
load_more: django.pgettext('widget', 'Load more'),
days: {
MO: django.gettext('Mo'),
TU: django.gettext('Tu'),
WE: django.gettext('We'),
TH: django.gettext('Th'),
FR: django.gettext('Fr'),
SA: django.gettext('Sa'),
SU: django.gettext('Su'),
MONDAY: django.gettext('Monday'),
TUESDAY: django.gettext('Tuesday'),
WEDNESDAY: django.gettext('Wednesday'),
THURSDAY: django.gettext('Thursday'),
FRIDAY: django.gettext('Friday'),
SATURDAY: django.gettext('Saturday'),
SUNDAY: django.gettext('Sunday'),
},
months: {
'01': django.gettext('January'),
'02': django.gettext('February'),
'03': django.gettext('March'),
'04': django.gettext('April'),
'05': django.gettext('May'),
'06': django.gettext('June'),
'07': django.gettext('July'),
'08': django.gettext('August'),
'09': django.gettext('September'),
10: django.gettext('October'),
11: django.gettext('November'),
12: django.gettext('December'),
} as Record<string, string>,
} as const
export function interpolate (fmt: string, obj: Record<string, unknown> | unknown[], named = false): string {
return django.interpolate(fmt, obj, named)
}
export function getFormat (formatType: string): string | number {
return django.get_format(formatType)
}

80
src/pretix/static/pretixpresale/widget/src/lib/store.ts Normal file
View File

@@ -0,0 +1,80 @@
import { reactive, computed, watch } from 'vue'
import type { WatchCallback, WatchOptions, UnwrapNestedRefs } from 'vue'
interface StoreMethods {
$reset: () => void
$watch: <T>(source: () => T, callback: WatchCallback<T>, options?: WatchOptions) => void
}
type GetterReturnTypes<G> = {
readonly [K in keyof G]: G[K] extends () => infer R ? R : never
}
type Store<S, G, A> = UnwrapNestedRefs<S> & GetterReturnTypes<G> & A & StoreMethods
type GettersTree<S> = Record<string, (this: S, state: S) => any> | Record<string, () => any>
type ActionsTree = Record<string, (...args: any[]) => any>
export function createStore<
S extends object,
G extends GettersTree<S>,
A extends ActionsTree
> (
// name: string,
config: {
state: () => S
getters?: G & ThisType<UnwrapNestedRefs<S> & GetterReturnTypes<G> & A & StoreMethods>
actions?: A & ThisType<UnwrapNestedRefs<S> & GetterReturnTypes<G> & A & StoreMethods>
}
): Store<S, G, A> {
type StoreType = Store<S, G, A>
const store = reactive(config.state()) as StoreType
// Add getters as computed properties
if (config.getters) {
for (const key of Object.keys(config.getters) as (keyof G)[]) {
const getter = config.getters[key]
const computedRef = computed(() => (getter as () => unknown).call(store))
Object.defineProperty(store, key, {
get: () => computedRef.value,
enumerable: true
})
}
}
// Add actions bound to the store
if (config.actions) {
for (const key of Object.keys(config.actions) as (keyof A)[]) {
const action = config.actions[key]
;(store as Record<string, unknown>)[key as string] = (action as (...args: unknown[]) => unknown).bind(store)
}
}
store.$reset = function () {
const cleanState = config.state()
const cleanKeys = new Set([
'$reset',
'$watch',
...Object.keys(cleanState),
...Object.keys(config.getters ?? {}),
...Object.keys(config.actions ?? {})
])
// Delete any keys that aren't in clean state and aren't known non-state keys
for (const key of Object.keys(store)) {
if (!cleanKeys.has(key)) {
delete (store as Record<string, unknown>)[key]
}
}
// Set all state values from clean state
for (const key of Object.keys(cleanState) as (keyof S)[]) {
;(store as S)[key] = cleanState[key]
}
}
store.$watch = function <T>(source: () => T, callback: WatchCallback<T>, options?: WatchOptions) {
watch(source.bind(store), callback.bind(store), options)
}
return store
}

127
src/pretix/static/pretixpresale/widget/src/main.ts Normal file
View File

@@ -0,0 +1,127 @@
import { createApp, nextTick, type App } from 'vue'
import { createWidgetInstance } from '~/widget'
import { createButtonInstance } from '~/button'
import { createWidgetStore, StoreKey } from '~/sharedStore'
import ButtonComponent from '~/components/Button.vue'
import { docReady, makeid } from '~/utils'
import type { WidgetData } from '~/types'
declare global {
interface Window {
PretixWidget: PretixWidgetAPI
pretixWidgetCallback?: () => void
}
}
interface PretixWidgetAPI {
build_widgets: boolean
widget_data: WidgetData
buildWidgets: () => void
open: (
targetUrl: string,
voucher?: string | null,
subevent?: string | number | null,
items?: { item: string; count: string }[],
widgetData?: Record<string, string>,
skipSslCheck?: boolean,
disableIframe?: boolean
) => void
addLoadListener: (callback: () => void) => void
addCloseListener: (callback: () => void) => void
_loaded: Array<() => void>
_closed: Array<() => void>
}
const widgetlist: App[] = []
const buttonlist: App[] = []
window.PretixWidget = {
build_widgets: true,
widget_data: { referer: location.href },
// TODO move somewhere else and rename?
_loaded: [],
_closed: [],
buildWidgets,
open: openWidget,
addLoadListener (f) { this._loaded.push(f) },
addCloseListener (f) { this._closed.push(f) },
}
async function buildWidgets () {
await docReady()
const widgetElements = document.querySelectorAll('pretix-widget, div.pretix-widget-compat')
for (const [i, el] of Array.from(widgetElements).entries()) {
widgetlist.push(createWidgetInstance(el, el.id || `pretix-widget-${i}`))
}
const buttonElements = document.querySelectorAll('pretix-button, div.pretix-button-compat')
for (const [i, el] of Array.from(buttonElements).entries()) {
buttonlist.push(createButtonInstance(el, el.id || `pretix-button-${i}`))
}
}
function openWidget (
targetUrl: string,
voucher?: string | null,
subevent?: string | number | null,
items?: { item: string; count: string }[],
widgetData?: Record<string, string>,
skipSslCheck?: boolean,
disableIframe?: boolean
): void {
if (!targetUrl.match(/\/$/)) {
targetUrl += '/'
}
const allWidgetData: WidgetData = JSON.parse(JSON.stringify(window.PretixWidget.widget_data))
if (widgetData) {
Object.assign(allWidgetData, widgetData)
}
const root = document.createElement('div')
document.body.appendChild(root)
root.classList.add('pretix-widget-hidden')
const store = createWidgetStore({
targetUrl,
voucher: voucher ?? null,
subevent: subevent ?? null,
skipSsl: skipSslCheck ?? false,
disableIframe: disableIframe ?? false,
widgetData: allWidgetData,
htmlId: makeid(16),
isButton: true,
buttonItems: items ?? [],
buttonText: '',
keepCart: true
})
const app = createApp(ButtonComponent)
app.provide(StoreKey, store)
app.config.errorHandler = (error, _vm, info) => {
console.error('[pretix-widget-open]', info, error)
}
app.mount(root)
nextTick(() => {
if (store.useIframe) {
const form = root.querySelector('form') as HTMLFormElement
if (form) {
const formData = new FormData(form)
store.buy(formData)
}
} else {
const form = root.querySelector('form') as HTMLFormElement
if (form) form.submit()
}
})
}
if (typeof window.pretixWidgetCallback !== 'undefined') {
window.pretixWidgetCallback()
}
if (window.PretixWidget.build_widgets) {
window.PretixWidget.buildWidgets()
}
// TODO debug exposes

561
src/pretix/static/pretixpresale/widget/src/sharedStore.ts Normal file
View File

@@ -0,0 +1,561 @@
import { nextTick, type InjectionKey } from 'vue'
import { createStore } from '~/lib/store'
import { fetchProductList, submitCart, checkAsyncTask, ApiError, createCart } from '~/api'
import type { CartResponse } from '~/api'
import { STRINGS } from '~/i18n'
import { setCookie, getCookie, makeid, siteIsSecure } from '~/utils'
import type { Category, DayEntry, EventEntry, LightboxState, MetaFilterField, WidgetData } from '~/types'
export const globalWidgetId = makeid(16)
export type WidgetStore = ReturnType<typeof createWidgetStore>
export const StoreKey: InjectionKey<WidgetStore> = Symbol('WidgetStore')
export function createWidgetStore (config: {
targetUrl: string
isButton?: boolean
voucher?: string | null
subevent?: string | number | null
listType?: string | null
skipSsl?: boolean
disableIframe?: boolean
disableVouchers?: boolean
disableFilters?: boolean
displayEventInfo?: boolean | null
filter?: string | null
items?: string | null
categories?: string | null
variations?: string | null
widgetData: WidgetData
htmlId: string
keepCart: boolean
// Button-specific
buttonItems?: { item: string; count: string }[]
buttonText?: string
}) {
return createStore({
state: () => ({
// Target/URL state
targetUrl: config.targetUrl,
parentStack: [] as string[],
subevent: config.subevent ?? null as string | number | null,
// Configuration
voucherCode: config.voucher ?? null as string | null,
skipSsl: config.skipSsl ?? false,
disableIframe: config.disableIframe ?? false,
disableVouchers: config.disableVouchers ?? false,
disableFilters: config.disableFilters ?? false,
displayEventInfo: config.displayEventInfo ?? null as boolean | null,
filter: config.filter ?? null as string | null,
itemFilter: config.items ?? null as string | null,
categoryFilter: config.categories ?? null as string | null,
variationFilter: config.variations ?? null as string | null,
style: config.listType ?? null as string | null,
widgetData: config.widgetData,
widgetId: `pretix-widget-${globalWidgetId}`,
htmlId: config.htmlId,
keepCart: config.keepCart,
// View state
view: null as 'event' | 'events' | 'weeks' | 'days' | null,
loading: config.isButton ? 0 : 1,
error: null as string | null,
connectionError: false,
frameDismissed: false,
// Event data
name: null as string | null,
dateRange: null as string | null,
location: null as string | null,
frontpageText: null as string | null,
categories: [] as Category[],
currency: '',
displayNetPrices: false,
voucherExplanationText: null as string | null,
displayAddToCart: false,
waitingListEnabled: false,
showVariationsExpanded: !!config.variations,
_cartId: null as string | null,
cartExists: false,
vouchersExist: false,
hasSeatingPlan: false,
hasSeatingPlanWaitinglist: false,
itemnum: 0,
poweredby: '',
// Calendar/list data
events: null as EventEntry[] | null,
weeks: null as DayEntry[][] | null,
days: null as DayEntry[] | null,
date: null as string | null,
week: null as [number, number] | null,
hasMoreEvents: false,
offset: 0,
appendEvents: false,
metaFilterFields: [] as MetaFilterField[],
// UI state
mobile: false,
// Button-specific
isButton: config.isButton ?? false,
items: (config.buttonItems ?? []) as { item: string; count: string }[],
buttonText: config.buttonText ?? '',
// Overlay (always initialized, no null guards)
overlay: {
frameSrc: '',
frameLoading: false,
frameShown: false,
errorMessage: null as string | null,
errorUrlAfter: null as string | null,
errorUrlAfterNewTab: false,
lightbox: null as LightboxState | null,
},
// Async task state
asyncTaskId: null as string | null,
asyncTaskCheckUrl: null as string | null,
asyncTaskTimeout: null as ReturnType<typeof setTimeout> | null,
asyncTaskInterval: 100,
voucher: null as string | null,
}),
getters: {
useIframe (): boolean {
if ((window as any).crossOriginIsolated === true) return false
return !this.disableIframe && (this.skipSsl || siteIsSecure())
},
cookieName (): string {
return `pretix_widget_${this.targetUrl.replace(/[^a-zA-Z0-9]+/g, '_')}`
},
cartId (): string | null {
if (this._cartId) {
return this._cartId
}
if (this.keepCart) {
return getCookie(this.cookieName) ?? null
}
},
widgetDataJson (): string {
const cloned = { ...this.widgetData }
delete cloned.consent
return JSON.stringify(cloned)
},
consentParameter (): string {
if (this.widgetData.consent) {
return `&consent=${encodeURIComponent(this.widgetData.consent)}`
}
return ''
},
additionalURLParams (): string {
if (!window.location.search.includes('utm_')) {
return ''
}
const params = new URLSearchParams(window.location.search)
for (const [key] of params.entries()) {
if (!key.startsWith('utm_')) {
params.delete(key)
}
}
return params.toString()
},
newTabTarget (): string {
return this.subevent ? `${this.targetUrl}${this.subevent}/` : this.targetUrl
},
formTarget (): string {
const isFirefox = navigator.userAgent.toLowerCase().includes('firefox')
const isAndroid = navigator.userAgent.toLowerCase().includes('android')
if (isAndroid && isFirefox) {
return '_top'
}
return '_blank'
},
consentParameterValue (): string {
if (this.widgetData.consent) {
return encodeURIComponent(this.widgetData.consent)
}
return ''
},
formAction (): string {
if (!this.useIframe && this.isButton && this.items.length === 0) {
if (this.voucherCode) return `${this.targetUrl}redeem`
if (this.subevent) return `${this.targetUrl}${this.subevent}/`
return this.targetUrl
}
let checkoutUrl = `/${this.targetUrl.replace(/^[^/]+:\/\/([^/]+)\//, '')}w/${globalWidgetId}/`
if (!this.cartExists) {
checkoutUrl += 'checkout/start'
}
if (this.additionalURLParams) {
checkoutUrl += `?${this.additionalURLParams}`
}
let formTarget = `${this.targetUrl}w/${globalWidgetId}/cart/add?iframe=1&next=${encodeURIComponent(checkoutUrl)}`
if (this.cartId) {
formTarget += `&take_cart_id=${this.cartId}`
}
formTarget += this.consentParameter
return formTarget
}
},
actions: {
triggerLoadCallback () {
nextTick(() => {
for (const callback of (window as any).PretixWidget._loaded || []) {
callback()
}
})
},
async reload (opt: { focus?: string } = {}) {
if (this.isButton) return
let url: string
if (this.subevent) {
url = `${this.targetUrl}${this.subevent}/widget/product_list?lang=${LANG}`
} else {
url = `${this.targetUrl}widget/product_list?lang=${LANG}`
}
if (this.offset) url += `&offset=${this.offset}`
if (this.filter) url += `&${this.filter}`
if (this.itemFilter) url += `&items=${encodeURIComponent(this.itemFilter)}`
if (this.categoryFilter) url += `&categories=${encodeURIComponent(this.categoryFilter)}`
if (this.variationFilter) url += `&variations=${encodeURIComponent(this.variationFilter)}`
if (this.voucherCode) url += `&voucher=${encodeURIComponent(this.voucherCode)}`
if (this.cartId) url += `&cart_id=${encodeURIComponent(this.cartId)}`
if (this.date !== null) {
url += `&date=${this.date.substring(0, 7)}`
} else if (this.week !== null) {
url += `&date=${this.week[0]}-W${this.week[1]}`
}
if (this.style !== null) url += `&style=${encodeURIComponent(this.style)}`
try {
const { data, responseUrl } = await fetchProductList(url)
// Check for redirect
const newUrl = responseUrl.substring(0, responseUrl.indexOf('/widget/product_list?') + 1)
const oldUrl = url.substring(0, url.indexOf('/widget/product_list?') + 1)
if (newUrl !== oldUrl) {
let adjustedUrl = newUrl
if (this.subevent) {
adjustedUrl = adjustedUrl.substring(0, adjustedUrl.lastIndexOf('/', adjustedUrl.length - 1) + 1)
}
this.targetUrl = adjustedUrl
this.reload()
return
}
this.connectionError = false
if (data.weeks !== undefined) {
this.weeks = data.weeks
this.date = data.date ?? null
this.week = null
this.events = null
this.view = 'weeks'
this.name = data.name ?? null
this.frontpageText = data.frontpage_text ?? null
this.metaFilterFields = data.meta_filter_fields ?? []
} else if (data.days !== undefined) {
this.days = data.days
this.date = null
this.week = data.week ?? null
this.events = null
this.view = 'days'
this.name = data.name ?? null
this.frontpageText = data.frontpage_text ?? null
this.metaFilterFields = data.meta_filter_fields ?? []
} else if (data.events !== undefined) {
this.events = this.appendEvents && this.events
? this.events.concat(data.events)
: data.events
this.appendEvents = false
this.weeks = null
this.view = 'events'
this.name = data.name ?? null
this.frontpageText = data.frontpage_text ?? null
this.hasMoreEvents = data.has_more_events ?? false
this.metaFilterFields = data.meta_filter_fields ?? []
} else {
this.view = 'event'
this.targetUrl = data.target_url ?? this.targetUrl
this.subevent = data.subevent ?? null
this.name = data.name ?? null
this.frontpageText = data.frontpage_text ?? null
this.dateRange = data.date_range ?? null
this.location = data.location ?? null
this.categories = data.items_by_category ?? []
this.currency = data.currency ?? ''
this.displayNetPrices = data.display_net_prices ?? false
this.voucherExplanationText = data.voucher_explanation_text ?? null
this.error = data.error ?? null
this.displayAddToCart = data.display_add_to_cart ?? false
this.waitingListEnabled = data.waiting_list_enabled ?? false
this.showVariationsExpanded = data.show_variations_expanded || !!this.variationFilter
this.cartExists = data.cart_exists ?? false
this.vouchersExist = data.vouchers_exist ?? false
this.hasSeatingPlan = data.has_seating_plan ?? false
this.hasSeatingPlanWaitinglist = data.has_seating_plan_waitinglist ?? false
this.itemnum = data.itemnum ?? 0
}
this.poweredby = data.poweredby ?? ''
if (this.loading > 0) {
this.loading--
this.triggerLoadCallback()
}
// Auto-open seating plan if applicable
if (
this.parentStack.length > 0
&& this.hasSeatingPlan
&& this.categories.length === 0
&& !this.frameDismissed
&& this.useIframe
&& !this.error
&& !this.hasSeatingPlanWaitinglist
) {
this.startseating()
} else if (opt.focus) {
nextTick(() => {
document.querySelector<HTMLElement>(opt.focus!)?.focus()
})
}
} catch (e) {
this.categories = []
this.currency = ''
if (e instanceof ApiError && e.status === 429) {
this.error = STRINGS.loading_error_429
} else {
this.error = STRINGS.loading_error
}
this.connectionError = true
if (this.loading > 0) {
this.loading--
this.triggerLoadCallback()
}
throw e
}
},
getVoucherFormTarget (): string {
let formTarget = `${this.targetUrl}w/${globalWidgetId}/redeem?iframe=1&locale=${LANG}`
if (this.cartId) {
formTarget += `&take_cart_id=${this.cartId}`
}
if (this.subevent) {
formTarget += `&subevent=${this.subevent}`
}
if (this.widgetData) {
formTarget += `&widget_data=${encodeURIComponent(this.widgetDataJson)}`
}
formTarget += this.consentParameter
if (this.additionalURLParams) {
formTarget += `&${this.additionalURLParams}`
}
return formTarget
},
handleCartResponse (data: CartResponse) {
if (data.redirect) {
if (data.cart_id) {
this.setCartId(data.cart_id)
}
let url = data.redirect
if (url.substring(0, 1) === '/') {
url = `${this.targetUrl.replace(/^([^/]+:\/\/[^/]+)\/.*$/, '$1')}${url}`
}
if (url.includes('?')) {
url = `${url}&iframe=1&locale=${LANG}&take_cart_id=${this.cartId}`
} else {
url = `${url}?iframe=1&locale=${LANG}&take_cart_id=${this.cartId}`
}
url += this.consentParameter
if (this.additionalURLParams) {
url += `&${this.additionalURLParams}`
}
if (data.success === false) {
url = url.replace(/checkout\/start/g, '')
this.overlay.errorMessage = data.message ?? null
if (data.has_cart) {
this.overlay.errorUrlAfter = url
}
this.overlay.frameLoading = false
} else {
this.overlay.frameSrc = url
}
} else {
this.asyncTaskId = data.async_id
if (data.check_url) {
this.asyncTaskCheckUrl = `${this.targetUrl.replace(/^([^/]+:\/\/[^/]+)\/.*$/, '$1')}${data.check_url}`
}
this.asyncTaskTimeout = window.setTimeout(() => this.pollAsyncTask(), this.asyncTaskInterval)
this.asyncTaskInterval = 250
}
},
async pollAsyncTask () {
if (!this.asyncTaskCheckUrl) return
try {
const data = await checkAsyncTask(this.asyncTaskCheckUrl)
this.handleCartResponse(data)
} catch (e) {
if (e instanceof ApiError && (e.status === 200 || (e.status >= 400 && e.status < 500))) {
this.overlay.errorMessage = STRINGS.cart_error
this.overlay.frameLoading = false
} else {
this.asyncTaskTimeout = window.setTimeout(() => this.pollAsyncTask(), 1000)
}
}
},
async buy (formData: FormData, event?: Event) {
if (!this.useIframe) return
if (event) event.preventDefault()
if (this.isButton && this.items.length === 0) {
if (this.voucherCode) {
this.voucherOpen(this.voucherCode)
} else {
this.resume()
}
return
}
const url = `${this.formAction}&locale=${LANG}&ajax=1`
this.overlay.frameLoading = true
this.asyncTaskInterval = 100
try {
const data = await submitCart(url, formData)
this.handleCartResponse(data)
} catch (e) {
if (e instanceof ApiError) {
if (e.status === 429) {
this.overlay.errorMessage = STRINGS.cart_error_429
this.overlay.frameLoading = false
this.overlay.errorUrlAfter = this.newTabTarget
this.overlay.errorUrlAfterNewTab = true
} else if (e.status === 405) {
// Likely a redirect!
this.targetUrl = e.responseUrl.substring(0, e.responseUrl.indexOf('/cart/add') - 18)
this.overlay.frameLoading = false
this.buy(formData)
return
}
}
this.overlay.errorMessage = STRINGS.cart_error
this.overlay.frameLoading = false
}
},
async createCart () {
const url = `${this.targetUrl}w/${globalWidgetId}/cart/create?ajax=1`
try {
this.overlay.frameLoading = true
const data = await createCart(url)
this.setCartId(data.cart_id)
} catch (e) {
if (e instanceof ApiError && (e.status === 200 || (e.status >= 400 && e.status < 500))) {
this.overlay.errorMessage = STRINGS.cart_error
this.overlay.frameLoading = false
}
}
},
redeem (voucherCode: string, event?: Event) {
if (!this.useIframe) return
if (event) event.preventDefault()
this.voucherOpen(voucherCode)
},
voucherOpen (voucherCode: string) {
// TODO just use https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
const redirectUrl = `${this.getVoucherFormTarget()}&voucher=${encodeURIComponent(voucherCode)}`
if (this.useIframe) {
this.overlay.frameSrc = redirectUrl
} else {
window.open(redirectUrl)
}
},
async resume () {
if (!this.cartId && this.keepCart) {
// create an empty cart whose id we can persist
await this.createCart()
}
let redirectUrl = `${this.targetUrl}w/${globalWidgetId}/`
if (this.subevent && this.isButton && this.items.length === 0) {
// button with subevent but no items
redirectUrl += `${this.subevent}/`
}
if (this.subevent && !this.cartId) {
// button with subevent but no items
redirectUrl += `${this.subevent}/`
}
redirectUrl += `?iframe=1&locale=${LANG}`
if (this.cartId) {
// ajax to make sure the cart-id is used, even if the cart is currently empty
redirectUrl += `&take_cart_id=${this.cartId}&ajax=1`
}
if (this.widgetData) {
redirectUrl += `&widget_data=${encodeURIComponent(this.widgetDataJson)}`
}
redirectUrl += this.consentParameter
if (this.additionalURLParams) {
redirectUrl += `&${this.additionalURLParams}`
}
if (this.useIframe) {
this.overlay.frameSrc = redirectUrl
} else {
window.open(redirectUrl)
}
},
startwaiting () {
let redirectUrl = `${this.targetUrl}w/${globalWidgetId}/waitinglist/?iframe=1&locale=${LANG}`
if (this.subevent) {
redirectUrl += `&subevent=${this.subevent}`
}
if (this.additionalURLParams) {
redirectUrl += `&${this.additionalURLParams}`
}
if (this.useIframe) {
this.overlay.frameSrc = redirectUrl
} else {
window.open(redirectUrl)
}
},
startseating () {
let redirectUrl = `${this.targetUrl}w/${globalWidgetId}`
if (this.subevent) {
redirectUrl += `/${this.subevent}`
}
redirectUrl += `/seatingframe/?iframe=1&locale=${LANG}`
if (this.voucherCode) {
redirectUrl += `&voucher=${encodeURIComponent(this.voucherCode)}`
}
if (this.cartId) {
redirectUrl += `&take_cart_id=${this.cartId}`
}
if (this.widgetData) {
redirectUrl += `&widget_data=${encodeURIComponent(this.widgetDataJson)}`
}
redirectUrl += this.consentParameter
if (this.additionalURLParams) {
redirectUrl += `&${this.additionalURLParams}`
}
if (this.useIframe) {
this.overlay.frameSrc = redirectUrl
} else {
window.open(redirectUrl)
}
},
setCartId (cartId: string) {
this._cartId = cartId
setCookie(this.cookieName, cartId, 30)
}
}
})
}

92
src/pretix/static/pretixpresale/widget/src/types.ts Normal file
View File

@@ -0,0 +1,92 @@
// Domain model types for the pretix widget
export interface Price {
gross: string
net: string
rate: string
name: string
includes_mixed_tax_rate?: boolean
}
export interface Availability {
color: 'green' | 'orange' | 'red'
text?: string
reason?: string
}
export interface Variation {
id: number
value: string
description?: string
price: Price
suggested_price?: Price
original_price?: string
avail: [number, number | null]
order_max: number
current_unavailability_reason?: string
allow_waitinglist?: boolean
}
export interface Item {
id: number
name: string
description?: string
picture?: string
picture_fullsize?: string
price: Price
suggested_price?: Price
original_price?: string
avail: [number, number | null]
order_min?: number
order_max: number
has_variations: boolean
variations: Variation[]
free_price: boolean
min_price?: string
max_price?: string
mandatory_priced_addons?: boolean
current_unavailability_reason?: string
allow_waitinglist?: boolean
}
export interface Category {
id: number
name?: string
description?: string
items: Item[]
}
export interface EventEntry {
name: string
event_url: string
subevent?: number | string
date_range: string
location: string
time?: string
continued?: boolean
availability: Availability
}
export interface DayEntry {
date: string
day_formatted: string
events: EventEntry[]
}
export interface MetaFilterField {
key: string
label: string
choices: [string, string][]
}
export interface LightboxState {
image: string
description: string
loading?: boolean
}
export interface WidgetData {
referer: string
consent?: string
[key: string]: string | undefined
}

100
src/pretix/static/pretixpresale/widget/src/utils.ts Normal file
View File

@@ -0,0 +1,100 @@
// Utility functions for the pretix widget
import { getFormat } from '~/i18n'
// Cookie utilities
export function setCookie (cname: string, cvalue: string, exdays: number): void {
const d = new Date()
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
const expires = `expires=${d.toUTCString()}`
document.cookie = `${cname}=${cvalue};${expires};${siteIsSecure() ? 'SameSite=None;Secure;' : ''}path=/`
}
export function getCookie (name: string): string | null {
const value = `; ${document.cookie}`
const parts = value.split(`; ${name}=`)
if (parts.length === 2) {
return parts.pop()?.split(';').shift() || null
}
return null
}
// Number formatting
export function roundTo (n: number, digits = 0): number {
const multiplicator = Math.pow(10, digits)
n = parseFloat((n * multiplicator).toFixed(11))
return Math.round(n) / multiplicator
}
// TODO use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat instead?
export function floatformat (val: number | string, places = 2): string {
if (typeof val === 'string') {
val = parseFloat(val)
}
const parts = roundTo(val, places).toFixed(places).split('.')
if (places === 0) {
return parts[0]
}
const grouping = getFormat('NUMBER_GROUPING') as number
const thousandSep = getFormat('THOUSAND_SEPARATOR') as string
const decimalSep = getFormat('DECIMAL_SEPARATOR') as string
parts[0] = parts[0].replace(
new RegExp(`\\B(?=(\\d{${grouping}})+(?!\\d))`, 'g'),
thousandSep
)
return `${parts[0]}${decimalSep}${parts[1]}`
}
export function autofloatformat (val: number | string, places = 2): string {
const numVal = typeof val === 'string' ? parseFloat(val) : val
if (numVal === roundTo(numVal, 0)) {
places = 0
}
return floatformat(numVal, places)
}
// String/number utilities
export function padNumber (number: number, size = 2): string {
let s = String(number)
while (s.length < size) {
s = `0${s}`
}
return s
}
export function getISOWeeks (year: number): number {
const d = new Date(year, 0, 1)
const isLeap = new Date(year, 1, 29).getMonth() === 1
// Check for a Jan 1 that's a Thursday or a leap year that has a Wednesday Jan 1
return d.getDay() === 4 || (isLeap && d.getDay() === 3) ? 53 : 52
}
export function makeid (length: number): string {
let text = ''
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
for (let i = 0; i < length; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length))
}
return text
}
export function siteIsSecure (): boolean {
return /https.*/.test(document.location.protocol)
}
// HTML utility
export function stripHTML (s: string): string {
const div = document.createElement('div')
div.innerHTML = s
return div.textContent || div.innerText || ''
}
// docReady - DOM ready detection (returns a Promise)
export function docReady (): Promise<void> {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
return Promise.resolve()
}
return new Promise(resolve => {
document.addEventListener('DOMContentLoaded', () => resolve(), { once: true })
})
}

1
src/pretix/static/pretixpresale/widget/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
declare const LANG: string

63
src/pretix/static/pretixpresale/widget/src/widget.ts Normal file
View File

@@ -0,0 +1,63 @@
import { createApp, type App } from 'vue'
import WidgetComponent from '~/components/Widget.vue'
import { createWidgetStore, StoreKey } from '~/sharedStore'
import { makeid } from '~/utils'
import type { WidgetData } from '~/types'
export function createWidgetInstance (element: Element, htmlId?: string): App {
let targetUrl = element.attributes.event.value
if (!targetUrl.match(/\/$/)) {
targetUrl += '/'
}
const displayEventInfoAttr = element.attributes['display-event-info']?.value
// null means "auto" (as before), everything other than "false" is true
const displayEventInfo: boolean | null
= 'display-event-info' in element.attributes && displayEventInfoAttr !== 'auto' ? displayEventInfoAttr !== 'false' : null
const widgetData: WidgetData = JSON.parse(JSON.stringify(window.PretixWidget.widget_data))
for (const attr of Array.from(element.attributes)) {
if (attr.name.match(/^data-.*$/)) {
widgetData[attr.name.replace(/^data-/, '')] = attr.value
}
}
const store = createWidgetStore({
targetUrl,
voucher: element.attributes.voucher?.value || null,
subevent: element.attributes.subevent?.value || null,
listType: element.attributes['list-type']?.value || element.attributes.style?.value || null,
skipSsl: 'skip-ssl-check' in element.attributes,
disableIframe: 'disable-iframe' in element.attributes,
disableVouchers: 'disable-vouchers' in element.attributes,
disableFilters: 'disable-filters' in element.attributes,
displayEventInfo,
filter: element.attributes.filter?.value || null,
items: element.attributes.items?.value || null,
categories: element.attributes.categories?.value || null,
variations: element.attributes.variations?.value || null,
widgetData,
htmlId: htmlId || element.id || makeid(16),
keepCart: true
})
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
if (mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-')) {
const attrName = mutation.attributeName.substring(5)
const attrValue = (mutation.target as Element).getAttribute(mutation.attributeName)
store.widgetData[attrName] = attrValue
}
}
})
const app = createApp(WidgetComponent)
app.provide(StoreKey, store)
app.config.errorHandler = (error, _vm, info) => {
console.error('[pretix-widget]', info, error)
}
app.mount(element)
observer.observe(element, { attributes: true })
return app
}

11
src/pretix/static/pretixpresale/widget/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "../../../../../tsconfig.json",
"include": ["src/**/*"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
},
"types": ["node", "vite/client"]
}
}

38
src/pretix/static/pretixpresale/widget/vite.config.ts Normal file
View File

@@ -0,0 +1,38 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ mode }) => ({
server: {
port: 5180
},
plugins: [
vue()
],
resolve: {
alias: {
'~': import.meta.dirname + '/src',
},
},
build: {
minify: false, // django will do minification
outDir: import.meta.dirname + '/../../../static.dist/vite/widget',
rollupOptions: {
input: {
main: import.meta.dirname + '/src/main.ts',
},
output: {
format: 'iife',
entryFileNames: 'widget.js',
assetFileNames: 'widget.[ext]',
},
},
},
optimizeDeps: {
exclude: ['moment', 'jquery']
},
define: {
...(mode === 'development' && {
LANG: JSON.stringify(process.env.PRETIX_WIDGET_LANG || 'en'),
}),
},
}))

6
src/setup.cfg
View File

@@ -18,7 +18,13 @@ skip_glob = data/**,make_testdata.py,wsgi.py,bootstrap,celery_app.py,pretix/sett
[tool:pytest]
DJANGO_SETTINGS_MODULE = tests.settings
addopts = -rw
asyncio_mode = auto
asyncio_default_fixture_loop_scope = function
# Playwright E2E test configuration
# Uncomment for debugging: --headed shows browser UI, --slowmo slows operations
# addopts = -rw --headed --slowmo 500
# Browser selection (chromium, firefox, webkit)
# --browser chromium
filterwarnings =
error
ignore:.*invalid escape sequence.*:

1257
src/tests/e2e/conftest.py Normal file
View File

File diff suppressed because it is too large Load Diff

94
src/tests/e2e/test_widget_button.py Normal file
View File

@@ -0,0 +1,94 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
import pytest
from playwright.sync_api import Page, expect
@pytest.mark.django_db
class TestButtonJourney:
"""
Complete purchase journeys for a regular event.
Tests item visibility, variation visibility, adding items and variations to cart, and checkout up until showing the iframe.
"""
def test_no_predefined_items_journey(
self,
page: Page,
live_server_url: str,
organizer,
event,
items,
widget_page
):
widget_page.goto_button_test_page(
live_server_url, organizer.slug, event.slug)
button = page.locator('.pretix-button')
button.click()
iframe = widget_page.wait_for_iframe_checkout()
expect(iframe.locator('#btn-add-to-cart')).to_be_visible(timeout=15000)
def test_predefined_items_journey(
self,
page: Page,
live_server_url: str,
organizer,
event,
items,
widget_page
):
item_str = ','.join(f'item_{item.pk}=1' for item in items)
widget_page.goto_button_test_page(
live_server_url, organizer.slug, event.slug, items=item_str)
button = page.locator('.pretix-button')
button.click()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(iframe.locator('text=/200\\.00/')).to_be_visible(timeout=15000)
def test_subevent_button_journey(
self,
page: Page,
live_server_url: str,
organizer,
event_series,
widget_page
):
event, subevents = event_series
subevent = subevents[2]
widget_page.goto_button_test_page(
live_server_url, organizer.slug, event.slug,
subevent=str(subevent.pk))
button = page.locator('.pretix-button')
button.click()
iframe = widget_page.wait_for_iframe_checkout()
expect(iframe.locator('#btn-add-to-cart')).to_be_visible(timeout=15000)
page.pause()
expect(iframe.get_by_role('heading', name='Concert Night 3')).to_be_visible(timeout=15000)

159
src/tests/e2e/test_widget_journey_series.py Normal file
View File

@@ -0,0 +1,159 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
import pytest
from playwright.sync_api import Page, expect
@pytest.mark.django_db
class TestEventSeriesJourney:
"""
Complete purchase journeys for an event series.
Tests the different views (calendar, list, week) and adds multiple items to the cart.
"""
def test_multi_subevent_journey_calendar_view(
self,
page: Page,
live_server_url: str,
organizer,
event_series,
widget_page
):
event, _subevents = event_series
widget_page.goto(
live_server_url,
organizer.slug,
event.slug,
# **{'list-type': 'list'}
)
page.locator('.pretix-widget-event-calendar-event').first.click()
widget_page.select_item_quantity('Concert Ticket', 2)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
expect(
iframe.locator('text=/45\\.00/').first
).to_be_visible(timeout=15000)
widget_page.close_iframe()
page.locator('a[rel="back"]').click()
widget_page.wait_for_view('.pretix-widget-event-calendar-next-month')
page.locator('.pretix-widget-event-calendar-next-month').click()
widget_page.wait_for_loading_indicator()
page.locator('.pretix-widget-event-calendar-event').first.click()
widget_page.select_item_quantity('Concert Ticket', 1)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(
iframe.locator('text=/90\\.00/').first
).to_be_visible(timeout=15000)
def test_multi_subevent_journey_list_view(
self,
page: Page,
live_server_url: str,
organizer,
event_series,
widget_page
):
event, _subevents = event_series
widget_page.goto(
live_server_url,
organizer.slug,
event.slug,
**{'list-type': 'list'}
)
page.locator('.pretix-widget-event-list-entry').first.click()
widget_page.select_item_quantity('Concert Ticket', 2)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
expect(
iframe.locator('text=/45\\.00/').first
).to_be_visible(timeout=15000)
widget_page.close_iframe()
page.locator('a[rel="back"]').click()
widget_page.wait_for_view('.pretix-widget-event-list-entry')
page.locator('.pretix-widget-event-list-entry').nth(1).click()
widget_page.select_item_quantity('Concert Ticket', 1)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(
iframe.locator('text=/90\\.00/').first
).to_be_visible(timeout=15000)
def test_multi_subevent_journey_week_view(
self,
page: Page,
live_server_url: str,
organizer,
event_series,
widget_page
):
event, _subevents = event_series
widget_page.goto(
live_server_url,
organizer.slug,
event.slug,
**{'list-type': 'week'}
)
page.locator('.pretix-widget-event-calendar-event').first.click()
widget_page.select_item_quantity('Concert Ticket', 2)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
expect(
iframe.locator('text=/45\\.00/').first
).to_be_visible(timeout=15000)
widget_page.close_iframe()
page.locator('a[rel="back"]').click()
widget_page.wait_for_view('.pretix-widget-event-calendar-event')
page.locator('.pretix-widget-event-calendar-next-month').click()
widget_page.wait_for_loading_indicator()
page.locator('.pretix-widget-event-calendar-event').first.click()
widget_page.select_item_quantity('Concert Ticket', 1)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(
iframe.locator('text=/90\\.00/').first
).to_be_visible(timeout=15000)

93
src/tests/e2e/test_widget_journey_single.py Normal file
View File

@@ -0,0 +1,93 @@
#
# This file is part of pretix (Community Edition).
#
# Copyright (C) 2014-2020 Raphael Michel and contributors
# Copyright (C) 2020-today pretix GmbH and contributors
#
# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
# Public License as published by the Free Software Foundation in version 3 of the License.
#
# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
# this file, see <https://pretix.eu/about/en/license>.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along with this program. If not, see
# <https://www.gnu.org/licenses/>.
#
import pytest
from playwright.sync_api import Page, expect
@pytest.mark.django_db
class TestSingleEventJourney:
"""
Complete purchase journeys for a regular event.
Tests item visibility, variation visibility, adding items and variations to cart, and checkout up until showing the iframe.
"""
def test_full_purchase_journey(
self,
page: Page,
live_server_url: str,
organizer,
event,
items,
widget_page
):
widget_page.goto(
live_server_url, organizer.slug, event.slug)
ga_item = page.locator('.pretix-widget-item:has-text("General Admission")')
expect(ga_item).to_be_visible()
expect(ga_item.locator('text=/50\\.00/')).to_be_visible()
vip_item = page.locator('.pretix-widget-item:has-text("VIP Ticket")')
expect(vip_item).to_be_visible()
expect(vip_item.locator('text=/150\\.00/')).to_be_visible()
widget_page.select_item_quantity('General Admission', 2)
widget_page.select_item_quantity('VIP Ticket', 1)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(iframe.locator('text=/250\\.00/')).to_be_visible(timeout=15000)
def test_journey_with_variations(
self,
page: Page,
live_server_url: str,
organizer,
event,
items,
item_with_variations,
widget_page
):
item, _variations = item_with_variations
widget_page.goto(
live_server_url, organizer.slug, event.slug)
item_elem = page.locator(f'.pretix-widget-item:has-text("{item.name}")')
expect(item_elem).to_be_visible()
widget_page.expand_variations(item.name)
large_var = page.locator('.pretix-widget-variation:has(strong:text-is("Large"))')
expect(large_var).to_be_visible()
expect(large_var.locator('text=/25\\.00/')).to_be_visible()
widget_page.select_item_quantity('General Admission', 1)
widget_page.select_variation_quantity(item.name, 'Large', 1)
widget_page.click_buy_button()
iframe = widget_page.wait_for_iframe_checkout()
# TODO a bit janky selector
expect(iframe.locator('text=/75\\.00/')).to_be_visible(timeout=15000)

26
tsconfig.json Normal file
View File

@@ -0,0 +1,26 @@
{
"include": [
"src/pretix/static/**/*",
"src/pretix/static/**/*.vue",
"src/pretix/plugins/webcheckin/**/*",
"src/pretix/plugins/webcheckin/**/*.vue"
],
"compilerOptions": {
"baseUrl": ".",
"paths": {},
"strict": false,
"allowJs": true,
"checkJs": true,
"target": "esnext",
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"noErrorTruncation": true,
"noImplicitThis": true,
"isolatedModules": true,
"types": ["node", "events"]
},
"vueCompilerOptions": {
"plugins": ["@vue/language-plugin-pug"]
}
}

150
vite.config.ts Normal file
View File

@@ -0,0 +1,150 @@
// vite build config for control UI
// widget has its own config, see src/pretix/static/pretixpresale/widget/vite.config.ts
import { defineConfig, type Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { execSync } from 'child_process'
import { readFileSync } from 'fs'
import { parse as parseToml } from 'smol-toml'
// Shared dependencies exposed to plugins via import map.
// Adding a dep here auto-generates a _vendor/{name} entry and
// makes it available in the import map.
const SHARED_DEPS = ['vue']
const { entries: pretixPluginEntries } = discoverPretixPlugins()
const pluginDirs = [...new Set(Object.values(pretixPluginEntries).map(p => path.dirname(p)))]
export default defineConfig({
plugins: [
vue(),
sharedDepsPlugin(),
pretixPluginDevEntries(),
],
resolve: {
// Pin shared deps to pretix's node_modules to prevent duplicate instances
// across plugins whose node_modules live in sibling directories
dedupe: [...SHARED_DEPS, '@vue/runtime-core', '@vue/reactivity', '@vue/shared'],
},
server: {
fs: {
// Allow serving source files from sibling plugin directories
allow: ['src', ...pluginDirs],
},
},
build: {
manifest: true,
outDir: path.resolve(__dirname, 'src/pretix/static.dist/vite/control'),
rollupOptions: {
preserveEntrySignatures: 'exports-only',
input: {
'webcheckin/main': path.resolve(__dirname, 'src/pretix/plugins/webcheckin/static/pretixplugins/webcheckin/main.ts'),
'checkinrules/main': path.resolve(__dirname, 'src/pretix/static/pretixcontrol/js/ui/checkinrules/index.ts'),
...Object.fromEntries(SHARED_DEPS.map(dep => [`_vendor/${dep}`, `virtual:vendor/${dep}`])),
...pretixPluginEntries,
},
}
},
optimizeDeps: {
exclude: ['moment', 'jquery']
}
})
// Virtual module plugin: generates re-export entries for each shared dep
// In dev mode, serves /__pretix_importmap so the python template tag can build the import map without hardcoding dep names.
function sharedDepsPlugin (): Plugin {
const PREFIX = 'virtual:vendor/'
const RESOLVED = '\0virtual:vendor/'
return {
name: 'pretix-shared-deps',
resolveId (id) {
if (id.startsWith(PREFIX))
return RESOLVED + id.slice(PREFIX.length)
},
load (id) {
if (id.startsWith(RESOLVED)) {
const pkg = id.slice(RESOLVED.length)
return `export * from '${pkg}'`
}
},
// Serve the import map data so the Python template tag can fetch it in dev mode
configureServer (server) {
server.middlewares.use((req, res, next) => {
if (req.url === '/__pretix_importmap') {
const imports = Object.fromEntries(
SHARED_DEPS.map(dep => [
dep,
`/node_modules/.vite/deps/${dep.replace('/', '_')}.js`,
])
)
res.setHeader('Content-Type', 'application/json')
res.setHeader('Access-Control-Allow-Origin', '*')
res.end(JSON.stringify(imports))
return
}
next()
})
},
}
}
// TODO move to separate file?
function discoverPretixPlugins (): { entries: Record<string, string> } {
let manifestFiles: string[] = []
try {
const raw = execSync(`python -c "
import importlib_metadata as metadata, json, pathlib, tomllib
result = []
for ep in metadata.entry_points(group='pretix.plugin'):
dist = ep.dist
if not dist: continue
try:
url_info = json.loads(dist.read_text('direct_url.json') or '{}')
if not url_info.get('dir_info', {}).get('editable'):
continue # non-editable plugins build their own assets
p = pathlib.Path(url_info['url'].replace('file://', '')) / 'pretixplugin.toml'
if not p.exists():
continue
with p.open('rb') as f:
if 'vite' in tomllib.load(f):
result.append(str(p))
except Exception:
pass
print(json.dumps(result))
"`, { stdio: ['pipe', 'pipe', 'inherit'] }).toString().trim()
manifestFiles = JSON.parse(raw)
} catch (error) {
console.error('Failed to discover pretix plugins, skipping plugin entries:', error)
}
const entries: Record<string, string> = {}
for (const manifestFile of manifestFiles) {
const packageRoot = manifestFile.replace(/[/\\]pretixplugin\.toml$/, '')
const parsed = parseToml(readFileSync(manifestFile, 'utf8')) as {
vite: { entries: Record<string, string> }
}
for (const [name, rel] of Object.entries(parsed.vite.entries)) {
entries[name] = path.join(packageRoot, rel)
}
}
return { entries }
}
// In dev mode, the browser requests /{entryName} from the Vite dev server.
// Vite can't find these files since they live outside the project root.
// This plugin rewrites those URLs to /@fs{absPath} so Vite serves them directly.
function pretixPluginDevEntries (): Plugin {
return {
name: 'pretix-plugin-dev-entries',
configureServer (server) {
server.middlewares.use((req, _res, next) => {
const urlPath = req.url?.split('?')[0]
if (urlPath) {
const name = urlPath.slice(1) // strip leading /
if (name in pretixPluginEntries)
req.url = `/@fs${pretixPluginEntries[name]}`
}
next()
})
},
}
}