AbulÉdu » abuledu-clicalbum

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

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

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

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

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

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

import { Page } from "tns-core-modules/ui/page";

import { ActivatedRoute } from "@angular/router";

import { RouterExtensions } from "nativescript-angular/router";

import { getFile, getImage, getJSON, request, HttpResponse } from "tns-core-modules/http";

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

import { ListPicker } from "tns-core-modules/ui/list-picker";

import { getFrameById } from "tns-core-modules/ui/frame";

import { ObservableArray, ChangedData } from "tns-core-modules/data/observable-array";

import { CheckBox } from '@nstudio/nativescript-checkbox';

import { topmost } from 'tns-core-modules/ui/frame';

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

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

import { observable } from "rxjs";

import { RadioOption } from "./radio-option";

@Component({

    selector: "Settings",

    templateUrl: "./settings.component.html"

})

export class SettingsComponent implements OnInit {

    public pseudo: string;

    public email: string;

    public serverJSON: JSON;

    public serverName: string;

    public serverURI: string;

    public serverLabel: string;

    radioOptions?: Array<RadioOption>;

    constructor(private routerExtensions: RouterExtensions, private activeRoute: ActivatedRoute) {

        // Use the component constructor to inject providers.

    }

    ngOnInit(): void {

        this.radioOptions = [];

        let serversLabelTMP = Array();

        // Init your component properties here.

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

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

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

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

        //On recupere les infos serveurs et en particulier la liste des serveurs disponibles

        try {

            this.serverJSON = JSON.parse(getString("serverJSON"));

            let i = 0;

            this.serverJSON['servers'].forEach(element => {

                console.log(" JSON element : ", element.name);

                let option = new RadioOption(element.label, element.uri);

                this.radioOptions.push(option);

                if (i == 0) {

                    console.log(" Premier element on le checked : ", element.label);

                    this.serverLabel = element.label;

                    this.serverName = element.label;

                    this.serverURI = element.uri;

                    option.selected = true;

                }

                i++;

            });

        } catch (e) {

            console.log(" JSON empty, ask server");

            getJSON("https://clicalbum.abuledu.net/api.php").then((r: any) => {

                console.log("getJSON : ", r);

                this.serverJSON = r;

                let i = 0;

                r.servers.forEach(element => {

                    console.log(" json element : ", element.name);

                    let option = new RadioOption(element.label, element.uri);

                    this.radioOptions.push(option);

                    if (i == 0) {

                        console.log(" premier element on le checked : ", element.label);

                        this.serverLabel = element.label;

                        this.serverName = element.label;

                        this.serverURI = element.uri;

                        option.selected = true;

                    }

                    i++;

                });

            }, (e) => {

                console.log("getJSON Error", e);

            });

        }

    }

    changeCheckedRadio(radioOption: RadioOption): void {

        radioOption.selected = !radioOption.selected;

        if (!radioOption.selected) {

            return;

        }

        this.serverLabel = radioOption.label;

        this.serverName = radioOption.label;

        this.serverURI = radioOption.uri;

        // uncheck all other options

        this.radioOptions.forEach(option => {

            //On est sur un qu'il faut décocher

            if (option.label !== radioOption.label) {

                option.selected = false;

            }

            //On est sur le choix coché

        });

    }

    onDrawerButtonTap(): void {

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

        sideDrawer.showDrawer();

    }

    onFocus(args: EventData): void {

        console.log("on focus: ");

    }

    onBlur(args: EventData): void {

        const tf = <TextField>args.object;

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

        tf.text = this.pseudo;

    }

    onReturnPress(args: EventData): void {

        console.log("on returnpress");

    }

    onTextChange(args: EventData): void {

        console.log("on textChange ");

    }

    onSelectedIndexChanged(args: EventData) {

        const picker = <ListPicker>args.object;

        console.log('index: ${picker.selectedIndex}; item" ${this.years[picker.selectedIndex]}');

    }

    onSaveTap(args: EventData): void {

        // alert("on sauvegarde ...");

        let button = <View>args.object;

        let parent = button.parent;

        if (parent) {

            let p = <TextField>getViewById(parent, "pseudo");

            let e = <TextField>getViewById(parent, "email");

            this.pseudo = p.text.toLowerCase().replace(/[^a-z0-9]/g, "")

            this.email = e.text;

            // console.log("on a un parent, le pseudo : " + this.pseudo);

            // console.log("le mail : " + this.email);

            if (this.pseudo == "" || this.email == "") {

                dialogs.alert({

                    title: "Pseudo ou email vide !",

                    message: "Veuillez saisir un pseudo et une adresse mail...",

                    okButtonText: "Ok"

                });

            }

            else {

                //il faudrait demander au serveur si ce pseudo n'est pas déjà utilisé ...

                request({

                    url: "https://" + this.serverURI + "/api.php",

                    method: "POST",

                    headers: { "Content-Type": "application/json" },

                    content: JSON.stringify({

                        command: "createUser",

                        pseudo: this.pseudo,

                        email: this.email

                    })

                }).then((response) => {

                    const result = response.content.toJSON();

                    console.log("Valeur de loginOK dans le retour request : ", result['loginOK']);

                    if (result['loginOK'] == true) {

                        setString("pseudo", this.pseudo);

                        setString("email", this.email);

                        setString("serverURI", this.serverURI);

                        setString("serverName", this.serverName);

                        dialogs.alert({

                            title: "Pseudo enregistré !",

                            message: "Votre pseudo est maintenant associé à votre adresse email vous pouvez utiliser l'application.",

                            okButtonText: "Ok"

                        }).then(() => {

                            this.routerExtensions.navigate(["/home"], { relativeTo: this.activeRoute });

                        });

                    }

                    else {

                        console.log("Pseudo déjà utilisé");

                        dialogs.alert({

                            title: "Pseudo déjà utilisé !",

                            message: "Malheureusement ce pseudo est déjà utilisé par quelqu'un d'autre. Veuillez changer de pseudo et tenter à nouveau votre chance :-)",

                            okButtonText: "Ok"

                        });

                    }

                }, (e) => {

                    console.log("request Error :", e);

                    dialogs.alert({

                        title: "Erreur de vérification !",

                        message: "Une erreur de communication avec le serveur nous empêche de vérifier si ce pseudo est déjà utilisé ... ré-essayez plus tard.",

                        okButtonText: "Ok"

                    });

                });

            }

        }

    }

}