AbulÉdu » abuledu-clicalbum

import { Component, OnInit } from "@angular/core";

import { takePicture, requestCameraPermissions } from 'nativescript-camera';

import { PhotoEditor, PhotoEditorControl } from "nativescript-photo-editor";

import { ImageAsset } from 'tns-core-modules/image-asset';

import { RadSideDrawer } from "nativescript-ui-sidedrawer";

import { knownFolders, Folder, File, path } from "tns-core-modules/file-system";

import { ImageSource, fromFile, fromResource, fromBase64, fromAsset } from "tns-core-modules/image-source";

import { Image } from "tns-core-modules/ui/image";

import { EventData } from "tns-core-modules/data/observable";

import { getViewById } from "tns-core-modules/ui/core/view";

import { TextField } from "tns-core-modules/ui/text-field";

import { isAndroid, isIOS, device, screen } from "tns-core-modules/platform";

import { ActivityIndicator } from "tns-core-modules/ui/activity-indicator";

import { getString, setString, hasKey, remove, clear } from "tns-core-modules/application-settings";

import { Button } from "tns-core-modules/ui/button";

import * as bghttp from "nativescript-background-http";

import * as appversion from "nativescript-appversion";

import * as dialogs from "tns-core-modules/ui/dialogs";

import * as app from "tns-core-modules/application";

import * as imagepicker from "nativescript-imagepicker";

declare var NSString: any;

declare var NSUTF8StringEncoding: any;

declare var java: any;

declare var android: any;

@Component({

    selector: "Home",

    templateUrl: "./home.component.html"

})

export class HomeComponent implements OnInit {

    public cameraImage: ImageAsset;

    public pseudo: string;

    public email: string;

    public label: string;

    public legende: string;

    public album: string;

    public albumPass: string;

    private photoEditor;

    private appVersion;

    public serverName: string;

    public serverURI: string;

    public hasPicture: boolean;

    public isBusy: boolean = true;

    constructor() {

        // Use the component constructor to inject providers.

        appversion.getVersionName().then((v: string) => {

            if (isAndroid) {

                this.appVersion = "Android/" + v;

            }

            else if (isIOS) {

                this.appVersion = "iOS/" + v;

            }

            else {

                this.appVersion = "Other/" + v;

            }

            console.log("clicalbum: Your app's version is: " + this.appVersion);

        });

    }

    ngOnInit(): void {

        // Init your component properties here.

        this.photoEditor = new PhotoEditor();

        this.hasPicture = false;

        this.pseudo = getString("pseudo", "");

        this.email = getString("email", "");

        this.serverName = getString("serverName", "AbulEdu-FR");

        this.serverURI = getString("serverURI", "clicalbum.abuledu.net");

        this.album = getString("album", "");

        this.albumPass = getString("albumPass", "");

        this.label = "";

        this.legende = "";

        this.isBusy = false;

        this.enableButtons("btnSendPicture", false)

    }

    enableButtons(btnName, onOff) {

        let b = <Button>getViewById(app.getRootView(), btnName);

        if (b) {

            b.isEnabled = onOff;

        }

    }

    onBlur(args: EventData): void {

        let obj = <TextField>args.object;

        if (obj.id == "album") {

            this.album = obj.text.toLowerCase().replace(/[^a-z0-9]/g, "");

        }

        if (obj.id == "albumPass") {

            this.albumPass = obj.text.toLowerCase().replace(/[^a-z0-9]/g, "");

        }

    }

    onDrawerButtonTap(): void {

        const sideDrawer = <RadSideDrawer>app.getRootView();

        sideDrawer.showDrawer();

    }

    onGetPictureFromRollTap(args: EventData) {

        var that = this;

        let context = imagepicker.create({

            mode: "single" // use "multiple" for multiple selection

        });

        context

            .authorize()

            .then(function () {

                return context.present();

            })

            .then(function (selection) {

                selection.forEach(function (selected) {

                    let imageSource = new ImageSource();

                    imageSource.fromAsset(selected).then((imageSource) => {

                        console.log("ORIG IMAGE SIZE FROM ROLL: " + imageSource.height + " x " + imageSource.width);

                        console.dir(imageSource);

                        // console.log("un ter");

                        that.photoEditor.editPhoto({

                            imageSource: imageSource,

                            hiddenControls: [

                                PhotoEditorControl.Draw,

                                PhotoEditorControl.Text,

                                PhotoEditorControl.Clear,

                            ],

                        }).then((newImage: ImageSource) => {

                            console.log("NEW IMAGE: ", newImage.height, newImage.width);

                            that.imageCropped(newImage);

                            // Here you can save newImage, send it to your backend or simply display it in your app

                            // that.resultImage.imageSource = newImage;

                        }).catch((e) => {

                            console.log("erreur ES 1");

                            console.error(e);

                        });

                        console.log("trois");

                    });

                });

                console.log("Selection des fichiers ", selection);

            }).catch(function (e) {

                console.log("Error ES: " + e);

                // process error

            });

    }

