Added more templates

Author: arkada38

projects/whatsapp_direct/index.html

@@ -34,7 +34,9 @@
                 <div class="card">
                     <div class="card-header">Прямая связь</div>
                     <div class="card-body">
-                        <label>Номер телефона: {{country}}</label>
+                        <label>Номер телефона:
+                            <span v-html="country"></span>
+                        </label>
                         <div class="input-group mb-3">
                             <input type="tel" class="form-control" v-model="tel" v-on:input="saveTel()">
                             <div class="input-group-append">
@@ -44,10 +46,29 @@
 
                         <div class="form-group">
                             <label for="comment">Сообщение (необязательно):</label>
-                            <textarea class="form-control" rows="5" v-model="message" v-on:input="saveMessage()"></textarea>
+
+                            <ul class="nav nav-pills nav-justified">
+                                <li class="nav-item">
+                                    <a class="nav-link" v-bind:class="{ active: active_tab == 0 }" v-on:click="setActiveTab(0)" href="#">I</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" v-bind:class="{ active: active_tab == 1 }" v-on:click="setActiveTab(1)" href="#">II</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" v-bind:class="{ active: active_tab == 2 }" v-on:click="setActiveTab(2)" href="#">III</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" v-bind:class="{ active: active_tab == 3 }" v-on:click="setActiveTab(3)" href="#">IV</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" v-bind:class="{ active: active_tab == 4 }" v-on:click="setActiveTab(4)" href="#">V</a>
+                                </li>
+                            </ul>
+
+                            <textarea class="form-control mt-3" rows="5" v-model="active_message" v-on:input="saveMessages()"></textarea>
                         </div>
 
-                        <button type="button" class="btn btn-block btn-outline-primary" v-on:click="clearMessage()">Очистить текст сообщения</button>
+                        <button type="button" class="btn btn-block btn-outline-primary" v-on:click="clearActiveMessage()">Очистить текст сообщения</button>
 
                         <a v-bind:href="whatsapp_link" class="btn btn-block btn-success" role="button">Открыть в WhatsApp</a>
                     </div>

projects/whatsapp_direct/scripts/script.js

@@ -2,7 +2,9 @@ var app = new Vue({
   el: '#app',
   data: {
     tel: localStorage.getItem('tel') === null ? '' : localStorage.getItem('tel'),
-    message: localStorage.getItem('message') === null ? 'Здравствуйте, ' : localStorage.getItem('message')
+    messages: localStorage.getItem('messages') === null ? ['Здравствуйте, ', 'Здравствуйте, ', 'Здравствуйте, ', 'Здравствуйте, ', 'Здравствуйте, '] :
+      JSON.parse(localStorage.getItem('messages')),
+    active_tab: localStorage.getItem('active_tab') === null ? '0' : localStorage.getItem('active_tab')
   },
   computed: {
     tel_numeric: function () {
@@ -13,35 +15,47 @@ var app = new Vue({
 
       return numbers
     },
+    active_message: {
+      get: function () {
+        return this.messages[this.active_tab]
+      },
+      set: function (newValue) {
+        Vue.set(this.messages, this.active_tab, newValue)
+      }
+    },
     message_encoded: function () {
-      return encodeURI(this.message).replace(/%5B/g, '[').replace(/%5D/g, ']')
+      return encodeURI(this.messages[this.active_tab]).replace(/%5B/g, '[').replace(/%5D/g, ']')
     },
     whatsapp_link: function () {
       return 'https://api.whatsapp.com/send?phone=' + this.tel_numeric + '&text=' + this.message_encoded
     },
     country: function () {
       var data = new libphonenumber.parse('+' + this.tel_numeric)
-      
+
       if (data.country == undefined)
         return ''
 
-      return data.country + ' - ' + getCountryName(data.country)
+      return '<span class="badge badge-secondary">' + data.country + '</span> - <span class="badge badge-light">' + getCountryName(data.country) + '</span>'
     }
   },
   methods: {
     saveTel: function () {
       localStorage.setItem('tel', this.tel)
     },
-    saveMessage: function () {
-      localStorage.setItem('message', this.message)
+    saveMessages: function () {
+      localStorage.setItem('messages', JSON.stringify(this.messages))
     },
     clearTel: function () {
       this.tel = ''
       this.saveTel()
     },
-    clearMessage: function () {
-      this.message = ''
-      this.saveMessage()
+    clearActiveMessage: function () {
+      this.active_message = ''
+      this.saveMessages()
+    },
+    setActiveTab: function (n) {
+      this.active_tab = n
+      localStorage.setItem('active_tab', n)
     }
   }
 })