{"id":295,"date":"2017-07-25T06:50:41","date_gmt":"2017-07-25T06:50:41","guid":{"rendered":"https:\/\/www.veloforum.org.ua\/?page_id=295"},"modified":"2021-08-19T19:14:12","modified_gmt":"2021-08-19T17:14:12","slug":"program","status":"publish","type":"page","link":"https:\/\/www.veloforum.org.ua\/en\/program\/","title":{"rendered":"Program"},"content":{"rendered":"<p>Conference&#8217;s main topic: &#8216;<strong>Cycling tourism is the key to sustainable territorial development<\/strong>&#8216;.<\/p>\n<p>The Program of Veloforum 2020 will be available soon.<\/p>\n\n<div class=\"wrap\">\n<div id=\"q-app\">\n\n<q-tabs\n    align=\"left\"\n    v-model=\"tabdates\"\n    class=\"text-teal\">\n    \n    <q-tab v-for=\"(dateitem, index) in dateitems\"\n           :key=\"dateitem.id\"\n           :name=\"dateitem.id\"\n            icon=\"event\"\n           :label=\"dateitem_str1(dateitem.eventdate)\">\n        <span>{{ dateitem_str2(dateitem.eventdate) }}<\/span>\n    <\/q-tab>\n    \n    <q-tab name=\"info\" icon=\"help\" label=\"Instruction\"><\/q-tab>\n<\/q-tabs>\n\n<q-tab-panels animated vertical\n        v-model=\"tabdates\"\n        transition-prev=\"jump-up\"\n        transition-next=\"jump-up\">\n\n    <q-tab-panel v-for=\"(tabdate, index) in dateitems\"\n                 :name=\"tabdate.id\"\n                 class=\"q-px-none\">\n        <div class=\"q-gutter-y-md\">\n            <q-card>\n                <q-toolbar class=\"shadow-2 bg-teal-4 text-white rounded-borders\">\n                    <q-tabs v-model=\"tabmaydan\"\n                            dense\n                            class=\"text-white\"\n                            active-color=\"primary\"\n                            indicator-color=\"primary\"\n                            align=\"justify\"\n                            narrow-indicator>\n                        <q-tab v-for=\"(maydan, index) in maydans\"\n                               :key=\"maydan.id\"\n                               v-show=\"(tabdate.id == maydan.dateitem_id)\"\n                               :label=\"maydan.name\"\n                               class=\"maydans\"\n                               :name=\"maydan.id\">\n                        <\/q-tab>\n                    <\/q-tabs>\n                <\/q-toolbar>\n                \n                <q-separator><\/q-separator>\n\n                <q-tab-panels class=\"bg-teal-1\" v-model=\"tabmaydan\" animated>\n                    <q-tab-panel v-for=\"(maydan, index) in maydans\"\n                                 :key=\"maydan.id\"\n                                 v-show=\"(tabdate.id == maydan.dateitem_id)\"\n                                 :name=\"maydan.id\">\n\n                        <div class=\"row q-mb-md\">\n                            <div class=\"col\">{{maydan.description}}<\/div>\n                        <\/div>\n                        \n                        <q-list bordered>\n                            <div\n                                v-for=\"(lection, index) in lections\"\n                                :key=\"lection.id\"\n                                v-show=\"(lection.maydan_id == maydan.id)\">\n                                <q-expansion-item\n                                        class=\"bg-blue-4\"\n                                        group=\"lectiongroup\"\n                                        icon=\"headset\"\n                                        :label=\"lection.starttime +' - '+ lection.endtime +'   '+ lection.name\"\n                                        header-class=\"text-white\"\n                                        expand-icon-class=\"text-white\">\n                                    <q-card class=\"bg-blue-grey-1 text-blue-grey-10\">\n                                        <q-card-section>\n                                            <div class=\"row q-mb-md\">\n                                                <div class=\"col\">\n                                                    <p>{{lection.description}}<\/p>\n                                                    <q-btn @click=\"gotosream(lection.link)\"\n                                                           color=\"secondary\"\n                                                           label=\"Go to stream\"><\/q-btn>\n                                                <\/div>\n                                            <\/div>\n\n                                            <div class=\"row q-mb-md\">\n                                                <div class=\"col-sm-6 col-xs-12\">\n                                                    <strong v-if=\"(checkModers(lection.id) > 0)\">\n                                                        <span>Moderator<\/span>\n                                                        <span v-if=\"checkModer(lection.id)\">{{checkModer(lection.id)}}<\/span>\n                                                        <span v-if=\"checkModers(lection.id)>1\">s<\/span>:\n                                                    <\/strong>\n                                                    <q-list>\n                                                        <div v-for=\"(moderator, index) in moderators\"\n                                                             v-show=\"(moderator.lection_id == lection.id)\"\n                                                             :key=\"moderator.id\">\n                                                            <div>\n                                                                <q-item>\n                                                                    <q-item-section>\n                                                                        <q-item-label>{{moderator.name}} <!-- <q-icon :name=\"moderator.sex\"><\/q-icon> --><\/q-item-label>\n                                                                        <q-item-label caption lines=\"2\">{{moderator.description}}<\/q-item-label>\n                                                                    <\/q-item-section>\n                                                                <\/q-item>\n                                                            <\/div>\n                                                            <q-separator spaced inset \/>\n                                                        <\/div>\n                                                    <\/q-list>\n                                                <\/div>\n\n                                                <div class=\"col-sm-6 col-xs-12\">\n                                                    <strong v-if=\"(checkSpeakers(lection.id) > 0)\">\n                                                        <span>Speaker<\/span>\n                                                        <span v-if=\"checkSpeaker(lection.id)\">{{checkSpeaker(lection.id)}}<\/span>\n                                                        <span v-if=\"checkSpeakers(lection.id)\">s<\/span>:\n                                                    <\/strong>\n                                                    <q-list>\n                                                        <div v-for=\"(speaker, index) in speakers\"\n                                                             v-show=\"(speaker.lection_id == lection.id)\"\n                                                             :key=\"speaker.id\">\n                                                            <div>\n                                                                <q-item>\n                                                                    <q-item-section>\n                                                                        <q-item-label>{{speaker.name}} <!-- <q-icon :name=\"speaker.sex\"><\/q-icon> --><\/q-item-label>\n                                                                        <q-item-label caption lines=\"2\">{{speaker.description}}<\/q-item-label>\n                                                                    <\/q-item-section>\n                                                                <\/q-item>\n                                                            <\/div>\n                                                            <q-separator spaced inset><\/q-separator>\n                                                        <\/div>\n                                                    <\/q-list>\n                                                <\/div>\n                                            <\/div>\n\n                                        <\/q-card-section>\n                                    <\/q-card>\n                                <\/q-expansion-item>\n                                <q-separator><\/q-separator>\n                            <\/div>\n                        <\/q-list>\n                    <\/q-tab-panel>\n                <\/q-tab-panels>\n            <\/q-card>\n        <\/div>\n\n    <\/q-tab-panel>\n\n    <q-tab-panel name=\"info\">\n        <div class=\"text-h4 q-mb-md\">Instruction<\/div>\n        <p>To start watching the broadcast, select the date and place, then the lecture that interests you. Next - click on the <b>\"Go to stream\"<\/b> button<\/p>\n        <p>While the broadcast is in progress, you can watch the program, switch between dates and venues. The broadcast will refresh only when you click on the <b> \"Go to stream\" <\/b> button<\/p>\n    <\/q-tab-panel>\n<\/q-tab-panels>\n\n<div id=\"videoplayer\"\n     class=\"q-pa-md\">\n    <q-video :ratio=\"16\/9\" :src=streamlink><\/q-video>\n<\/div>\n\n<\/div>\n<!-- end main app -->\n<script src=\"https:\/\/www.veloforum.org.ua\/wp-content\/plugins\/forum-platforma\/\/src\/axios-jsDelivr.min.js\"><\/script>\n<script src=\"https:\/\/www.veloforum.org.ua\/wp-content\/plugins\/forum-platforma\/\/src\/vue.global.prod.js\"><\/script>\n<script src=\"https:\/\/www.veloforum.org.ua\/wp-content\/plugins\/forum-platforma\/\/src\/quasar.umd.prod.js\"><\/script>\n<script src=\"https:\/\/www.veloforum.org.ua\/wp-content\/plugins\/forum-platforma\/\/src\/vue-i18n.global.js\"><\/script>\n<script>\n\nconst curdate = '2026-07-02';\nconst form = new FormData();\nconst curlang = 'en';\n\nconst app = Vue.createApp({\n    data: function () {\n        return {\n            version: Quasar.version,\n            streamlink: '',\n                     \n            locale: {\n                ua: {\n                    days: ['\u041d\u0435\u0434\u0456\u043b\u044f', '\u041f\u043e\u043d\u0435\u0434\u0456\u043b\u043e\u043a', '\u0412\u0456\u0432\u0442\u043e\u0440\u043e\u043a', '\u0421\u0435\u0440\u0435\u0434\u0430', '\u0427\u0435\u0442\u0432\u0435\u0440', '\u041f\u02bc\u044f\u0442\u043d\u0438\u0446\u044f', '\u0421\u0443\u0431\u043e\u0442\u0430' \/* and all the rest of days - remember starting with Sunday *\/],\n                    daysShort: ['\u041d\u0434', '\u041f\u043d', '\u0412\u0442', '\u0421\u0440', '\u0427\u0442', '\u041f\u0442', '\u0421\u0431' \/* and all the rest of days - remember starting with Sunday *\/],\n                    months: ['\u0421\u0456\u0447\u0435\u043d\u044c', '\u041b\u044e\u0442\u0438\u0439', '\u0411\u0435\u0440\u0437\u0435\u043d\u044c', '\u0422\u0440\u0430\u0432\u0435\u043d\u044c', '\u041a\u0432\u0456\u0442\u0435\u043d\u044c', '\u0427\u0435\u0440\u0432\u0435\u043d\u044c', '\u041b\u0438\u043f\u0435\u043d\u044c', '\u0421\u0435\u0440\u043f\u0435\u043d\u044c', '\u0412\u0435\u0440\u0435\u0441\u0435\u043d\u044c', '\u0416\u043e\u0432\u0442\u0435\u043d\u044c', '\u041b\u0438\u0441\u0442\u043e\u043f\u0430\u0434', '\u0413\u0440\u0443\u0434\u0435\u043d\u044c' \/* and all the rest of months *\/],\n                    monthsShort: ['\u0421\u0456\u0447\u043d\u044f', '\u041b\u044e\u0442\u043e\u0433\u043e', '\u0411\u0435\u0440\u0437\u043d\u044f', '\u0422\u0440\u0430\u0432\u043d\u044f', '\u041a\u0432\u0456\u0442\u043d\u044f', '\u0427\u0435\u0440\u0432\u043d\u044f', '\u041b\u0438\u043f\u043d\u044f', '\u0421\u0435\u0440\u043f\u043d\u044f', '\u0412\u0435\u0440\u0435\u0441\u043d\u044f', '\u0416\u043e\u0432\u0442\u043d\u044f', '\u041b\u0438\u0441\u0442\u043e\u043f\u0430\u0434f', '\u0413\u0440\u0443\u0434\u043d\u044f' \/* and all the rest of months *\/]\n                }\n            },\n               \n            tabdates: 'info',\n            tabmaydan: '',\n            splitterModel: 20,\n\n            dateitems: [],\n            pickdate: false,\n            editDate: '',\n\n            maydans: [],\n            editingMaydan: false,\n            editmaydan: {\n                name: '',\n                description: ''\n            },\n\n            lections: [],\n            editingLection: false,\n            editlection: {\n                name: '',\n                starttime: '',\n                description: '',\n                link: '#',\n            },\n\n            moderators: [],\n            editmoderator: {\n                name: '',\n                description: '',\n                sex: '',\n            },\n\n            speakers: [],\n            editspeaker: {\n                name: '',\n                description: '',\n                sex: 'male',\n            },\n        }\n    },\n    created(){\nlet data = new FormData(); data.append('action','selectdates'); data.append('lang', curlang);\naxios.post(myajax.url,data).then(response => {this.dateitems = Array.from(response.data)}).finally(() => this.loading = false);\n\nlet maydans = new FormData();\nmaydans.append('action', 'selectmaydans');\nmaydans.append('lang', curlang);\naxios.post(myajax.url,maydans).then(response => {this.maydans = Array.from(response.data)}).finally(() => this.loading = false);\n\nlet lections = new FormData();\nlections.append('action', 'selectlections');\nlections.append('lang', curlang);\naxios.post(myajax.url,lections).then(response => {this.lections = Array.from(response.data)}).finally(() => this.loading = false);\n\nlet moders = new FormData();\nmoders.append('action', 'selectmoderators');\nmoders.append('lang', curlang);\naxios.post(myajax.url,moders).then(response => {this.moderators = Array.from(response.data)}).finally(() => this.loading = false);\n\nlet speakers = new FormData();\nspeakers.append('action', 'selectspeakers');\nspeakers.append('lang', curlang);\naxios.post(myajax.url,speakers).then(response => {this.speakers = Array.from(response.data)}).finally(() => this.loading = false);\n\n    },\n    methods: {\n        dateitem_str1(str){\n            return Quasar.date.formatDate(str, 'dddd', this.locale.en)\n        },\n        dateitem_str2(str){\n            return Quasar.date.formatDate(str, 'DD MMM, YYYY', this.locale.en)\n        },\n        checkModers(id) {\n            \/\/ filter\n            let newarray = this.moderators.filter(function (elem) {\n                return elem.lection_id === id;\n            });\n            \/\/ length\n            return newarray.length;\n        },\n        checkModer(id) {\n            let newarray = this.moderators.filter(function (elem) {\n                return elem.lection_id === id;\n            });\n            if(newarray.length === 1){\n                if(newarray[0].sex === 'female' && curlang === 'ua'){\n                    return '\u043a\u0430';\n                } else {\n                    return '';\n                }\n            } else {\n                return false;\n            }\n        },\n        checkSpeakers(id) {\n            \/\/ filter\n            let newarray = this.speakers.filter(function (elem) {\n                return elem.lection_id === id;\n            });\n            \/\/ length\n            return (newarray.length > 1);\n        },\n        checkSpeaker(id) {\n            let newarray = this.speakers.filter(function (elem) {\n                return elem.lection_id === id;\n            });\n            if(newarray.length === 1){\n                if(newarray[0].sex === 'famale' && curlang === 'ua'){\n                    return '\u043a\u0430';\n                } else {\n                    return '';\n                }\n            } else {\n                return false;\n            }\n        },\n        gotosream(link){\n            this.streamlink = link;\n            let el = document.getElementById('videoplayer');\n            const target = Quasar.scroll.getScrollTarget(el);\n            const offset = el.offsetTop;\n            const duration = 300;\n            Quasar.scroll.setVerticalScrollPosition(target, offset, duration)\n        },\n        \n    },\n});\napp.use(Quasar);\napp.mount('#q-app');\n\n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Conference&#8217;s main topic: &#8216;Cycling tourism is the key to sustainable territorial development&#8216;. The Program of Veloforum 2020 will be available soon.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-295","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/pages\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":360,"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/pages\/295\/revisions"}],"predecessor-version":[{"id":2690,"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/pages\/295\/revisions\/2690"}],"wp:attachment":[{"href":"https:\/\/www.veloforum.org.ua\/en\/wp-json\/wp\/v2\/media?parent=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}