Created
June 4, 2021 08:29
-
-
Save jogibear9988/4ab5b4c7dc3edae046bd3d7672b57531 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { html } from '@polymer/polymer/lib/utils/html-tag'; | |
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners'; | |
import { PolymerElement } from '@polymer/polymer/polymer-element'; | |
import { dom } from '@fortawesome/fontawesome-svg-core/index.es'; | |
import { ImageDTO } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.DTO'; | |
import '../../../helper/stylesheetHelper.js'; | |
import { checkSecurityAnswerCode } from '../../checkAnswerCode'; | |
import { UUID } from '../../../libs/uuid/uuid'; | |
import { cropperScriptName } from '../../../externalScripNames'; | |
import { MccImage } from '../../mcc-image'; | |
import { MccImageType, ImageFormat, ServiceType } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.Enum'; | |
import { MccEntityState } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.DTO.Base'; | |
import { commonClient } from '../../../commonClient/commonClient'; | |
import { MccDialog } from '../../../mccDialogHandler'; | |
import { MaterialDTO } from '../../../api/typescripttypes/MCC.WMS.ServiceInterfaces.DTO'; | |
import { closeDialog } from '../../../mainHandler'; | |
import { ICloseableView } from '../../../interfaces/ICloseableView'; | |
import type Cropper from 'cropperjs'; | |
import { LazyLoader } from '@node-projects/base-custom-webcomponent'; | |
export class KardexImageCrop extends GestureEventListeners(PolymerElement) implements ICloseableView { | |
image: MccImage; | |
_cropper: Cropper; | |
_sy: number; | |
_sx: number; | |
file: any; | |
item: MaterialDTO; | |
parentType: string; | |
parent: any; | |
saveCallback: (image: ImageDTO) => void; | |
imageDto: ImageDTO; | |
imageType: MccImageType; | |
static get template() { | |
return html` | |
<style include="cropper"></style> | |
<div id="root" style="display: flex; padding: 3px; flex-direction: column; height: 100%; width: 100%; box-sizing: border-box;"> | |
<div style="display: flex"> | |
<paper-button | |
id="tapLoad" | |
style="border-right: 1px white solid; border-bottom: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 30px; width: 50%; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapLoad" | |
> | |
<span style="font-size: 20px;color: white;"> | |
<i style="width:20px; height: 20px;" class="fa fa-images" aria-hidden="true"></i> | |
<t-t>Load</t-t> | |
</span> | |
</paper-button> | |
<paper-button | |
id="tapCam" | |
style="border-left: 1px white solid; border-bottom: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 30px; width: 50%; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapCamera" | |
> | |
<span style="font-size: 20px;color: white;"> | |
<i style="width:20px; height: 20px;" class="fa fa-images" aria-hidden="true"></i> | |
<t-t>Camera</t-t> | |
</span> | |
</paper-button> | |
<paper-button | |
id="tapCamSelect" | |
style="border-left: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 29px; width: 50%; display: none; align-items: center; justify-content: center; font-size: 20px; color: white;" | |
> | |
<select | |
id="selectNew" | |
style="border-left: 1px white solid; padding: 0; background-color: var(--kx-dark); border: 0; border-radius: 0; margin: 0 0 1px 0; height: 29px; width: 100%; text-align-last: center; justify-content: center; font-size: 20px; color: white;" | |
on-change="_changeCam" | |
></select> | |
</paper-button> | |
</div> | |
<div style="display: flex; box-sizing: border-box; flex-direction: row; width: 100%; height: 100%; margin-top: 2px;"> | |
<input type="file" id="fileInput" on-change="_fileChange" hidden="" accept="image/x-png, image/gif, image/jpeg" /> | |
<div id="usrImg" style="display: flex; align-items:center; height: 100%; width: 100%;"> | |
<img id="container" style="width: 100%; height: 100%; display: none" /> | |
<video id="video" style="width:100%; height: 100%; display:none;"></video> | |
</div> | |
<div style="width: 40px; display: flex; flex-direction: column;"> | |
<!--<paper-button style="font-size: 1px; padding: 0; background-color: rgb(0, 141, 76); border-radius: 0; margin: 0; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" on-tap="_tapMove"> | |
<span style="font-size: 20px;color: white;"><i class="fa fa-arrows" aria-hidden="true"></i></span> | |
</paper-button>--> | |
<paper-button | |
style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapRl" | |
> | |
<span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-undo" aria-hidden="true"></i></span> | |
</paper-button> | |
<paper-button | |
style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapRr" | |
> | |
<span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-redo" aria-hidden="true"></i></span> | |
</paper-button> | |
<paper-button | |
style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapFh" | |
> | |
<span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-arrows-alt-h" aria-hidden="true"></i></span> | |
</paper-button> | |
<paper-button | |
style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapFv" | |
> | |
<span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-arrows-alt-v" aria-hidden="true"></i></span> | |
</paper-button> | |
<paper-button | |
id="btnSnap" | |
style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: none; align-items: center; justify-content: center;" | |
on-tap="_tapSnap" | |
> | |
<span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-camera" aria-hidden="true"></i></span> | |
</paper-button> | |
</div> | |
</div> | |
<div style="display:flex; flex-direction:row;"> | |
<paper-button | |
style="flex-grow: 1; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 1px 1px 0 0; height: 30px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapCancel" | |
> | |
<span style="font-size: 20px;color: white;"> | |
<i style="width:20px; height: 20px;" class="fa fa-times" aria-hidden="true"></i> | |
<t-t>Cancel</t-t> | |
</span> | |
</paper-button> | |
<paper-button | |
style="flex-grow: 1; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 1px 0 0 1px; height: 30px; display: flex; align-items: center; justify-content: center;" | |
on-tap="_tapSave" | |
> | |
<span style="font-size: 20px;color: white;"> | |
<i style="width:20px; height: 20px;" class="fa fa-check" aria-hidden="true"></i> | |
<t-t>Save</t-t> | |
</span> | |
</paper-button> | |
</div> | |
</div> | |
`; | |
} | |
constructor(parent: any, parentType: string, item?: MaterialDTO) { | |
super(); | |
this.parentType = parentType; | |
this.parent = parent; | |
if (item) { | |
this.item = item; | |
} | |
} | |
static get is() { | |
return 'kardex-image-crop'; | |
} | |
static get properties() { | |
return { | |
image: { | |
type: Object, | |
notify: true, | |
}, | |
file: { | |
type: String, | |
value: null, | |
}, | |
dto: { | |
type: Object, | |
value: null, | |
}, | |
imageType: String, | |
}; | |
} | |
ready() { | |
super.ready(); | |
if (this._cropper) { | |
this._cropper.destroy(); | |
//@ts-ignore | |
this.$.container.style.display = 'none'; | |
} | |
dom.i2svg({ node: this.$.root }); | |
if (this.parent) { | |
(<HTMLElement>this.$.tapLoad).style.display = 'none'; | |
(<HTMLElement>this.$.tapCam).style.display = 'none'; | |
(<HTMLElement>this.$.tapCam).style.width = '100%'; | |
(<HTMLElement>this.$.tapCamSelect).style.width = '100%'; | |
this._tapCamera(); | |
} | |
} | |
viewClosed() { | |
this.toggleCamera(false); | |
} | |
setImage(image: MccImage) { | |
if (image != null) { | |
this._setImageFile(image.getImageAsBase64()); | |
} | |
this.image = image; | |
} | |
_tapLoad() { | |
const elem = this.$.fileInput; // extract extension | |
//@ts-ignore | |
if (this.$.btnSnap.style.display != 'none') { | |
this.toggleCamBtn(); | |
} | |
//@ts-ignore | |
this.$.video.style.display = 'none'; | |
if (elem && document.createEvent) { | |
const evt = document.createEvent('MouseEvents'); | |
evt.initEvent('click', true, false); | |
elem.dispatchEvent(evt); | |
} | |
} | |
_tapCamera() { | |
const vid = <HTMLVideoElement>this.$.video; | |
const _select = this.$.selectNew; | |
if (this._cropper) { | |
this._cropper.destroy(); | |
(<HTMLElement>this.$.container).style.display = 'none'; | |
} | |
vid.autoplay = true; | |
vid.style.display = 'block'; | |
this.toggleCamBtn(); | |
this.toggleCamera(true, localStorage.getItem('lastCamIdSelected')); | |
//@ts-ignore | |
navigator.mediaDevices.enumerateDevices().then((mediaDevices) => { | |
_select.innerHTML = ''; | |
let count = 1; | |
mediaDevices.forEach((devices) => { | |
//@ts-ignore | |
if (devices.kind == 'videoinput') { | |
const option = document.createElement('option'); | |
option.value = devices.deviceId; | |
if (localStorage.getItem('lastCamIdSelected')) { | |
option.selected = false; | |
if (option.value == localStorage.getItem('lastCamIdSelected')) { | |
option.selected = true; | |
} | |
} | |
const textNode = document.createTextNode(devices.label || `Camera ${count++}`); | |
option.appendChild(textNode); | |
_select.appendChild(option); | |
} | |
}); | |
}); | |
} | |
toggleCamBtn() { | |
const btnSnap = <HTMLButtonElement>this.$.btnSnap; | |
const tapCamSelect = <HTMLButtonElement>this.$.tapCamSelect; | |
const tapCam = <HTMLButtonElement>this.$.tapCam; | |
const tapLoad = <HTMLButtonElement>this.$.tapLoad; | |
if (btnSnap.style.display == 'none') { | |
btnSnap.style.display = 'flex'; | |
tapCamSelect.style.display = 'flex'; | |
tapCam.style.display = 'none'; | |
} else { | |
btnSnap.style.display = 'none'; | |
tapCamSelect.style.display = 'none'; | |
tapCam.style.display = 'flex'; | |
tapLoad.style.display = 'flex'; | |
} | |
} | |
toggleCamera(onOff: boolean, deviceId?: string) { | |
const vid = <HTMLVideoElement>this.$.video; | |
const _this = this; | |
'use strict'; | |
if (onOff == true) { | |
if (navigator.mediaDevices.getUserMedia) { | |
let contraints; | |
if (deviceId) { | |
contraints = { video: { deviceId: { exact: deviceId } } }; | |
} else { | |
contraints = { video: true }; | |
} | |
navigator.mediaDevices | |
.getUserMedia(contraints) | |
.then((stream) => { | |
vid.srcObject = stream; | |
}) | |
.catch((err) => { | |
switch (err.name) { | |
case 'NotFoundError': | |
alert('Kamera nicht gefunden!'); | |
break; | |
default: | |
alert(err); | |
} | |
_this.toggleCamBtn(); | |
}); | |
} | |
} else { | |
//@ts-ignore | |
const stream: any = vid.srcObject; | |
if (stream) { | |
const tracks = stream.getTracks(); | |
for (let i = 0; i < tracks.length; i++) { | |
const track = tracks[i]; | |
track.stop(); | |
} | |
} | |
vid.style.display = 'none'; | |
vid.srcObject = null; | |
} | |
} | |
_changeCam() { | |
if (this._cropper) { | |
this._cropper.destroy(); | |
(<HTMLElement>this.$.container).style.display = 'none'; | |
} | |
const vid = <HTMLVideoElement>this.$.video; | |
const stream: any = vid.srcObject; | |
if (stream) { | |
const tracks = stream.getTracks(); | |
for (let i = 0; i < tracks.length; i++) { | |
const track = tracks[i]; | |
track.stop(); | |
} | |
} | |
let dId = ''; | |
for (let i = 0; i < this.$.selectNew.getElementsByTagName('option').length; i++) { | |
if (this.$.selectNew.getElementsByTagName('option')[i].selected) { | |
dId = this.$.selectNew.getElementsByTagName('option')[i].value; | |
} | |
} | |
localStorage.setItem('lastCamIdSelected', dId); | |
if (navigator.mediaDevices.getUserMedia) { | |
navigator.mediaDevices | |
.getUserMedia({ video: { deviceId: { exact: dId } } }) | |
.then((stream) => { | |
vid.srcObject = stream; | |
}) | |
.catch((err0r) => { | |
alert(err0r); | |
}); | |
} | |
} | |
_tapSnap() { | |
const canvas = document.createElement('canvas'); | |
const vid = <HTMLVideoElement>this.$.video; | |
const elem = this.$.container as HTMLElement; | |
canvas.width = vid.clientWidth; | |
canvas.height = vid.clientHeight; | |
canvas.getContext('2d').drawImage(vid, 0, 0, canvas.width, canvas.height); | |
this._setImageFile(canvas.toDataURL()); | |
elem.style.display = 'block'; | |
vid.style.display = 'none'; | |
this.toggleCamera(false); | |
this.toggleCamBtn(); | |
} | |
_tapMove() { | |
this._cropper.setDragMode('move'); | |
} | |
_tapRl() { | |
this._cropper.rotate(-90); | |
} | |
_tapRr() { | |
this._cropper.rotate(90); | |
} | |
_tapFh() { | |
this._sx == -1 ? (this._sx = 1) : (this._sx = -1); | |
this._cropper.scale(this._sx, this._sy); | |
} | |
_tapFv() { | |
this._sy == -1 ? (this._sy = 1) : (this._sy = -1); | |
this._cropper.scale(this._sx, this._sy); | |
} | |
_fileChange(e) { | |
const file = e.target.files[0]; | |
this.file = file; | |
const data = URL.createObjectURL(file); | |
this._setImageFile(data); | |
} | |
async _setImageFile(data: string) { | |
this._sx = 1; | |
this._sy = 1; | |
if (this._cropper) { | |
this._cropper.destroy(); | |
} | |
const img = this.$.container as HTMLImageElement; | |
img.src = data; | |
await LazyLoader.LoadJavascript(cropperScriptName); | |
//@ts-ignore | |
this._cropper = new Cropper(img, { | |
dragMode: 'crop', | |
}); | |
} | |
_tapCancel() { | |
if ((<HTMLButtonElement>this.$.btnSnap).style.display != 'none') { | |
this.toggleCamBtn(); | |
} | |
this.toggleCamera(false); | |
if (this.parent) { | |
if (this.parentType == 'handheld') { | |
this.parent.back(); | |
(<HTMLElement>this.parent.$.openCam).style.display = 'flex'; | |
} else if (this.parentType == 'reflectionApi') { | |
closeDialog(this); | |
} | |
} else { | |
this.parentElement.style.display = 'none'; | |
} | |
} | |
_tapSave() { | |
this._cropper.getCroppedCanvas().toBlob((blob) => { | |
this.imageDto = new ImageDTO(); | |
const d = new Date(); | |
this.imageDto.Id = UUID.genV1().toString(); | |
(this.imageDto.Name = 'MccImage_' + d.getFullYear() + '_' + (d.getMonth() + 1) + '_' + d.getDate() + '_' + d.getHours() + '_' + d.getMinutes() + '_' + d.getSeconds()), (this.imageDto.LanguageId = null); | |
if (this.item || this.parentType == 'reflectionApi') { | |
this.imageDto.MccImageType = MccImageType.WMS_MaterialImage; | |
} else { | |
this.imageDto.MccImageType = this.imageType; | |
} | |
(this.imageDto.ImageFormat = this._getUpperCaseType(blob)), (this.imageDto.MccEntityState = MccEntityState.Added); | |
const fileReader = new FileReader(); | |
fileReader.onload = () => { | |
// @ts-ignore | |
const fileReaderStrings = fileReader.result.split(',', 2); | |
this.imageDto.Data = fileReaderStrings[1]; | |
const retVal = commonClient.commitObjectT(ImageDTO, this.imageDto, null, ServiceType.CommonService); | |
checkSecurityAnswerCode(retVal, () => { | |
if (this.saveCallback) { | |
this.saveCallback(this.imageDto); | |
MccDialog.confirm({ | |
title: 'Common_Successful', | |
message: 'Bild wurde geändert.', | |
//Übersetzung fehlt noch | |
}); | |
} else if (this.item) { | |
this.item.ImageName = this.imageDto.Name; | |
if (this.item.MccEntityState != MccEntityState.Added) { | |
this.item.MccEntityState = MccEntityState.Modified; | |
} | |
const retVal = commonClient.commitObjectT(MaterialDTO, this.item, null, ServiceType.WMSService); | |
checkSecurityAnswerCode(retVal, () => { | |
MccDialog.confirm({ | |
title: 'Common_Successful', | |
message: 'Bild wurde geändert.', | |
//Übersetzung fehlt noch | |
}); | |
this.item.MccEntityState = MccEntityState.Unchanged; | |
}); | |
} | |
this._tapCancel(); | |
}); | |
}; | |
fileReader.readAsDataURL(blob); | |
}); | |
} | |
_getUpperCaseType(blob): ImageFormat { | |
const typeString = blob.type.split('/')[1]; | |
return typeString.charAt(0).toUpperCase() + typeString.slice(1); | |
} | |
} | |
//@ts-ignore | |
customElements.define(KardexImageCrop.is, KardexImageCrop); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment