https://meine-arztdokumente.de/webjars/common-frontend/dialogs/dialogs.js

1/* globals FormData, Blob, console, screen, platform, window, setTimeout, QRCode, localStorage, document, dataLayer */
2	
3	import { CibForm } from './../forms.js'		
4	import { Clipboard } from './../files/files.js'	
5	import { BCollapse } from './../bcomponents/navigation-components.js'	
6	import { BFormGroup, BFormCheckbox, BFormSelect, BFormTextarea, BFormRow } from './../bcomponents/form-components.js'
7	import { BModal, BAlert } from './../bcomponents/dialog-components.js'
8	import { BButton, BCol, BCard, BCardBody, BCardText } from './../bcomponents/other-components.js'
9	import { BLink } from './../bcomponents/navigation-components.js'
10
11	const ErrorDialog = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/error.html').then(function(html) {
12			return { 
13				template: html,
14				components: { BModal },
15				data: function() { return { message: '' } },
16				methods: {
17					show: function(error) { 
18						this.message = error.type ? this.$t('errors.' + error.type, error.params) : error				    	
19						this.$refs.modal.show() 
20					}
21				}
22	       	}		
23		})
24	)
25	
26	const Confirm = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/confirm.html').then(function(html) {
27			return { 
28				template: html,
29				components: { BModal, BButton },
30				emits: ['ok', 'cancel'],
31				data: function() { return { param: null } },
32				methods: {
33					show: function(param) { 
34						this.param = param
35						this.$refs.modal.show() 
36					}
37				}
38	       	}
39		})
40	)
41	
42	const Prompt = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/prompt.html').then(function(html) {
43			return { 
44				template: html,		
45				components: { CibForm, BModal, BButton },
46				props: { secure: Boolean, title: String, pattern: String, feedback: String },
47				data: function() { return { text: '', param: null, hide: this.secure, showFeedback: false } },
48				methods: {
49					show: function(param, text) {
50						this.param = param
51						this.text = text
52						this.$refs.modal.show()
53					},
54					onHide: function(evt) {
55						this.showFeedback = false
56						if (evt.trigger === 'ok') this.$emit('ok', { 
57							text: this.text, 
58							param: this.param, 
59							prevent: function() { 
60								evt.preventDefault() 
61								this.showFeedback = true
62							}.bind(this) 
63						}); else this.$emit('cancel', this.param)
64					}
65				}
66	       	}		
67		})
68	)
69	
70	const ProblemReport = { 
71		template: '<b-modal ref="modal" :title="$t(\'problem-report.title\')" @shown="$refs.textArea.focus()">\
72				<cib-form ref="form" @submitted="report(); $refs.modal.hide(); problem = null">\
73				<b-form-group :invalid-feedback="$t(\'errors.invalid\')">\
74					<input v-model="email2" type="email" :placeholder="$t(\'problem-report.email\')" class="form-control">\
75				</b-form-group>\
76				<b-form-group>\
77					<b-form-textarea ref="textArea" v-model="problem" :rows="10" :max-rows="10" required></b-form-textarea>\
78				</b-form-group>\
79				<b-form-group>\
80					<clipboard tabindex="-1" @input="clip = $event"></clipboard>\
81				</b-form-group>\
82			</cib-form>\
83			<template v-slot:modal-footer>\
84				<button @click="$refs.form.onSubmit()" class="btn btn-primary">{{ $t(\'problem-report.ok\') }}</button>\
85				<button type="button" class="btn btn-secondary" @click="$refs.modal.hide()">{{ $t(\'problem-report.cancel\') }}</button>\
86			</template>\
87		</b-modal>',		
88		components: { CibForm, Clipboard, BModal, BFormGroup, BFormTextarea },
89		props: { url: String, email: String },
90		emits: ['report', 'sent'],
91		data: function() { return { problem: '', email2: null, clip: null } },
92		methods: {
93			show: function() { 
94				this.email2 = this.email
95				this.$refs.modal.show() 
96			},
97			report: function() {
98				var params = { 
99					email : this.email2,
100					platform: platform,
101					screen: { 
102						height: screen.height,
103						width: screen.width
104					}
105				}
106				this.$emit('report', params)
107				console && console.warn('Reporting problem', params)
108				var formData = new FormData()
109				var text = window.location.origin + window.location.pathname + '\n' + this.problem
110				formData.append('description', new Blob([text], { type : 'text/plain' }), 'description.txt')
111				formData.append('logs', new Blob([JSON.stringify(params)], { type : 'application/json' }), 'params.json')	
112				if (this.clip) formData.append('original', this.clip)
113				axios.post(this.url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
114					.then(function(res) { this.$emit('sent', res) }.bind(this))
115			}
116		}	 
117	}
118	
119	const Loader = {
120		template: '<div>\
121			<slot v-if="done"></slot>\
122			<img v-else-if="show" src="webjars/common-frontend/dialogs/waitImage.svg" :style="styling">\
123		</div>',
124		props: { styling: String },		
125		data: function() { return { done: false, show: true } },
126		methods: {
127			wait: function(prom, delay) { 
128				this.done = false
129				this.show = !delay
130				if (delay) setTimeout(function() { this.show = true }.bind(this), delay)
131				return prom.then(function(res) { 
132					this.done = true
133					return res
134				}.bind(this), function() { this.done = true }.bind(this)) // any custom error handling needs to be attachend to prom before
135			},
136//			reset: function() { this.done = !(this.show = true) }
137		}
138	}
139
140	const Blocker = {
141		template: '<b-modal ref=\'modal\' centered hide-header hide-footer no-close-on-esc no-close-on-backdrop \
142			content-class="bg-transparent border-0 shadow-none">\
143			<img src="webjars/common-frontend/dialogs/waitImageWhite.svg">\
144		</b-modal>',
145		components: { BModal },
146		methods: {
147			show: function() { this.$refs.modal.show() },
148			hide: function() { this.$refs.modal.hide() }
149		}
150	}	
151	
152	const Success = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/success.html').then(function(html) {
153			return { 
154				template: html,
155				components: { BAlert },
156				props: { top: { type: String, default: '60px' } },	
157				data: function() { return { countdown: 0 } },
158				methods: {
159					show: function(time) { this.countdown = time || 5 }
160				}
161	       	}
162		})
163	)
164	
165	const QrCode = {
166		template: '<div :id="id || \'qrcode\'"></div>',
167		props: { text: String, size: Object, id: String },
168		data: function() { return { qrcode : null } },
169		mounted: function() {
170			this.qrcode = new QRCode(this.id || 'qrcode', {
171				text: this.text,
172				width: this.size.width,
173				correctLevel : QRCode.CorrectLevel.L,
174				height: this.size.height
175			})
176			this.makeCode()
177		},
178		watch: { 
179			text: function() { this.makeCode() },
180			size: function() { this.makeCode() },
181		},
182		methods: {
183			makeCode: function() {
184				this.qrcode.clear()
185				this.qrcode.makeCode(this.text)
186			}
187		}
188	}
189	
190	const QrDialog = {
191		template: '<b-modal ref="modal" :title="title">\
192			<div class="row">\
193				<div class="offset-4"> <qrcode :text="text" :size="{ width: 200, height: 200 }"></qrcode> </div>\
194			</div>\
195			<template v-slot:modal-footer> <b-button variant="primary" @click="$refs.modal.hide()">{{ $t(\'confirm.ok\') }}</b-button> </template>\
196		</b-modal>',
197		components: { QrCode, BModal, BButton },
198		props: { text: String, title: String },
199		methods: {
200			show: function() { this.$refs.modal.show() }
201		}
202	}
203	
204	const CookieConsent = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/cookie-consent.html').then( function(html) {
205			return {
206				template: html,
207				components: { BCollapse, BModal, BButton, BLink, BCard, BCardBody, BCardText, BFormCheckbox },
208				data: function() {
209					return {
210						show: false,
211						showSettings: false,
212						selected: ['necessary'],
213						showNecessary: false,
214						showOptional: false
215					}
216				},
217				mounted: function() {
218					if (localStorage.getItem('cookieConsent') === 'true') this.$emit('accepted')
219					else this.show = localStorage.getItem('cookieConsent') === null
220				},
221				methods: {
222					acceptCookies: function() {
223						localStorage.setItem('cookieConsent', true)
224						this.show = false
225						this.$emit('accepted')
226					},
227					rejectCookies: function() {
228						localStorage.setItem('cookieConsent', false)
229						this.show = false
230					},
231					enableAll: function() {
232						if (!this.selected.includes('optional'))
233							this.selected.push('optional')
234						this.acceptCookies()
235					},
236					saveSettings: function() {
237						if (this.selected.includes('optional'))
238							this.acceptCookies()
239						else
240							this.rejectCookies()
241					},
242					showAgain: function() { this.show = true }
243				}
244			}
245		})
246	)
247
248	const GaConsent = {
249		template: '<cookie-consent ref="consent" @accepted="initGa"></cookie-consent>',
250		components: { CookieConsent },
251		props: { gaId: String },
252		methods: {
253			initGa: function() {
254				var gtagScript = document.createElement('script')
255				gtagScript.async = true
256				gtagScript.src = 'https://www.googletagmanager.com/gtm.js?id=' + this.gaId
257				document.head.appendChild(gtagScript)
258				window.dataLayer = window.dataLayer || [];
259				function gtag() {
260					dataLayer.push(arguments);
261				}
262				gtag('js', new Date());
263				gtag('config', this.gaId);
264				this.$emit('accepted')
265			},
266			showAgain: function() { this.$refs.consent.showAgain() }
267		}
268	}
269	
270	const BlameForm = Vue.defineAsyncComponent(() => axios.get('webjars/common-frontend/dialogs/blame-form.html').then(function(html) {
271			return { 
272				template: html,	
273				components: { CibForm, BFormGroup, BFormSelect, BFormTextarea, BFormRow, BCol, BFormCheckbox },
274				props: { presetStorage: String },
275				data: function() { return { reason: null, justification: null, storage: null, 
276					contactName: null, contactOrganisation: null, contactEmail: null, contactPhone: null } },
277				mounted: function() { this.storage = this.presetStorage }
278	       	}		
279		})
280	)
281
282	export { ErrorDialog, Confirm, Prompt, ProblemReport, Loader, Blocker, Success, QrCode, QrDialog, CookieConsent, GaConsent, BlameForm }