up live lesson

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: [
+                weekdays: [
-                    {
+                    '',
-                        'title': 'Акварельс (Понедельник, 2 апр)',
+                    'Понедельник',
-                        'value': 'Акварельс (Понедельник, 2 апр)',
+                    'Вторник',
-                    },
+                    'Среда',
-                    {
+                    'Четверг',
-                        'title': 'Рельсотрон (Вторник, 3 апр)',
+                    'Пятница',
-                        'value': 'Рельсотрон (Вторник, 3 апр)',
+                    'Суббота',
-                    },
+                    'Воскресенье',
-                    {
-                        'title': 'Коломёт (Среда, 4 апр)',
-                        'value': 'Коломёт (Среда, 4 апр)',
-                    },
-                    {
-                        'title': 'Зиккурат (Четверг, 5 апр)',
-                        'value': 'Зиккурат (Четверг, 5 апр)',
-                    },
                 ],
                 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)
+                let request = null;
-                response
+                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) {
+                // if (!oldValue.id) {
-                    return;
+                //     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;
                     }

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) {
+        if(courseObject.live) {
-            return api.addCourse(courseJson, accessToken);
+            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}`,
+            }
+        });
+    },
 };