daily pastebin goal
36%
SHARE
TWEET

Untitled

a guest Jul 22nd, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <table class="table table-striped table-bordered">
  3.         <colgroup>
  4.             <col style="width: 70px;"> <col> <col> <col> <col> <col> <col>
  5.         </colgroup>
  6.  
  7.         <thead>
  8.             <tr>
  9.                 <th>Ид</th>
  10.                 <th>Название</th>
  11.                 <th>Кооментарий</th>
  12.                 <th>Десктоп</th>
  13.                 <th>Мобилы</th>
  14.                 <th>Включен</th>
  15.                 <th class="action-column">&nbsp;</th>
  16.             </tr>
  17.         </thead>
  18.  
  19.         <tbody>
  20.             <banner-table-row :banner="banner" v-for="banner in banners"></banner-table-row>
  21.         </tbody>
  22.     </table>
  23. </template>
  24.  
  25. <script>
  26. import BannerTableRow from './BannerTableRow.vue'
  27.  
  28. export default {
  29.     name: 'banner-table',
  30.     components: {
  31.         BannerTableRow,
  32.     },
  33.     created: function () {
  34.         //this.loadBanners();
  35.     },
  36.     data: () => ({
  37.         bannersUrl: '123',
  38.         banners: [{
  39.             id: 1,
  40.             name: "test.banner",
  41.             comment: "Тестовый баннер",
  42.             code: "<div id=\"test\">Hello world</div>",
  43.             start_at: null,
  44.             end_at: null,
  45.             desktop: true,
  46.             mobile: true,
  47.             enabled: true,
  48.             updated_at: "2018-07-22 16:48:12",
  49.             created_at: "2018-07-19 14:55:58",
  50.             view_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fview&id=1",
  51.             update_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fajax%2Fupdate&id=1",
  52.             delete_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fdelete&id=1"
  53.         }, {
  54.             id: 2,
  55.             name: "test2.banener",
  56.             comment: "Тестовый баннер номер два",
  57.             code: "<div>test2</div>",
  58.             start_at: null,
  59.             end_at: null,
  60.             desktop: false,
  61.             mobile: true,
  62.             enabled: true,
  63.             updated_at: "2018-07-22 16:35:16",
  64.             created_at: "2018-07-22 09:32:20",
  65.             view_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fview&id=2",
  66.             update_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fajax%2Fupdate&id=2",
  67.             delete_link: "/web/kobos/index.php?r=admin%2Fbanners%2Fmain%2Fdelete&id=2"
  68.         }],
  69.     }),
  70.     watch: {
  71.     },
  72.     methods: {
  73.         showModal() {
  74.             this.$modal.show('hello-world');
  75.         },
  76.         hideModal() {
  77.             this.$modal.hide('hello-world');
  78.         }
  79.         /*loadBanners: function () {
  80.             fetch(this.bannersUrl, {
  81.                 method: 'GET',
  82.                 credentials: 'same-origin'
  83.             }).then((response) => {
  84.                 if (!response.ok) {
  85.                     throw new Error(response.statusText);
  86.                 }
  87.  
  88.                 return response;
  89.             })
  90.             .then(response => response.json())
  91.             .then(response => this.banners = response)
  92.             .catch(function(error) {
  93.                 toastr.error(error.message);
  94.             });
  95.         },*/
  96.     },
  97. }
  98. </script>
  99.  
  100. <style>
  101.  
  102. </style>
  103.  
  104. ----------------------------------------------------------------------------------------
  105.  
  106. <template>
  107.     <tr>
  108.         <td>{{banner.id}}</td>
  109.         <td>
  110.             <a :href="banner.update_link">{{banner.name}}</a>
  111.         </td>
  112.         <td>{{banner.comment}}</td>
  113.         <td>
  114.             <toggle-button v-model="banner.desktop" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
  115.         </td>
  116.         <td>
  117.             <toggle-button v-model="banner.mobile" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
  118.         </td>
  119.         <td>
  120.             <toggle-button v-model="banner.enabled" :labels="{checked: 'Yes', unchecked: 'No'}"></toggle-button>
  121.         </td>
  122.         <td>
  123.             <a :href="banner.view_link" v-on:click.prevent="showModal" title="Просмотр" aria-label="Просмотр" data-pjax="0"><span class="glyphicon glyphicon-eye-open">V</span></a>
  124.             <a :href="banner.update_link" title="Редактировать" aria-label="Редактировать" data-pjax="0"><span class="glyphicon glyphicon-pencil">E</span></a>
  125.             <a :href="banner.delete_link" title="Удалить" aria-label="Удалить" data-pjax="0" data-confirm="Вы уверены, что хотите удалить этот элемент?" data-method="post"><span class="glyphicon glyphicon-trash">D</span></a>
  126.         </td>
  127.     </tr>
  128. </template>
  129.  
  130. <script>
  131.  
  132. export default {
  133.     props: ['banner'],
  134.     watch: {
  135.         banner: {
  136.             handler: function(after, before) {
  137.                 /*let formData = new FormData();
  138.                 formData.append('desktop', +after.desktop); // convert bool to int;
  139.                 formData.append('mobile', +after.mobile);
  140.                 formData.append('enabled', +after.enabled);*/
  141. console.log(after, before);
  142.                 /*fetch(before.update_link, {
  143.                     method: 'POST',
  144.                     body: formData,
  145.                     credentials: 'same-origin'
  146.                 }).then((response) => {
  147.                     if (!response.ok) {
  148.                         throw new Error(response.statusText);
  149.                     }
  150.  
  151.                     return response;
  152.                 })
  153.                 .then(response => response.json())
  154.                 .then(function (data) {
  155.                     if (data.error !== undefined) {
  156.                         throw new Error(data.error.message);
  157.                     }
  158.  
  159.                     toastr.success(data.message);
  160.                 })
  161.                 .catch(function(error) {
  162.                     toastr.error(error.message);
  163.                 });*/
  164.             },
  165.             deep: true
  166.         },
  167.     },
  168.     methods: {
  169.         showModal() {
  170.             this.$modal.show({
  171.                 template: `
  172.                     <div :min-width="200" :min-height="200">
  173.                         <h1>This is created inline</h1>
  174.                         <p>{{ text }}</p>
  175.                         <br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123
  176.                     </div>
  177.                 `,
  178.                 props: ['text']
  179.             }, {
  180.                 text: 'This text is passed as a property'
  181.             }, {
  182.                 width: '70%',
  183.                 height: 'auto',
  184.                 scrollable: true
  185.             }, {
  186.                 'before-close': (event) => { console.log('this will be called before the modal closes'); }
  187.             });
  188.         },
  189.         hideModal() {
  190.             this.$modal.hide('hello-world');
  191.         }
  192.     },
  193. }
  194. </script>
  195.  
  196. <style>
  197.  
  198. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top