up live lesson

8 years ago · 3369f0a815
parent 3fca54497f
commit 3369f0a815
2 changed files with 113 additions and 32 deletions
--- a/web/src/components/CourseRedactor.vue
+++ b/web/src/components/CourseRedactor.vue
@ -77,7 +77,7 @@
          <div class="info__sidebar">
            <div class="info__wrap">
              <div class="info__fieldset">
-                <div class="info__field field">
+                <div v-if="!live" class="info__field field">
                  <div class="field__label field__label_gray">ССЫЛКА</div>
                  <div class="field__wrap">
                    <input type="text" class="field__input" v-model="course.url" @input="slugChanged = true">
@ -88,14 +88,14 @@
                <div v-if="live" class="info__field field">
                  <div class="field__label field__label_gray">ССЫЛКА НА VIMEO</div>
                  <div class="field__wrap">
-                    <input type="text" class="field__input" v-model="course.stream_url">
+                    <input type="text" class="field__input" v-model="course.stream">
                  </div>
                </div>

                <div v-if="live" class="info__field field">
                  <div class="field__label">ДАТА</div>
                  <div class="field__wrap">
-                    <lil-select :value.sync="course.time" :options="dateOptions" placeholder="Выберите дату"/>
+                    <lil-select :value.sync="course.date" :options="scheduleOptions" placeholder="Выберите дату"/>
                  </div>
                </div>

@ -276,6 +276,7 @@
    import Draggable from 'vuedraggable';
    import {showNotification} from "../js/modules/notification";
    import createHistory from "history/createBrowserHistory";
+    import moment from 'moment'

    const history = createHistory();

@ -304,6 +305,7 @@
                    is_featured: true,
                    is_deferred: false,
                    date: '',
+                    stream: '',
                    time: null,
                    short_description: '',
                    content: [],
@ -361,28 +363,21 @@
                    }
                ],

-                dateOptions: [
-                    {
-                        'title': 'Акварельс (Понедельник, 2 апр)',
-                        'value': 'Акварельс (Понедельник, 2 апр)',
-                    },
-                    {
-                        'title': 'Рельсотрон (Вторник, 3 апр)',
-                        'value': 'Рельсотрон (Вторник, 3 апр)',
-                    },
-                    {
-                        'title': 'Коломёт (Среда, 4 апр)',
-                        'value': 'Коломёт (Среда, 4 апр)',
-                    },
-                    {
-                        'title': 'Зиккурат (Четверг, 5 апр)',
-                        'value': 'Зиккурат (Четверг, 5 апр)',
-                    },
+                weekdays: [
+                    '',
+                    'Понедельник',
+                    'Вторник',
+                    'Среда',
+                    'Четверг',
+                    'Пятница',
+                    'Суббота',
+                    'Воскресенье',
                ],
                showErrors: false,
                savingTimeout: null,
                savingDebounceTimeout: null,
                categoryOptions: [],
+                scheduleOptions: [],
                courseSyncHook: false, // Если true, то watch не будет отправлять курс на обновление
            }
        },
