Skip to content

Instantly share code, notes, and snippets.

@gopalindians

gopalindians/z.vue

Created July 22, 2020 18:07
Show Gist options
  • Save gopalindians/88eb111078b632cb5a3f28046ba526e0 to your computer and use it in GitHub Desktop.
Save gopalindians/88eb111078b632cb5a3f28046ba526e0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gopalindians revised this gist Jul 22, 2020. 1 changed file with 11 additions and 17 deletions.
    28 changes: 11 additions & 17 deletions z.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@
    </div>
    </div>
    </div>
    <!-- {{ webinars }}-->
    <!-- {{ webinars }}-->
    </div>
    </template>

    @@ -112,23 +112,17 @@
    mounted() {
    console.log(this.webinars);
    let _this = this;
    setTimeout(() => {
    try {
    axios.get("http://fc7a16d66c13.ngrok.io/api/webinar/published/all").then(function (response) {
    _this.setData(response);
    console.log(_this.webinars);
    }).catch(function (e) {
    console.log(e);
    });
    } catch (error) {
    console.log(error);
    }
    },5000);
    try {
    axios.get("http://fc7a16d66c13.ngrok.io/api/webinar/published/all").then(function (response) {
    _this.setData(response);
    console.log(_this.webinars);
    }).catch(function (e) {
    console.log(e);
    });
    } catch (error) {
    console.log(error);
    }
    }
    };
    </script>
  2. gopalindians created this gist Jul 22, 2020.
    134 changes: 134 additions & 0 deletions z.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,134 @@
    <template>
    <div class="container" style="margin-top:50px">
    <div :key="weibnar.id" v-for="weibnar in webinars">
    <h2 class="mt-5" v-if="loading">{{ weibnar.heading }}</h2>
    <div class="row">
    <div :key="web.id"
    class="col-sm-4 col-md-2 col-lg-2 col-xxl-2 mt-3" v-for="web in weibnar.w_data">

    <v-skeleton-loader
    :loading="loading"
    class="card h-100"
    max-width="300"
    type="card"
    v-show="loading"></v-skeleton-loader>

    <div class="card h-100" v-if="!loading">
    <img
    alt="Card image cap"
    class="card-img-top"
    src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17369a5ed01%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17369a5ed01%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.4140625%22%20y%3D%2296.2015625%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
    />
    <div class="card-body">
    <p class="card-text text-danger">
    {{ web.start_date }}
    </p>
    <p class="card-text">{{ web.name }}</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- {{ webinars }}-->
    </div>
    </template>

    <script>
    import axios from "axios";
    export default {
    data() {
    return {
    webinars: [
    {
    "background_image": "http:\/\/fair.ria-virtual-fair.io\/tenancy\/assets\/images\/banner.jpg"
    },
    {
    "heading": "This Week Events", "w_data": [
    {
    "id": 12,
    "formatted_start_date": "Sat 25, Jul 2020 23:32:14 GMT"
    }, {
    "id": 10,
    "formatted_start_date": "Thu 23, Jul 2020 15:30:31 GMT"
    }, {
    "id": 9,
    "formatted_start_date": "Fri 24, Jul 2020 23:24:43 GMT"
    }, {
    "id": 3,
    "formatted_start_date": "Thu 23, Jul 2020 00:00:00 GMT"
    }]
    },
    {
    "heading": "Next Week Events", "w_data": [
    {
    "id": 11,
    "formatted_start_date": "Fri 31, Jul 2020 14:57:44 GMT"
    }, {
    "id": 5,
    "formatted_start_date": "Sat 01, Aug 2020 05:46:15 GMT"
    }, {
    "id": 4,
    "formatted_start_date": "Tue 04, Aug 2020 04:37:59 GMT"
    }]
    }, {
    "heading": "Up-Coming Events", "w_data": [
    {
    "id": 13,
    "formatted_start_date": "Fri 07, Aug 2020 11:22:28 GMT"
    }, {
    "id": 8,
    "formatted_start_date": "Thu 13, Aug 2020 06:44:02 GMT"
    }, {
    "id": 7,
    "formatted_start_date": "Tue 11, Aug 2020 17:11:49 GMT"
    }, {
    "id": 6,
    "formatted_start_date": "Sat 15, Aug 2020 13:08:19 GMT"
    }, {
    "id": 1,
    "formatted_start_date": "Tue 18, Aug 2020 00:00:00 GMT"
    }]
    }],
    loading: true
    }
    },
    methods: {
    setData(data) {
    this.webinars = data.data.data;
    this.loading = false;
    }
    },
    mounted() {
    console.log(this.webinars);
    let _this = this;
    setTimeout(() => {
    try {
    axios.get("http://fc7a16d66c13.ngrok.io/api/webinar/published/all").then(function (response) {
    _this.setData(response);
    console.log(_this.webinars);
    }).catch(function (e) {
    console.log(e);
    });
    } catch (error) {
    console.log(error);
    }
    },5000);
    }
    };
    </script>