mirror of
https://github.com/pretix/pretix.git
synced 2026-10-02 19:24:42 +00:00
progress bar
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
|
||||
type MyAttrs = {
|
||||
[key: `on${any}`]: EventListener, style?: {[key:string]: string} | string, innerHTML?: string,
|
||||
appendTo?: HTMLElement | ShadowRoot, prependTo?: HTMLElement | ShadowRoot, insertBefore?: HTMLElement, insertAfter?: HTMLElement,
|
||||
[key: Exclude<string, 'component' | 'args'>]: any,
|
||||
};
|
||||
|
||||
export function EL<K extends keyof HTMLElementTagNameMap>(tagName: K, attrs:MyAttrs, ...children:(string|HTMLElement)[]): HTMLElementTagNameMap[K];
|
||||
export function EL(tagName:string, attrs:MyAttrs, ...children:(string|HTMLElement)[]) : HTMLElement;
|
||||
export function EL(tagName:string, attrs:MyAttrs, ...children:(string|HTMLElement)[]) : HTMLElement {
|
||||
if (attrs?.idGetOrCreate) {
|
||||
const el = document.getElementById(attrs.idGetOrCreate);
|
||||
if (el) {
|
||||
return el;
|
||||
} else {
|
||||
attrs.id = attrs.idGetOrCreate; delete attrs.idGetOrCreate;
|
||||
}
|
||||
}
|
||||
var el = document.createElement(tagName);
|
||||
if (attrs) for(var key in attrs)
|
||||
if (key === 'style' && typeof attrs[key] === 'object') Object.assign(el.style, attrs[key]);
|
||||
else if (key === 'component' && 'args' in attrs) el['Component'] = new attrs.component(el, ...attrs.args);
|
||||
else if (key === 'innerHTML') el.innerHTML = attrs[key];
|
||||
else if (key === 'appendTo' && (attrs.appendTo instanceof HTMLElement || attrs.appendTo instanceof ShadowRoot)) attrs.appendTo.append(el);
|
||||
else if (key === 'prependTo' && (attrs.prependTo instanceof HTMLElement || attrs.prependTo instanceof ShadowRoot)) attrs.prependTo.prepend(el);
|
||||
else if (key === 'insertBefore' && attrs.insertBefore instanceof HTMLElement) attrs.insertBefore.before(el);
|
||||
else if (key === 'insertAfter' && attrs.insertAfter instanceof HTMLElement) attrs.insertAfter.after(el);
|
||||
else if (key.startsWith("on")) el.addEventListener(key.substring(2), attrs[key] as unknown as EventListener, false);
|
||||
else if (key.startsWith(":")) el[key.substring(1)] = attrs[key];
|
||||
else if (key === 'checked' && 'checked' in el) el.checked = attrs.checked;
|
||||
else if (key === 'disabled' && 'disabled' in el) el.disabled = attrs.disabled;
|
||||
else if (key === 'selected' && 'selected' in el) el.selected = attrs.selected;
|
||||
else if (key === 'multiple' && 'multiple' in el) el.multiple = attrs.multiple;
|
||||
else el.setAttribute(key, attrs[key]);
|
||||
|
||||
for(var i=0;i<children.length;i++){
|
||||
if (children[i] instanceof HTMLElement) el.appendChild(<HTMLElement>children[i]);
|
||||
else if (children[i]) el.appendChild(document.createTextNode(""+children[i]));
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export class ProgressBar {
|
||||
private static container : HTMLDivElement = EL('div', { appendTo: document.body, class: 'progressBar' }, EL('div', {class:'progressBarText'}));
|
||||
|
||||
static show(message?: string, max?: number) {
|
||||
const texts = ProgressBar.container.lastElementChild;
|
||||
const bar = EL('div', {class:'progressBar_progress'+(max ? '' : ' indeterminate')});
|
||||
let text : HTMLElement;
|
||||
if (message) {
|
||||
text = EL('span', {}, message);
|
||||
texts.append(text);
|
||||
}
|
||||
texts.before(bar);
|
||||
return {
|
||||
disposed: false,
|
||||
[Symbol.dispose]() {
|
||||
if (this.disposed) return;
|
||||
bar.remove();
|
||||
if (text) text.remove();
|
||||
this.disposed = true;
|
||||
},
|
||||
set message(val: string) {
|
||||
text.innerText = val;
|
||||
},
|
||||
set progress(val: number) {
|
||||
if (max) bar.style.width = `${val / max * 100}%`;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,23 @@
|
||||
import {ApiListResponse, Datafield, Questionnaire, Item} from "./model";
|
||||
import { ApiListResponse, Datafield, Questionnaire, Item, Category } from './model'
|
||||
import { ProgressBar } from "./ProgressBar";
|
||||
|
||||
const organizer_slug = document.body.getAttribute('data-organizer'),
|
||||
event_slug = document.body.getAttribute('data-event');
|
||||
event_slug = document.body.getAttribute('data-event')
|
||||
|
||||
async function api_get(resource) {
|
||||
return await $.getJSON(`/api/v1/${resource}?_nocache=${+new Date()}`);
|
||||
return await $.getJSON(`/api/v1/${resource}?_nocache=${+new Date()}`)
|
||||
}
|
||||
|
||||
async function api_get_all<T>(resource): Promise<T[]> {
|
||||
let next = `/api/v1/${resource}?_nocache=${+new Date()}`;
|
||||
let next = `/api/v1/${resource}?_nocache=${+new Date()}`
|
||||
const result: T[] = [];
|
||||
while (next) {
|
||||
const response: ApiListResponse<T> = await $.getJSON(next);
|
||||
result.push(...response.results);
|
||||
next = response.next;
|
||||
console.log('api_get_all: '+ resource, next, response, result)
|
||||
const response: ApiListResponse<T> = await $.getJSON(next)
|
||||
result.push(...response.results)
|
||||
next = response.next
|
||||
console.log('api_get_all: ' + resource, next, response, result)
|
||||
}
|
||||
return result;
|
||||
return result
|
||||
}
|
||||
|
||||
async function api_json_request(resource, method, json_body) {
|
||||
@@ -24,17 +25,19 @@ async function api_json_request(resource, method, json_body) {
|
||||
body: JSON.stringify(json_body),
|
||||
method: method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": $('[name=csrfmiddlewaretoken]').val() as string,
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val() as string,
|
||||
},
|
||||
})).json();
|
||||
})).json()
|
||||
}
|
||||
|
||||
export async function getDatafields() {
|
||||
return await api_get_all<Datafield>(`organizers/${organizer_slug}/events/${event_slug}/datafields/`);
|
||||
export async function getDatafields(container_type) {
|
||||
using pb = ProgressBar.show('loading data fields')
|
||||
return await api_get_all<Datafield>(`organizers/${organizer_slug}/events/${event_slug}/datafields/?container_type=${container_type}&`);
|
||||
}
|
||||
|
||||
export async function getQuestionnaires() {
|
||||
using pb = ProgressBar.show('loading questionnaires')
|
||||
return await api_get_all<Questionnaire>(`organizers/${organizer_slug}/events/${event_slug}/questionnaires/`);
|
||||
}
|
||||
|
||||
@@ -47,11 +50,13 @@ export async function createQuestionnaire(data) {
|
||||
}
|
||||
|
||||
export async function getItems() {
|
||||
using pb = ProgressBar.show('loading product list')
|
||||
return await api_get_all<Item>(`organizers/${organizer_slug}/events/${event_slug}/items/`);
|
||||
}
|
||||
|
||||
export async function getCategories() {
|
||||
return await api_get_all<Item>(`organizers/${organizer_slug}/events/${event_slug}/categories/`);
|
||||
using pb = ProgressBar.show('loading category list')
|
||||
return await api_get_all<Category>(`organizers/${organizer_slug}/events/${event_slug}/categories/`);
|
||||
}
|
||||
|
||||
function get_json_script_value(id) {
|
||||
|
||||
Reference in New Issue
Block a user