    onTakePictureTap(args: EventData) {

        const options = {

            keepAspectRatio: true,

            saveToGallery: false

        };

        // let button = args.object as Button;

        requestCameraPermissions().then(

            () => {

                takePicture(options)

                    .then((imageAsset: any) => {

                        let imageSource = new ImageSource();

                        imageSource.fromAsset(imageAsset).then((imageSource) => {

                            console.log("ORIG IMAGE SIZE: " + imageSource.height + " x " + imageSource.width);

                            console.dir(imageSource);

                            // console.log("un ter");

                            this.photoEditor.editPhoto({

                                imageSource: imageSource,

                                hiddenControls: [

                                    PhotoEditorControl.Draw,

                                    PhotoEditorControl.Text,

                                    PhotoEditorControl.Clear,

                                ],

                            }).then((newImage: ImageSource) => {

                                console.log("NEW IMAGE: ", newImage.height, newImage.width);

                                this.imageCropped(newImage);

                                // Here you can save newImage, send it to your backend or simply display it in your app

                                // this.resultImage.imageSource = newImage;

                            }).catch((e) => {

                                console.log("erreur 1");

                                console.error(e);

                            });

                            console.log("trois");

                        });

                    }, (error) => {

                        console.log("Error: " + error);

                    });

            },

            () => alert('permissions rejected')

        );

    }

    onResetPictureTap(args) {

        // this.cameraImage = "res://icon";

    }

    onGotoWebTap() {

        if (this.album == "") {

            dialogs.alert({

                title: "Nom d'album",

                message: "Il faut renseigner le nom de l'album que vous voulez consulter ...",

                okButtonText: "Ok"

            }).then(() => {

            });

        }

        var utilityModule = require("utils/utils");

        utilityModule.openUrl("https://" + this.serverURI + "/" + this.album);

    }

    onSendPictureTap(args) {

        this.enableButtons("btnSendPicture", false)

        this.isBusy = true;

        let labelObj = <TextField>getViewById(app.getRootView(), "label");

        this.label = labelObj.text;

        let legendeObj = <TextField>getViewById(app.getRootView(), "legende");

        this.legende = legendeObj.text;

        let albumObj = <TextField>getViewById(app.getRootView(), "album");

        this.album = albumObj.text.toLowerCase().replace(/[^a-z0-9]/g, "");

        albumObj = <TextField>getViewById(app.getRootView(), "albumPass");

        this.albumPass = albumObj.text;

        console.log("on a maintenant ", this.albumPass);

        if (this.album == "" || this.label == "") {

            dialogs.alert({

                title: "Informations manquantes",

                message: "Il faut renseigner le nom de l'album auquel vous voulez participer et donner un nom à votre photo ...",

                okButtonText: "Ok"

            }).then(() => {

                this.enableButtons("btnSendPicture", true)

                this.isBusy = false;

                console.log("clicalbum: album ou label vide");

                return;

            });

        }

        else {

            setString("album", this.album);

            setString("albumPass", this.albumPass);

            this.sendPicture(args);

        }

    }

