isotonicq

Front

Oct 28th, 2018
170
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @page
  2. @model ManagmentWebPanel.Pages.Operators.AddOperatorModel
  3. @{
  4.     ViewData["Title"] = "AddOperator";
  5. }
  6.  
  7. @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
  8.  
  9. @functions
  10. {
  11. public string GetAntiXsrfRequestToken()
  12. {
  13.     return Xsrf.GetAndStoreTokens(ViewContext.HttpContext).RequestToken;
  14. }
  15. }
  16.  
  17. <input type="hidden" id="RequestVerificationToken" name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
  18.  
  19. <div id="app">
  20.     <v-app id="inspire">
  21.         <v-layout row>
  22.             <v-flex>
  23.                 <v-toolbar flat dark color="success">
  24.                     <v-toolbar-title>Adding new operator</v-toolbar-title>
  25.                 </v-toolbar>
  26.                 <v-stepper v-model="e1">
  27.                     <v-stepper-header>
  28.                         <v-stepper-step :complete="e1 > 1" step="1">Basic information</v-stepper-step>
  29.  
  30.                         <v-divider></v-divider>
  31.  
  32.                         <v-stepper-step :complete="e1 > 2" step="2">Address information</v-stepper-step>
  33.  
  34.                         <v-divider></v-divider>
  35.  
  36.                         <v-stepper-step :complete="e1 > 3" step="3">Contact information</v-stepper-step>
  37.  
  38.                         <v-divider></v-divider>
  39.  
  40.                         <v-stepper-step step="4">Summary</v-stepper-step>
  41.  
  42.                     </v-stepper-header>
  43.  
  44.                     <v-stepper-items>
  45.                         <v-stepper-content step="1">
  46.  
  47.                             <h2>
  48.                                 Name:
  49.                             </h2>
  50.  
  51.                             <v-text-field v-model="firstName"
  52.                                          label="Firstname"
  53.                                          required></v-text-field>
  54.  
  55.                             <v-text-field v-model="lastName"
  56.                                          label="Lastname"
  57.                                          required></v-text-field>
  58.  
  59.                             <h2>
  60.                                 Details:
  61.                             </h2>
  62.  
  63.                             <v-combobox v-model="selectedGender"
  64.                                        :items="genders"
  65.                                        label="Gender"
  66.                                        required></v-combobox>
  67.  
  68.                             <v-menu ref="menu"
  69.                                    :close-on-content-click="false"
  70.                                    v-model="menu"
  71.                                    :nudge-right="40"
  72.                                    :return-value.sync="date"
  73.                                    lazy
  74.                                    transition="scale-transition"
  75.                                    offset-y
  76.                                    full-width
  77.                                    min-width="290px">
  78.                                 <v-text-field slot="activator"
  79.                                              v-model="date"
  80.                                              label="Birth date"
  81.                                              readonly></v-text-field>
  82.                                 <v-date-picker v-model="date" no-title scrollable>
  83.                                     <v-spacer></v-spacer>
  84.                                     <v-btn flat color="primary" @@click="menu = false">Cancel</v-btn>
  85.                                     <v-btn flat color="primary" @@click="$refs.menu.save(date)">OK</v-btn>
  86.                                 </v-date-picker>
  87.                             </v-menu>
  88.  
  89.                             <h2>
  90.                                 System:
  91.                             </h2>
  92.  
  93.                             <v-checkbox v-model="admin"
  94.                                        label="Administrator"
  95.                                        color="indigo"
  96.                                        hide-details></v-checkbox>
  97.  
  98.                             <v-btn flat color="red">Cancel</v-btn>
  99.  
  100.                             <v-btn flat
  101.                                   color="primary"
  102.                                   @@click="e1 = 1">
  103.                                 Previous step
  104.                             </v-btn>
  105.                             <v-btn flat
  106.                                   color="success"
  107.                                   @@click="e1 = 2">
  108.                                 Next step
  109.                             </v-btn>
  110.  
  111.  
  112.                         </v-stepper-content>
  113.  
  114.                         <v-stepper-content step="2">
  115.  
  116.                             <h2>
  117.                                 Address:
  118.                             </h2>
  119.  
  120.                             <v-text-field v-model="country"
  121.                                          label="Country"
  122.                                          required></v-text-field>
  123.  
  124.                             <v-text-field v-model="state"
  125.                                          label="State"
  126.                                          required></v-text-field>
  127.  
  128.                             <v-text-field v-model="city"
  129.                                          label="City"
  130.                                          required></v-text-field>
  131.  
  132.                             <v-text-field v-model="postalCode"
  133.                                          label="Postal code"
  134.                                          required></v-text-field>
  135.  
  136.                             <v-text-field v-model="street"
  137.                                          label="Street"
  138.                                          required></v-text-field>
  139.  
  140.                             <v-text-field v-model="houseNumber"
  141.                                          label="House number"
  142.                                          required></v-text-field>
  143.  
  144.                             <v-text-field v-model="apartmentNumber"
  145.                                          label="Apartment number"
  146.                                          required></v-text-field>
  147.  
  148.                             <v-btn flat color="red">Cancel</v-btn>
  149.  
  150.                             <v-btn flat
  151.                                   color="primary"
  152.                                   @@click="e1 = 1">
  153.                                 Previous step
  154.                             </v-btn>
  155.  
  156.                             <v-btn flat
  157.                                   color="success"
  158.                                   @@click="e1 = 3">
  159.                                 Next step
  160.                             </v-btn>
  161.  
  162.                         </v-stepper-content>
  163.  
  164.                         <v-stepper-content step="3">
  165.  
  166.                             <div>
  167.                                 <h2>
  168.                                     Emails:
  169.                                 </h2>
  170.                                 <div>
  171.                                     <ol>
  172.                                         <li v-for="email of emails">
  173.                                             {{email.emailValue}}
  174.                                             <v-btn flat color="red" @@click="removeEmail(email.id)">
  175.                                                 <v-icon>remove_circle_outline</v-icon>
  176.                                             </v-btn>
  177.                                         </li>
  178.                                     </ol>
  179.                                 </div>
  180.                                 <div>
  181.                                     <table>
  182.                                         <tr>
  183.                                             <td class="col-md-6 col-lg-6 col-sm-6">
  184.                                                 <v-text-field v-model="currentEmail"
  185.                                                              label="Email address"
  186.                                                              required></v-text-field>
  187.                                             </td>
  188.                                             <td class="col-md-2 col-lg-2 col-sm-2">
  189.                                                 <v-btn flat color="success" @@click="addEmail">
  190.                                                     <v-icon>add_circle_outline</v-icon>
  191.                                                 </v-btn>
  192.                                             </td>
  193.                                         </tr>
  194.                                     </table>
  195.                                 </div>
  196.                             </div>
  197.  
  198.                             <div>
  199.                                 <h2>
  200.                                     Phones:
  201.                                 </h2>
  202.                                 <div>
  203.                                     <ol>
  204.                                         <li v-for="phone of phones">
  205.                                             {{phone.phoneValue}}
  206.                                             <v-btn flat color="red" @@click="removePhone(phone.id)">
  207.                                                 <v-icon>remove_circle_outline</v-icon>
  208.                                             </v-btn>
  209.                                         </li>
  210.                                     </ol>
  211.                                 </div>
  212.                                 <div>
  213.                                     <table>
  214.                                         <tr>
  215.                                             <td class="col-md-6 col-lg-6 col-sm-6">
  216.                                                 <v-text-field v-model="currentPhone"
  217.                                                              label="Phone number"
  218.                                                              required></v-text-field>
  219.                                             </td>
  220.                                             <td class="col-md-2 col-lg-2 col-sm-2">
  221.                                                 <v-btn flat color="success" @@click="addPhone">
  222.                                                     <v-icon>add_circle_outline</v-icon>
  223.                                                 </v-btn>
  224.                                             </td>
  225.                                         </tr>
  226.                                     </table>
  227.                                 </div>
  228.                             </div>
  229.  
  230.                             <v-btn flat color="red">Cancel</v-btn>
  231.  
  232.                             <v-btn flat
  233.                                   color="primary"
  234.                                   @@click="e1 = 2">
  235.                                 Previous step
  236.                             </v-btn>
  237.  
  238.                             <v-btn flat
  239.                                   color="success"
  240.                                   @@click="e1 = 4">
  241.                                 Next step
  242.                             </v-btn>
  243.  
  244.                         </v-stepper-content>
  245.  
  246.                         <v-stepper-content step="4">
  247.  
  248.                             <div>
  249.                                 <div>
  250.                                     <h2>
  251.                                         Summary:
  252.                                     </h2>
  253.                                 </div>
  254.                                 <div>
  255.                                     <table style="border-spacing: 20px; border-collapse: separate;">
  256.                                         <tr>
  257.                                             <td valign="top">
  258.                                                 <div>
  259.                                                     <h3>
  260.                                                         Name:
  261.                                                     </h3>
  262.  
  263.                                                     <v-text-field v-model="firstName"
  264.                                                                  label="Firstname"
  265.                                                                  required></v-text-field>
  266.  
  267.                                                     <v-text-field v-model="lastName"
  268.                                                                  label="Lastname"
  269.                                                                  required></v-text-field>
  270.                                                 </div>
  271.                                             </td>
  272.                                             <td valign="top">
  273.                                                 <h3>
  274.                                                     Details:
  275.                                                 </h3>
  276.  
  277.                                                 <v-combobox v-model="selectedGender"
  278.                                                            :items="genders"
  279.                                                            label="Gender"
  280.                                                            required></v-combobox>
  281.                                                 <v-text-field slot="activator"
  282.                                                              v-model="date"
  283.                                                              label="Birth date"
  284.                                                              readonly></v-text-field>
  285.                                             </td>
  286.                                             <td valign="top">
  287.                                                 <div>
  288.                                                     <h3>
  289.                                                         Address:
  290.                                                     </h3>
  291.  
  292.                                                     <v-text-field v-model="country"
  293.                                                                  label="Country"
  294.                                                                  required></v-text-field>
  295.  
  296.                                                     <v-text-field v-model="state"
  297.                                                                  label="State"
  298.                                                                  required></v-text-field>
  299.  
  300.                                                     <v-text-field v-model="city"
  301.                                                                  label="City"
  302.                                                                  required></v-text-field>
  303.  
  304.                                                     <v-text-field v-model="postalCode"
  305.                                                                  label="Postal code"
  306.                                                                  required></v-text-field>
  307.  
  308.                                                     <v-text-field v-model="street"
  309.                                                                  label="Street"
  310.                                                                  required></v-text-field>
  311.  
  312.                                                     <v-text-field v-model="houseNumber"
  313.                                                                  label="House number"
  314.                                                                  required></v-text-field>
  315.  
  316.                                                     <v-text-field v-model="apartmentNumber"
  317.                                                                  label="Apartment number"
  318.                                                                  required></v-text-field>
  319.                                                 </div>
  320.                                             </td>
  321.                                             <td valign="top">
  322.                                                 <h3>
  323.                                                     Emails:
  324.                                                 </h3>
  325.                                                 <div v-if="emails.length === 0">
  326.                                                     <h4>
  327.                                                         None
  328.                                                     </h4>
  329.                                                 </div>
  330.                                                 <div>
  331.                                                     <ol>
  332.                                                         <li v-for="email of emails">
  333.                                                             {{email.emailValue}}
  334.                                                             <v-btn flat color="red" @@click="removeEmail(email.id)">
  335.                                                                 <v-icon>remove_circle_outline</v-icon>
  336.                                                             </v-btn>
  337.                                                         </li>
  338.                                                     </ol>
  339.                                                 </div>
  340.                                             </td>
  341.                                             <td valign="top">
  342.                                                 <h3>
  343.                                                     Phones:
  344.                                                 </h3>
  345.                                                 <div v-if="phones.length === 0">
  346.                                                     <h4>
  347.                                                         None
  348.                                                     </h4>
  349.                                                 </div>
  350.                                                 <div>
  351.                                                     <ol>
  352.                                                         <li v-for="phone of phones">
  353.                                                             {{phone.phoneValue}}
  354.                                                             <v-btn flat color="red" @@click="removePhone(phone.id)">
  355.                                                                 <v-icon>remove_circle_outline</v-icon>
  356.                                                             </v-btn>
  357.                                                         </li>
  358.                                                     </ol>
  359.                                                 </div>
  360.                                             </td>
  361.                                             <td valign="top">
  362.                                                 <h3>
  363.                                                     System:
  364.                                                 </h3>
  365.  
  366.                                                 <v-checkbox v-model="admin"
  367.                                                            label="Administrator"
  368.                                                            color="indigo"
  369.                                                            hide-details></v-checkbox>
  370.                                             </td>
  371.  
  372.                                         </tr>
  373.                                     </table>
  374.                                 </div>
  375.                             </div>
  376.  
  377.                             <v-btn flat color="red">Cancel</v-btn>
  378.  
  379.                             <v-btn flat
  380.                                   color="primary"
  381.                                   @@click="e1 = 3">
  382.                                 Previous step
  383.                             </v-btn>
  384.  
  385.                             <v-btn flat color="success" @@click="postOperator">
  386.                                 Add operator
  387.                             </v-btn>
  388.  
  389.                         </v-stepper-content>
  390.                     </v-stepper-items>
  391.                 </v-stepper>
  392.             </v-flex>
  393.         </v-layout>
  394.     </v-app>
  395. </div>
  396.  
  397. <script type="text/javascript">
  398.     var vm = new Vue({
  399.         el: '#app',
  400.         data: () => ({
  401.             e1: 0,
  402.             firstName: '',
  403.             lastName: '',
  404.             selectedGender: 'Male',
  405.             date: null,
  406.             menu: false,
  407.             genders: [
  408.                 'Male',
  409.                 'Female'
  410.             ],
  411.             admin: false,
  412.             country: '',
  413.             state: '',
  414.             city: '',
  415.             postalCode: '',
  416.             street: '',
  417.             houseNumber: '',
  418.             apartmentNumber: '',
  419.             currentPhone: '',
  420.             phones: [],
  421.             currentEmail: '',
  422.             emails: []
  423.         }),
  424.  
  425.         methods: {
  426.             addEmail: function () {
  427.                 if (this.currentEmail.length > 0 && !this.emails.some(x=>x.emailValue === this.currentEmail)) {
  428.                    this.emails.push({
  429.                        id: this.emails.length + 1,
  430.                        emailValue: this.currentEmail
  431.                    });
  432.                     this.currentEmail = '';
  433.                 }
  434.             },
  435.  
  436.             addPhone: function () {
  437.                 if (this.currentPhone.length > 0 && !this.phones.some(x=>x.phoneValue === this.currentPhone)) {
  438.                    this.phones.push({
  439.                        id: this.phones.length + 1,
  440.                        phoneValue: this.currentPhone
  441.                    });
  442.                     this.currentPhone = '';
  443.                 }
  444.             },
  445.  
  446.             removeEmail: function (id) {
  447.                 this.emails = this.emails.filter(function (email) {
  448.                     return email.id !== id;
  449.                 });
  450.             },
  451.  
  452.             removePhone: function (id) {
  453.                 this.phones = this.phones.filter(function (phone) {
  454.                     return phone.id !== id;
  455.                 });
  456.             },
  457.  
  458.             postOperator: function () {
  459.                 $.ajax({
  460.                     url: "AddOperator?handler=Operator",
  461.                     data: JSON.stringify({
  462.                         Administrator: this.admin, Gender: this.selectedGender, BirthDate: this.birthDate, FirstName: this.firstName, LastName: this.lastName,
  463.                         Emails: this.emails, PhoneNumbers: this.phones, Address: {
  464.                             Country: this.country, State: this.state, City: this.city, PostalCode: this.postalCode,
  465.                             Street: this.street, HouseNumber: this.houseNumber, ApartmentNumber: this.apartmentNumber
  466.                         }
  467.                     }),
  468.  
  469.                     contentType: "application/json",
  470.                     type: "POST",
  471.                     headers: {
  472.                         "RequestVerificationToken": document.getElementById("RequestVerificationToken").value
  473.                     },
  474.                     success: function () {
  475.                         console.log("success");
  476.                     }
  477.                 });
  478.             }
  479.         }
  480.     });
  481. </script>
RAW Paste Data