Компонент селекта

web/build/js/app.js

@@ -4616,7 +4616,8 @@ return hooks;
 /* 7 */,
 /* 8 */,
 /* 9 */,
-/* 10 */
+/* 10 */,
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -14987,7 +14988,6 @@ return jQuery;
 
 
 /***/ }),
-/* 11 */,
 /* 12 */,
 /* 13 */,
 /* 14 */,
@@ -27027,7 +27027,7 @@ __webpack_require__(289);
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -27659,7 +27659,7 @@ function updateHeader() {
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -27708,7 +27708,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -27750,7 +27750,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -27772,7 +27772,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -28366,7 +28366,7 @@ module.exports = exports['default'];
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -28422,7 +28422,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -28458,7 +28458,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -28520,7 +28520,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -29676,7 +29676,7 @@ var isExtraneousPopstateEvent = exports.isExtraneousPopstateEvent = function isE
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -29748,7 +29748,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 "use strict";
 
 
-var _jquery = __webpack_require__(10);
+var _jquery = __webpack_require__(11);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 

web/src/components/CourseRedactor.vue

@@ -96,6 +96,12 @@
                 <vue-datepicker input-class="field__input" v-model="course.date" language="ru" format="dd/MM/yyyy"/>
               </div>
             </div>
+            <div class="info__field field">
+              <div class="field__label">ВРЕМЯ</div>
+              <div class="field__wrap">
+                <lil-select :value.sync="course.time" :options="timeOptions" placeholder="Выберите время"/>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -198,6 +204,7 @@
     import BlockImageText from './blocks/BlockImageText'
     import BlockVideo from './blocks/BlockVideo'
     import VueRedactor from './redactor/VueRedactor'
+    import LilSelect from "./inputs/LilSelect";
 
     export default {
         name: "course-redactor",
@@ -215,11 +222,50 @@
                     is_featured: true,
                     is_delayed: false,
                     date: '2018-03-08',
+                    time: null,
                     short_description: 'Этот курс поможет детям освоить базовые навыки рисования простых персонажей',
                     blocks: [],
                     about: '<b>Главная цель курса</b> - рассказать...',
                 },
-                is_adding_block: false
+                is_adding_block: false,
+                timeOptions: [
+                    {
+                        'title': '10:00',
+                        'value': '10:00',
+                    },
+                    {
+                        'title': '11:00',
+                        'value': '11:00',
+                    },
+                    {
+                        'title': '12:00',
+                        'value': '12:00',
+                    },
+                    {
+                        'title': '13:00',
+                        'value': '13:00',
+                    },
+                    {
+                        'title': '14:00',
+                        'value': '14:00',
+                    },
+                    {
+                        'title': '15:00',
+                        'value': '15:00',
+                    },
+                    {
+                        'title': '16:00',
+                        'value': '16:00',
+                    },
+                    {
+                        'title': '17:00',
+                        'value': '17:00',
+                    },
+                    {
+                        'title': '18:00',
+                        'value': '18:00',
+                    }
+                ]
             }
         },
         methods: {
@@ -297,6 +343,7 @@
             }
         },
         components: {
+            LilSelect,
             BlockText,
             'link-input': LinkInput,
             'vue-datepicker': Datepicker,

web/src/components/inputs/LilSelect.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="field__select select" v-bind:class="{ selected: isSelected, active: isOpened }">
+    <div class="select__head" @click="toggleOpened">
+      {{ selectedTitle }}
+    </div>
+    <div class="select__drop">
+      <div class="select__option" v-for="option in options">
+        <div class="select__title" @click="selectOption(option, $event)">{{ option.title }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "lil-select",
+        props: ["options", "value", "valueKey", "placeholder"],
+        data() {
+            return {
+                key: this.valueKey ? this.valueKey : 'value',
+                isOpened: false,
+            }
+        },
+        methods: {
+            clickListener() {
+                this.isOpened = false;
+            },
+            toggleOpened(event) {
+                event.stopPropagation();
+                this.isOpened = !this.isOpened
+            },
+            selectOption(option, event) {
+                event.stopPropagation();
+                this.isOpened = !this.isOpened;
+                this.$emit('update:value', option);
+            }
+        },
+        mounted() {
+            document.addEventListener("click", this.clickListener);
+        },
+        destroyed() {
+            document.removeEventListener("click", this.clickListener);
+        },
+        computed: {
+            isSelected() {
+                return this.value && this.value[this.key] ? true : false;
+            },
+            selectedTitle() {
+                if (this.isSelected) {
+                    return this.value[this.key];
+                }
+                return this.placeholder ? this.placeholder : '';
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>