@ -499,6 +494,7 @@
                    .then((response) => {
                        this.courseSaving = false;
                        this.course = api.convertCourseJson(response.data);
+                        this.course.live = this.live;
                    })
                    .catch((err) => {
                        this.courseSaving = false;
@ -545,6 +541,7 @@
                    .then((response) => {
                        this.courseLoading = false;
                        this.course = api.convertCourseJson(response.data);
+                        this.course.live = this.live;
                        this.lessons = response.data.lessons.map((lessonJson) => {
                            return api.convertLessonJson(lessonJson);
                        });
@ -558,11 +555,17 @@
            },
            loadCourse() {
                this.courseLoading = true;
-                let response = api.loadCourse(this.courseId, this.accessToken)
-                response
+                let request = null;
+                if(this.live) {
+                    request = api.loadLive(this.courseId, this.accessToken)
+                } else {
+                    request = api.loadCourse(this.courseId, this.accessToken)
+                }
+                request
                    .then((response) => {
                        this.courseLoading = false;
                        this.course = api.convertCourseJson(response.data);
+                        this.course.live = this.live;
                        this.lessons = response.data.lessons.map((lessonJson) => {
                            return api.convertLessonJson(lessonJson);
                        });
@ -572,7 +575,7 @@
                        console.log('error course loading', err);
                    });

-                return response;
+                return request;
            },
            loadLessons(courseId) {

@ -605,9 +608,22 @@
                newTab.focus();
            },
            saveCourseDraft: function (newValue, oldValue) {
-                if (!oldValue.id) {
-                    return;
+                // if (!oldValue.id) {
+                //     return;
+                // }
+
+                if(this.live) {
+                    if(!this.course.date || this.course.short_description == '' || this.course.title == '') {
+                        console.log('live valiedation error');
+                        return;
+                    }
+                } else {
+                    if(this.course.short_description == '' || this.course.title == '') {
+                        console.log('course validation error');
+                        return;
+                    }
                }
+
                if (this.savingDebounceTimeout) {
                    clearTimeout(this.savingDebounceTimeout);
                }
@ -681,7 +697,8 @@
            }
        },
        mounted() {
-            console.log('mounted');
+            moment.locale('ru');
+            this.course.live = this.live;
            // Listen for changes to the current location.
            this.unlisten = history.listen(this.updateViewSection);

@ -698,6 +715,23 @@
                    this.updateCategory();
                });

+            api.getSchedule(this.accessToken)
+                .then((response) => {
+                    if (response.data) {
+                        this.scheduleOptions = response.data.results.map((schedule) => {
+                            var now = new Date();
+                            now.setDate(now.getDate() + (schedule.weekday+(7-now.getDay())) % 7);
+
+                            return {
+                                title: `${schedule.title} (${this.weekdays[schedule.weekday]}, ${moment(now).format("D MMM")})`,
+                                value: moment(now).format('YYYY-MM-DD')
+                            }
+                        });
+                    }
+                    this.updateCategory();
+                });
+
+
            api.getCurrentUser(this.accessToken)
                .then((response) => {
                    if (response.data) {
@ -720,9 +754,13 @@
                });

            if (this.courseId) {
-                this.loadCourse().then(()=>{this.updateViewSection(window.location, 'load')})
+                this.loadCourse().then(()=>{this.updateViewSection(window.location, 'load')}).catch(()=>{
+                    this.updateViewSection(window.location, 'load err')
+                })
            } else {
-                this.loadCourseDraft().then(()=>{this.updateViewSection(window.location, 'load draft')});
+                this.loadCourseDraft().then(()=>{this.updateViewSection(window.location, 'load draft')}).catch(()=>{
+                    this.updateViewSection(window.location, 'load draft err')
+                });
            }

            console.log('mounted end');
@ -788,11 +826,13 @@
        watch: {
            'course': {
                handler: function (newValue, oldValue) {
+                    console.log('watch', newValue, oldValue);
                    // Если курс загрузился и есть ID - делаем кнопки превью и публикации активными
                    if (newValue.id) {
                        $('#course-redactor__preview-button').removeAttr('disabled');
                        $('#course-redactor__publish-button').removeAttr('disabled');
                    }
+                    console.log('courseSyncHook', this.courseSyncHook);
                    if (this.courseSyncHook) {
                        return;
                    }
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@ -50,6 +50,13 @@ export const api = {
            }
        });
    },
+    loadLive: (courseId, accessToken) => {
+        return axios.get(`/api/v1/live-lesson/${courseId}/`, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
    saveCourse: (courseObject, accessToken) => {
        const isAdding = (!courseObject.hasOwnProperty('id') || !courseObject.hasOwnProperty('id'));

@ -73,6 +80,8 @@ export const api = {
            duration: courseObject.duration,
            is_featured: courseObject.is_featured,
            slug: courseObject.url,
+            date: (courseObject.date) ? courseObject.date.value:null,
+            stream: courseObject.stream,
            cover: courseObject.coverImageId ? courseObject.coverImageId : null,
            gallery: {
                gallery_images: courseObject.gallery && courseObject.gallery.images ? courseObject.gallery.images : []
@ -143,11 +152,21 @@ export const api = {
            }),
        };

-        if (isAdding) {
-            return api.addCourse(courseJson, accessToken);
+        if(courseObject.live) {
+            if (isAdding) {
+                return api.addLive(courseJson, accessToken);
+            } else {
+                return api.updateLive(courseObject.id, courseJson, accessToken);
+            }
        } else {
-            return api.updateCourse(courseObject.id, courseJson, accessToken);
+            if (isAdding) {
+                return api.addCourse(courseJson, accessToken);
+            } else {
+                return api.updateCourse(courseObject.id, courseJson, accessToken);
+            }
        }
+
+
    },
    saveLesson: (lessonObject, accessToken) => {
        const isAdding = (!lessonObject.hasOwnProperty('id') || !lessonObject.hasOwnProperty('id'));
@ -261,6 +280,7 @@ export const api = {
            duration: courseJSON.duration,
            is_featured: courseJSON.is_featured,
            url: courseJSON.slug,
+            stream: courseJSON.stream,
            coverImageId: courseJSON.cover && courseJSON.cover.id ? courseJSON.cover.id : null,
            coverImage: courseJSON.cover && courseJSON.cover.image ? courseJSON.cover.image : null,
            content: api.convertContentResponse(courseJSON.content),
@ -353,6 +373,20 @@ export const api = {
            }
        });
    },
+    addLive: (courseJson, accessToken) => {
+        return axios.post('/api/v1/live-lesson/', courseJson, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
+    updateLive: (courseId, courseJson, accessToken) => {
+        return axios.put(`/api/v1/live-lesson/${courseId}/`, courseJson, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
    getCourseLessons: (courseId, accessToken) => {
        return axios.get(`/api/v1/lessons/?course=${courseId}`, {
            headers: {
@ -422,5 +456,12 @@ export const api = {
                'Authorization': `Token ${accessToken}`,
            }
        });
-    }
+    },
+    getSchedule: (accessToken) => {
+        return axios.get('/api/v1/school-schedules/', {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
 };