    sendPicture(args) {

        this.enableButtons("btnSendPicture", false)

        this.isBusy = true;

        // let button = args.object as Button;

        const folderPath: string = knownFolders.documents().path;

        const fileName = "fichier_temporaire.jpeg";

        const filePath = path.join(folderPath, fileName);

        let labelObj = <TextField>getViewById(app.getRootView(), "label");

        this.label = labelObj.text;

        let legendeObj = <TextField>getViewById(app.getRootView(), "legende");

        this.legende = legendeObj.text;

        console.log("On voudrait uploader le fichier " + filePath + " dans l'album " + this.album + " sous le nom " + this.label);

        if (this.serverURI == "") {

            dialogs.alert({

                title: "Serveur ????",

                message: "Suite à une collision dans l'espace-temps des nano particules permettant la bonne configuration du logiciel l'adresse du serveur s'est retrouvée vide ... bien entendu ce bug ne devrait pas surgir mais pour continuer vous devrez à nouveau choisir un serveur dans la configuration ... Merci pour votre compréhension",

                okButtonText: "Ok"

            }).then(() => {

                this.enableButtons("btnSendPicture", true)

                this.isBusy = false;

                console.log("clicalbum: Adresse serveur vide");

                return;

            });

        }

        var url = "https://" + this.serverURI + "/u.php";

        console.log("clicalbum: POST vers " + url);

        // // upload configuration

        var session = bghttp.session("image-upload");

        var request = {

            url: url,

            method: "POST",

            headers: {

                "Content-Type": "application/octet-stream",

                "User-Agent": "ClicAlbum " + this.appVersion,

            },

            description: "Uploading " + fileName

        };

        var params = [

            { name: "login", value: this.base64Encode(this.pseudo) },

            { name: "email", value: this.base64Encode(this.email) },

            { name: "label", value: this.base64Encode(this.label) },

            { name: "legende", value: this.base64Encode(this.legende) },

            { name: "album", value: this.base64Encode(this.album) },

            { name: "albumPass", value: this.base64Encode(this.albumPass) },

            { name: "version", value: "2" },

            { name: "fileToUpload", filename: filePath, mimeType: "image/jpeg" }

        ];

        var task = session.multipartUpload(params, request);

        task.on("progress", logEvent.bind(this));

        task.on("error", this.uploadError.bind(this));

        task.on("complete", this.uploadCompleted.bind(this));

        function logEvent(e) {

            console.log("clicalbum: UPLOAD STATUS: " + e.eventName);

        }

    }

    uploadError(this) {

        console.log("clicalbum: UPLOAD ERROR");

        dialogs.alert({

            title: "Erreur de téléversement",

            message: "Pour une raison inconnue le téléversement de votre fichier n'a pas été possible ... si cette erreur persiste merci de nous le signaler via le formulaire de contact disponible sur clicpdf.org",

            okButtonText: "Ok"

        }).then(() => {

            this.enableButtons("btnSendPicture", true)

            this.isBusy = false;

            console.log("clicalbum: Dialog closed!");

        });

    }

    uploadCompleted(this) {

        console.log("clicalbum: UPLOAD STATUS: terminé");

        console.log("clicalbum: UPLOAD STATUS: terminé end");

        dialogs.alert({

            title: "Téléversement terminé",

            message: "Votre document est maintenant sur le serveur",

            okButtonText: "Ok"

        }).then(() => {

            this.isBusy = false;

            this.displayImage("");

            this.enableButtons("btnSendPicture", false)

            console.log("clicalbum: Dialog closed!");

        });

    }

    saveImage(image, fileName) {

        //     // =========== sauvegarde de l'image

        if (image.saveToFile(fileName, "jpeg", 95)) {

            console.log("clicalbum: Image saved successfully in " + fileName);

            this.displayImage(fileName);

        }

    }

    displayImage(fileName) {

        console.log("clicalbum: displayImage  " + fileName);

        // if (fileName != "") {

            let i = new ImageSource().fromFile(fileName);

            this.cameraImage = fileName;

        // }

        // let i = <Image>getViewById(app.getRootView(), "cameraImage");

        // if (i) {

        //     console.log("  objet image ok");

        //     if (fileName != "") {

        //         i.src = fileName;

        //         this.enableButtons("btnSendPicture", true)

        //     }

        //     else {

        //         i.src = "res://icon";

        //     }

        // }

        this.isBusy = false;

        if (fileName != "") {

            this.hasPicture = true;

        }

        else {

            this.hasPicture = false;

        }

        let b = <ActivityIndicator>getViewById(app.getRootView(), "busyIndicator");

        if (b) {

            console.log("  objet busy ok");

            b.busy = false;

        }

        console.log("clicalbum: end of displayImage");

    }

    imageCropped(image) {

        // this.cameraImage = image;

        console.log("imageCropped ...");

        console.log("NEW IMAGE: ", image.height, image.width);

        //     // =========== sauvegarde de l'image

        const folderPath: string = knownFolders.documents().path;

        const fileName = "fichier_temporaire.jpeg";

        const filePath = path.join(folderPath, fileName);

        this.saveImage(image, filePath)

    }

    base64Encode(value) {

        console.log("clicalbum: base64 pour " + value);

        if (isIOS) {

            let text = NSString.stringWithString(value);

            let data = text.dataUsingEncoding(NSUTF8StringEncoding);

            return data.base64EncodedStringWithOptions(0);

        } else {

            let text = new java.lang.String(value);

            let data = text.getBytes("UTF-8");

            return android.util.Base64.encodeToString(data, android.util.Base64.DEFAULT);

        }

    }

    onBusyChanged(args: EventData) {

        let indicator: ActivityIndicator = <ActivityIndicator>args.object;

        console.log("clicalbum: indicator.busy changed to: " + indicator.busy);

    }

}