https://www.swiss-athletics.ch/_assets/9936fbff2fa9683e2f00411c767…/ajax-request/lib/ajax-request.js

1import {ComponentService} from 'component-service';
2
3export class AjaxRequest {
4    static before = new Event('ajaxRequest.before');
5    static errorEvent = new Event('ajaxRequest.error');
6    props = {};
7    mode = '';
8
9    constructor(props) {
10        this.props = props;
11        if (this.props['method'] === 'get') {
12            this.props['url'] = this.addBodyParametersToUrl(this.props['body'], this.props['url']);
13            delete this.props['body'];
14        }
15    }
16
17    addBodyParametersToUrl(formData, url){
18        if(!formData){
19            return url;
20        }
21        const filteredFormParameters = Array.from(formData).filter(
22            ([fieldKey, fieldvalue]) => {return fieldvalue}
23        );
24        if(filteredFormParameters.length === 0){
25            return url;
26        }
27
28        const newUrl = new URL(url);
29        filteredFormParameters.forEach(([fieldKey, fieldValue]) => {
30            newUrl.searchParams.append(fieldKey, fieldValue);
31        });
32        return newUrl.href;
33    }
34
35    async send(mode) {
36        this.mode = mode;
37        try {
38            const response = await fetch(this.props['url'], this.props);
39            this.success(response);
40            return response;
41        } catch (exception) {
42            console.error(exception);
43            console.error(this);
44            this.props['target'].dispatchEvent(AjaxRequest.errorEvent);
45        }
46    }
47
48    async success(response) {
49        const content = await this.getContent(response);
50        if (content && this.mode === 'append') {
51            this.props['target'].append(...content);
52        }
53        if (content && this.mode === 'replace') {
54            this.props['target'].replaceChildren(...content);
55        }
56        document.body.dispatchEvent(ComponentService.changeEvent);
57    }
58
59    async getContent(response) {
60        if (response.status >= 200 && response.status < 400) {
61            switch (this.props['responseType']) {
62                case 'json':
63                    if (this.props['template']) {
64                        if (this.props['responseParser']) {
65                            return await this.parseResponse(response);
66                        } else {
67                            return await this.renderTemplate(response, null);
68                        }
69                    }
70                    return await response.json();
71                case 'text':
72                    return [await response.text()];
73                case 'document':
74                    return await this.parseDocument(response);
75            }
76            return '';
77        }
78    }
79
80    async parseDocument(response) {
81        if (this.props['responseParser']) {
82            const parser = new DOMParser();
83            let text;
84
85            if (this.props['decode']) {
86                const buffer = await response.arrayBuffer();
87                const decoder = new TextDecoder(this.props['decode']);
88                text = decoder.decode(buffer);
89            } else {
90                text = await response.text();
91            }
92            const xmlDoc = parser.parseFromString(text, "application/xml");
93
94            if (xmlDoc.documentElement.nodeName === "parsererror") {
95                throw new Error("Fehler beim Parsen des XML-Dokuments");
96            } else {
97                const module = await ComponentService.loadModule(this.props['responseParser']);
98                const responsePicker = module[this.props['responseParserName']];
99                const responseData = responsePicker.initElement(this, xmlDoc)
100                return this.renderTemplate(response, responseData);
101            }
102
103        } else {
104            return await this.renderDocument(response);
105        }
106    }
107
108    async renderDocument(response) {
109        const responseDocument = document.createRange().createContextualFragment(await response.text());
110        return this.props['responseClassName'] ? responseDocument.querySelector('.' + this.props['responseClassName']).children : responseDocument.children;
111    }
112
113    async parseResponse(response) {
114        const module = await ComponentService.loadModule(this.props['responseParser']);
115        const responsePicker = module[this.props['responseParserName']];
116        const responseData = responsePicker.initElement(this,response, await response.json())
117
118        return this.renderTemplate(response, responseData)
119    }
120
121
122    async renderTemplate(response, responseData) {
123        const module = await ComponentService.loadModule('template-factory');
124        const templateFactory = module.TemplateFactory;
125        const templateName = 'js-template-' + this.props['template'];
126        let renderedTemplate;
127
128        if (responseData) {
129            renderedTemplate = templateFactory.renderTemplate(templateFactory.getTemplateById(templateName), responseData);
130        } else {
131            renderedTemplate = templateFactory.renderTemplate(templateFactory.getTemplateById(templateName), await response.json());
132        }
133        return document.createRange().createContextualFragment(renderedTemplate).children;
134    }
135}