Front

@page
@model ManagmentWebPanel.Pages.Operators.AddOperatorModel
@{
    ViewData["Title"] = "AddOperator";
}

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

@functions
{
public string GetAntiXsrfRequestToken()
{
    return Xsrf.GetAndStoreTokens(ViewContext.HttpContext).RequestToken;
}
}

<input type="hidden" id="RequestVerificationToken" name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">

<div id="app">
    <v-app id="inspire">
        <v-layout row>
            <v-flex>
                <v-toolbar flat dark color="success">
                    <v-toolbar-title>Adding new operator</v-toolbar-title>
                </v-toolbar>
                <v-stepper v-model="e1">
                    <v-stepper-header>
                        <v-stepper-step :complete="e1 > 1" step="1">Basic information</v-stepper-step>

                        <v-divider></v-divider>

                        <v-stepper-step :complete="e1 > 2" step="2">Address information</v-stepper-step>

                        <v-divider></v-divider>

                        <v-stepper-step :complete="e1 > 3" step="3">Contact information</v-stepper-step>

                        <v-divider></v-divider>

                        <v-stepper-step step="4">Summary</v-stepper-step>

                    </v-stepper-header>

                    <v-stepper-items>
                        <v-stepper-content step="1">

                            <h2>
                                Name:
                            </h2>

                            <v-text-field v-model="firstName"
                                          label="Firstname"
                                          required></v-text-field>

                            <v-text-field v-model="lastName"
                                          label="Lastname"
                                          required></v-text-field>

                            <h2>
                                Details:
                            </h2>

                            <v-combobox v-model="selectedGender"
                                        :items="genders"
                                        label="Gender"
                                        required></v-combobox>

                            <v-menu ref="menu"
                                    :close-on-content-click="false"
                                    v-model="menu"
                                    :nudge-right="40"
                                    :return-value.sync="date"
                                    lazy
                                    transition="scale-transition"
                                    offset-y
                                    full-width
                                    min-width="290px">
                                <v-text-field slot="activator"
                                              v-model="date"
                                              label="Birth date"
                                              readonly></v-text-field>
                                <v-date-picker v-model="date" no-title scrollable>
                                    <v-spacer></v-spacer>
                                    <v-btn flat color="primary" @@click="menu = false">Cancel</v-btn>
                                    <v-btn flat color="primary" @@click="$refs.menu.save(date)">OK</v-btn>
                                </v-date-picker>
                            </v-menu>

                            <h2>
                                System:
                            </h2>

                            <v-checkbox v-model="admin"
                                        label="Administrator"
                                        color="indigo"
                                        hide-details></v-checkbox>

                            <v-btn flat color="red">Cancel</v-btn>

                            <v-btn flat
                                   color="primary"
                                   @@click="e1 = 1">
                                Previous step
                            </v-btn>
                            <v-btn flat
                                   color="success"
                                   @@click="e1 = 2">
                                Next step
                            </v-btn>


                        </v-stepper-content>

                        <v-stepper-content step="2">

                            <h2>
                                Address:
                            </h2>

                            <v-text-field v-model="country"
                                          label="Country"
                                          required></v-text-field>

                            <v-text-field v-model="state"
                                          label="State"
                                          required></v-text-field>

                            <v-text-field v-model="city"
                                          label="City"
                                          required></v-text-field>

                            <v-text-field v-model="postalCode"
                                          label="Postal code"
                                          required></v-text-field>

                            <v-text-field v-model="street"
                                          label="Street"
                                          required></v-text-field>

                            <v-text-field v-model="houseNumber"
                                          label="House number"
                                          required></v-text-field>

                            <v-text-field v-model="apartmentNumber"
                                          label="Apartment number"
                                          required></v-text-field>

                            <v-btn flat color="red">Cancel</v-btn>

                            <v-btn flat
                                   color="primary"
                                   @@click="e1 = 1">
                                Previous step
                            </v-btn>

                            <v-btn flat
                                   color="success"
                                   @@click="e1 = 3">
                                Next step
                            </v-btn>

                        </v-stepper-content>

                        <v-stepper-content step="3">

                            <div>
                                <h2>
                                    Emails:
                                </h2>
                                <div>
                                    <ol>
                                        <li v-for="email of emails">
                                            {{email.emailValue}}
                                            <v-btn flat color="red" @@click="removeEmail(email.id)">
                                                <v-icon>remove_circle_outline</v-icon>
                                            </v-btn>
                                        </li>
                                    </ol>
                                </div>
                                <div>
                                    <table>
                                        <tr>
                                            <td class="col-md-6 col-lg-6 col-sm-6">
                                                <v-text-field v-model="currentEmail"
                                                              label="Email address"
                                                              required></v-text-field>
                                            </td>
                                            <td class="col-md-2 col-lg-2 col-sm-2">
                                                <v-btn flat color="success" @@click="addEmail">
                                                    <v-icon>add_circle_outline</v-icon>
                                                </v-btn>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div>
                                <h2>
                                    Phones:
                                </h2>
                                <div>
                                    <ol>
                                        <li v-for="phone of phones">
                                            {{phone.phoneValue}}
                                            <v-btn flat color="red" @@click="removePhone(phone.id)">
                                                <v-icon>remove_circle_outline</v-icon>
                                            </v-btn>
                                        </li>
                                    </ol>
                                </div>
                                <div>
                                    <table>
                                        <tr>
                                            <td class="col-md-6 col-lg-6 col-sm-6">
                                                <v-text-field v-model="currentPhone"
                                                              label="Phone number"
                                                              required></v-text-field>
                                            </td>
                                            <td class="col-md-2 col-lg-2 col-sm-2">
                                                <v-btn flat color="success" @@click="addPhone">
                                                    <v-icon>add_circle_outline</v-icon>
                                                </v-btn>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <v-btn flat color="red">Cancel</v-btn>

                            <v-btn flat
                                   color="primary"
                                   @@click="e1 = 2">
                                Previous step
                            </v-btn>

                            <v-btn flat
                                   color="success"
                                   @@click="e1 = 4">
                                Next step
                            </v-btn>

                        </v-stepper-content>

                        <v-stepper-content step="4">

                            <div>
                                <div>
                                    <h2>
                                        Summary:
                                    </h2>
                                </div>
                                <div>
                                    <table style="border-spacing: 20px; border-collapse: separate;">
                                        <tr>
                                            <td valign="top">
                                                <div>
                                                    <h3>
                                                        Name:
                                                    </h3>

                                                    <v-text-field v-model="firstName"
                                                                  label="Firstname"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="lastName"
                                                                  label="Lastname"
                                                                  required></v-text-field>
                                                </div>
                                            </td>
                                            <td valign="top">
                                                <h3>
                                                    Details:
                                                </h3>

                                                <v-combobox v-model="selectedGender"
                                                            :items="genders"
                                                            label="Gender"
                                                            required></v-combobox>
                                                <v-text-field slot="activator"
                                                              v-model="date"
                                                              label="Birth date"
                                                              readonly></v-text-field>
                                            </td>
                                            <td valign="top">
                                                <div>
                                                    <h3>
                                                        Address:
                                                    </h3>

                                                    <v-text-field v-model="country"
                                                                  label="Country"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="state"
                                                                  label="State"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="city"
                                                                  label="City"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="postalCode"
                                                                  label="Postal code"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="street"
                                                                  label="Street"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="houseNumber"
                                                                  label="House number"
                                                                  required></v-text-field>

                                                    <v-text-field v-model="apartmentNumber"
                                                                  label="Apartment number"
                                                                  required></v-text-field>
                                                </div>
                                            </td>
                                            <td valign="top">
                                                <h3>
                                                    Emails:
                                                </h3>
                                                <div v-if="emails.length === 0">
                                                    <h4>
                                                        None
                                                    </h4>
                                                </div>
                                                <div>
                                                    <ol>
                                                        <li v-for="email of emails">
                                                            {{email.emailValue}}
                                                            <v-btn flat color="red" @@click="removeEmail(email.id)">
                                                                <v-icon>remove_circle_outline</v-icon>
                                                            </v-btn>
                                                        </li>
                                                    </ol>
                                                </div>
                                            </td>
                                            <td valign="top">
                                                <h3>
                                                    Phones:
                                                </h3>
                                                <div v-if="phones.length === 0">
                                                    <h4>
                                                        None
                                                    </h4>
                                                </div>
                                                <div>
                                                    <ol>
                                                        <li v-for="phone of phones">
                                                            {{phone.phoneValue}}
                                                            <v-btn flat color="red" @@click="removePhone(phone.id)">
                                                                <v-icon>remove_circle_outline</v-icon>
                                                            </v-btn>
                                                        </li>
                                                    </ol>
                                                </div>
                                            </td>
                                            <td valign="top">
                                                <h3>
                                                    System:
                                                </h3>

                                                <v-checkbox v-model="admin"
                                                            label="Administrator"
                                                            color="indigo"
                                                            hide-details></v-checkbox>
                                            </td>

                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <v-btn flat color="red">Cancel</v-btn>

                            <v-btn flat
                                   color="primary"
                                   @@click="e1 = 3">
                                Previous step
                            </v-btn>

                            <v-btn flat color="success" @@click="postOperator">
                                Add operator
                            </v-btn>

                        </v-stepper-content>
                    </v-stepper-items>
                </v-stepper>
            </v-flex>
        </v-layout>
    </v-app>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: () => ({
            e1: 0,
            firstName: '',
            lastName: '',
            selectedGender: 'Male',
            date: null,
            menu: false,
            genders: [
                'Male',
                'Female'
            ],
            admin: false,
            country: '',
            state: '',
            city: '',
            postalCode: '',
            street: '',
            houseNumber: '',
            apartmentNumber: '',
            currentPhone: '',
            phones: [],
            currentEmail: '',
            emails: []
        }),

        methods: {
            addEmail: function () {
                if (this.currentEmail.length > 0 && !this.emails.some(x=>x.emailValue === this.currentEmail)) {
                    this.emails.push({
                        id: this.emails.length + 1,
                        emailValue: this.currentEmail
                    });
                    this.currentEmail = '';
                }
            },

            addPhone: function () {
                if (this.currentPhone.length > 0 && !this.phones.some(x=>x.phoneValue === this.currentPhone)) {
                    this.phones.push({
                        id: this.phones.length + 1,
                        phoneValue: this.currentPhone
                    });
                    this.currentPhone = '';
                }
            },

            removeEmail: function (id) {
                this.emails = this.emails.filter(function (email) {
                    return email.id !== id;
                });
            },

            removePhone: function (id) {
                this.phones = this.phones.filter(function (phone) {
                    return phone.id !== id;
                });
            },

            postOperator: function () {
                $.ajax({
                    url: "AddOperator?handler=Operator",
                    data: JSON.stringify({
                        Administrator: this.admin, Gender: this.selectedGender, BirthDate: this.birthDate, FirstName: this.firstName, LastName: this.lastName,
                        Emails: this.emails, PhoneNumbers: this.phones, Address: {
                            Country: this.country, State: this.state, City: this.city, PostalCode: this.postalCode,
                            Street: this.street, HouseNumber: this.houseNumber, ApartmentNumber: this.apartmentNumber
                        }
                    }),

                    contentType: "application/json",
                    type: "POST",
                    headers: {
                        "RequestVerificationToken": document.getElementById("RequestVerificationToken").value
                    },
                    success: function () {
                        console.log("success");
                    }
                });
            }
        }
    });
</script>