cover into modal; add Dashboard js app

This commit is contained in:
bkfox 2024-03-16 08:06:32 +01:00
parent 3c56dc8b53
commit eaf453086d
15 changed files with 3109 additions and 2970 deletions

View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue App</title> <title>Vue App</title>
<script defer src="js/chunk-vendors.js"></script><script defer src="js/chunk-common.js"></script><script defer src="js/admin.js"></script><link href="css/chunk-vendors.css" rel="stylesheet"><link href="css/chunk-common.css" rel="stylesheet"><link href="css/admin.css" rel="stylesheet"></head> <script defer src="js/chunk-vendors.js"></script><script defer src="js/chunk-common.js"></script><script defer src="js/admin.js"></script><link href="css/chunk-vendors.css" rel="stylesheet"><link href="css/chunk-common.css" rel="stylesheet"></head>
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
/*!**************************************************************************************************************************************************************************************************************************************!*\ /*!**************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/public.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/styles/public.scss ***!
\**************************************************************************************************************************************************************************************************************************************/ \**************************************************************************************************************************************************************************************************************************************/
:root { :root {
--title-1-sz: 1.6rem; --title-1-sz: 1.6rem;
@ -121,8 +121,12 @@
color: var(--heading-hg-fg); color: var(--heading-hg-fg);
} }
.panels .panel:not(.active) { .modal-card {
display: none; max-width: 1380px;
}
.modal-card {
max-height: calc(100% - 10rem);
} }
.preview { .preview {
@ -536,8 +540,6 @@
max-width: 100%; max-width: 100%;
} }
.a-select-file .a-select-file-list { .a-select-file .a-select-file-list {
max-height: 30rem;
overflow-y: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0.6rem; gap: 0.6rem;
@ -930,7 +932,7 @@ nav li a, nav li .button {
.header-cover:not(:only-child) { .header-cover:not(:only-child) {
float: right; float: right;
position: relative; position: relative;
z-index: 1000; z-index: 30;
background-color: var(--body-bg); background-color: var(--body-bg);
margin: 0 0 1.2rem 1.2rem; margin: 0 0 1.2rem 1.2rem;
} }

View File

@ -18,16 +18,6 @@
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_admin_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles/admin.scss */ \"./src/styles/admin.scss\");\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app */ \"./src/app.js\");\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components */ \"./src/components/index.js\");\n/* harmony import */ var _track__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./track */ \"./src/track.js\");\n\n\n\n\n\nconst AdminApp = {\n ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n components: {\n ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"].components,\n ..._components__WEBPACK_IMPORTED_MODULE_3__.admin\n },\n data() {\n return {\n ...super.data,\n Track: _track__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n };\n }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AdminApp);\nwindow.App = AdminApp;\n\n//# sourceURL=webpack://aircox-assets/./src/admin.js?"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_admin_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles/admin.scss */ \"./src/styles/admin.scss\");\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./index.js */ \"./src/index.js\");\n/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app */ \"./src/app.js\");\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components */ \"./src/components/index.js\");\n/* harmony import */ var _track__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./track */ \"./src/track.js\");\n\n\n\n\n\nconst AdminApp = {\n ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n components: {\n ..._app__WEBPACK_IMPORTED_MODULE_2__[\"default\"].components,\n ..._components__WEBPACK_IMPORTED_MODULE_3__.admin\n },\n data() {\n return {\n ...super.data,\n Track: _track__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n };\n }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AdminApp);\nwindow.App = AdminApp;\n\n//# sourceURL=webpack://aircox-assets/./src/admin.js?");
/***/ }),
/***/ "./src/styles/admin.scss":
/*!*******************************!*\
!*** ./src/styles/admin.scss ***!
\*******************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://aircox-assets/./src/styles/admin.scss?");
/***/ }) /***/ })
/******/ }); /******/ });

View File

@ -69,6 +69,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
/***/ }), /***/ }),
/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=script&lang=js":
/*!****************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=script&lang=js ***!
\****************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n title: {\n type: String,\n default: \"\"\n }\n },\n data() {\n return {\n active: false\n };\n },\n methods: {\n open() {\n this.active = true;\n },\n close() {\n this.active = false;\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AModal.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=script&lang=js": /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=script&lang=js":
/*!***************************************************************************************************************************************************************************************!*\ /*!***************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=script&lang=js ***! !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=script&lang=js ***!
@ -249,6 +259,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }), /***/ }),
/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=template&id=74997efc":
/*!********************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=template&id=74997efc ***!
\********************************************************************************************************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"modal-card\"\n};\nconst _hoisted_2 = {\n class: \"modal-card-head\"\n};\nconst _hoisted_3 = {\n class: \"modal-card-title\"\n};\nconst _hoisted_4 = {\n class: \"modal-card-body\"\n};\nconst _hoisted_5 = {\n class: \"modal-card-foot align-right\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"section\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['modal', $data.active && 'is-active' || ''])\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", {\n class: \"modal-background\",\n onClick: _cache[0] || (_cache[0] = (...args) => $options.close && $options.close(...args))\n }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"header\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"title\", {}, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1 /* TEXT */)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"default\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\", {\n close: $options.close\n })])])], 2 /* CLASS */);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AModal.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=template&id=53c8e290": /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=template&id=53c8e290":
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\ /*!*******************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=template&id=53c8e290 ***! !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/APage.vue?vue&type=template&id=53c8e290 ***!
@ -385,7 +405,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\*********************************/ \*********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ admin: function() { return /* binding */ admin; },\n/* harmony export */ base: function() { return /* binding */ base; }\n/* harmony export */ });\n/* harmony import */ var _AAutocomplete_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AAutocomplete.vue */ \"./src/components/AAutocomplete.vue\");\n/* harmony import */ var _ACarousel_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ACarousel.vue */ \"./src/components/ACarousel.vue\");\n/* harmony import */ var _ADropdown_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ADropdown.vue */ \"./src/components/ADropdown.vue\");\n/* harmony import */ var _AEpisode_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./AEpisode.vue */ \"./src/components/AEpisode.vue\");\n/* harmony import */ var _AList_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./AList.vue */ \"./src/components/AList.vue\");\n/* harmony import */ var _APage_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./APage.vue */ \"./src/components/APage.vue\");\n/* harmony import */ var _APlayer_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./APlayer.vue */ \"./src/components/APlayer.vue\");\n/* harmony import */ var _APlaylist_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./APlaylist.vue */ \"./src/components/APlaylist.vue\");\n/* harmony import */ var _APlaylistEditor_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./APlaylistEditor.vue */ \"./src/components/APlaylistEditor.vue\");\n/* harmony import */ var _AProgress_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./AProgress.vue */ \"./src/components/AProgress.vue\");\n/* harmony import */ var _ASoundItem_vue__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ASoundItem.vue */ \"./src/components/ASoundItem.vue\");\n/* harmony import */ var _ASwitch_vue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./ASwitch.vue */ \"./src/components/ASwitch.vue\");\n/* harmony import */ var _AStatistics_vue__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./AStatistics.vue */ \"./src/components/AStatistics.vue\");\n/* harmony import */ var _AStreamer_vue__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./AStreamer.vue */ \"./src/components/AStreamer.vue\");\n/* harmony import */ var _ASelectFile_vue__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ASelectFile.vue */ \"./src/components/ASelectFile.vue\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Core components\n */\nconst base = {\n AAutocomplete: _AAutocomplete_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n ACarousel: _ACarousel_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n ADropdown: _ADropdown_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n AEpisode: _AEpisode_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n AList: _AList_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n APage: _APage_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n APlayer: _APlayer_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n APlaylist: _APlaylist_vue__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n AProgress: _AProgress_vue__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n ASoundItem: _ASoundItem_vue__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n ASwitch: _ASwitch_vue__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n ASelectFile: _ASelectFile_vue__WEBPACK_IMPORTED_MODULE_14__[\"default\"]\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (base);\nconst admin = {\n ...base,\n AStatistics: _AStatistics_vue__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n AStreamer: _AStreamer_vue__WEBPACK_IMPORTED_MODULE_13__[\"default\"],\n APlaylistEditor: _APlaylistEditor_vue__WEBPACK_IMPORTED_MODULE_8__[\"default\"]\n};\n\n//# sourceURL=webpack://aircox-assets/./src/components/index.js?"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ admin: function() { return /* binding */ admin; },\n/* harmony export */ base: function() { return /* binding */ base; },\n/* harmony export */ dashboard: function() { return /* binding */ dashboard; }\n/* harmony export */ });\n/* harmony import */ var _AAutocomplete__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AAutocomplete */ \"./src/components/AAutocomplete.vue\");\n/* harmony import */ var _ACarousel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ACarousel */ \"./src/components/ACarousel.vue\");\n/* harmony import */ var _ADropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ADropdown */ \"./src/components/ADropdown.vue\");\n/* harmony import */ var _AEpisode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./AEpisode */ \"./src/components/AEpisode.vue\");\n/* harmony import */ var _AList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./AList */ \"./src/components/AList.vue\");\n/* harmony import */ var _APage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./APage */ \"./src/components/APage.vue\");\n/* harmony import */ var _APlayer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./APlayer */ \"./src/components/APlayer.vue\");\n/* harmony import */ var _APlaylist__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./APlaylist */ \"./src/components/APlaylist.vue\");\n/* harmony import */ var _APlaylistEditor__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./APlaylistEditor */ \"./src/components/APlaylistEditor.vue\");\n/* harmony import */ var _AProgress__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./AProgress */ \"./src/components/AProgress.vue\");\n/* harmony import */ var _ASoundItem__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ASoundItem */ \"./src/components/ASoundItem.vue\");\n/* harmony import */ var _ASwitch__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./ASwitch */ \"./src/components/ASwitch.vue\");\n/* harmony import */ var _AStatistics__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./AStatistics */ \"./src/components/AStatistics.vue\");\n/* harmony import */ var _AStreamer__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./AStreamer */ \"./src/components/AStreamer.vue\");\n/* harmony import */ var _AModal__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./AModal */ \"./src/components/AModal.vue\");\n/* harmony import */ var _ASelectFile__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./ASelectFile */ \"./src/components/ASelectFile.vue\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Core components\n */\nconst base = {\n AAutocomplete: _AAutocomplete__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n ACarousel: _ACarousel__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n ADropdown: _ADropdown__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n AEpisode: _AEpisode__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n AList: _AList__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n APage: _APage__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n APlayer: _APlayer__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n APlaylist: _APlaylist__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n AProgress: _AProgress__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n ASoundItem: _ASoundItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n ASwitch: _ASwitch__WEBPACK_IMPORTED_MODULE_11__[\"default\"]\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (base);\nconst admin = {\n ...base,\n AStatistics: _AStatistics__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n AStreamer: _AStreamer__WEBPACK_IMPORTED_MODULE_13__[\"default\"],\n APlaylistEditor: _APlaylistEditor__WEBPACK_IMPORTED_MODULE_8__[\"default\"]\n};\nconst dashboard = {\n ...base,\n ASelectFile: _ASelectFile__WEBPACK_IMPORTED_MODULE_15__[\"default\"],\n AModal: _AModal__WEBPACK_IMPORTED_MODULE_14__[\"default\"],\n APlaylistEditor: _APlaylistEditor__WEBPACK_IMPORTED_MODULE_8__[\"default\"]\n};\n\n//# sourceURL=webpack://aircox-assets/./src/components/index.js?");
/***/ }), /***/ }),
@ -489,6 +509,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
/***/ }), /***/ }),
/***/ "./src/styles/admin.scss":
/*!*******************************!*\
!*** ./src/styles/admin.scss ***!
\*******************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://aircox-assets/./src/styles/admin.scss?");
/***/ }),
/***/ "./src/styles/common.scss": /***/ "./src/styles/common.scss":
/*!********************************!*\ /*!********************************!*\
!*** ./src/styles/common.scss ***! !*** ./src/styles/common.scss ***!
@ -559,6 +589,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ALi
/***/ }), /***/ }),
/***/ "./src/components/AModal.vue":
/*!***********************************!*\
!*** ./src/components/AModal.vue ***!
\***********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _AModal_vue_vue_type_template_id_74997efc__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AModal.vue?vue&type=template&id=74997efc */ \"./src/components/AModal.vue?vue&type=template&id=74997efc\");\n/* harmony import */ var _AModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AModal.vue?vue&type=script&lang=js */ \"./src/components/AModal.vue?vue&type=script&lang=js\");\n/* harmony import */ var _home_data_code_projets_aircox_assets_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ \"./node_modules/vue-loader/dist/exportHelper.js\");\n\n\n\n\n;\nconst __exports__ = /*#__PURE__*/(0,_home_data_code_projets_aircox_assets_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_AModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"], [['render',_AModal_vue_vue_type_template_id_74997efc__WEBPACK_IMPORTED_MODULE_0__.render],['__file',\"src/components/AModal.vue\"]])\n/* hot reload */\nif (false) {}\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (__exports__);\n\n//# sourceURL=webpack://aircox-assets/./src/components/AModal.vue?");
/***/ }),
/***/ "./src/components/APage.vue": /***/ "./src/components/APage.vue":
/*!**********************************!*\ /*!**********************************!*\
!*** ./src/components/APage.vue ***! !*** ./src/components/APage.vue ***!
@ -739,6 +779,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }), /***/ }),
/***/ "./src/components/AModal.vue?vue&type=script&lang=js":
/*!***********************************************************!*\
!*** ./src/components/AModal.vue?vue&type=script&lang=js ***!
\***********************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_40_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; }\n/* harmony export */ });\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_40_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AModal.vue?vue&type=script&lang=js */ \"./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=script&lang=js\");\n \n\n//# sourceURL=webpack://aircox-assets/./src/components/AModal.vue?");
/***/ }),
/***/ "./src/components/APage.vue?vue&type=script&lang=js": /***/ "./src/components/APage.vue?vue&type=script&lang=js":
/*!**********************************************************!*\ /*!**********************************************************!*\
!*** ./src/components/APage.vue?vue&type=script&lang=js ***! !*** ./src/components/APage.vue?vue&type=script&lang=js ***!
@ -919,6 +969,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }), /***/ }),
/***/ "./src/components/AModal.vue?vue&type=template&id=74997efc":
/*!*****************************************************************!*\
!*** ./src/components/AModal.vue?vue&type=template&id=74997efc ***!
\*****************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ render: function() { return /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_40_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AModal_vue_vue_type_template_id_74997efc__WEBPACK_IMPORTED_MODULE_0__.render; }\n/* harmony export */ });\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_40_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_3_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AModal_vue_vue_type_template_id_74997efc__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AModal.vue?vue&type=template&id=74997efc */ \"./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AModal.vue?vue&type=template&id=74997efc\");\n\n\n//# sourceURL=webpack://aircox-assets/./src/components/AModal.vue?");
/***/ }),
/***/ "./src/components/APage.vue?vue&type=template&id=53c8e290": /***/ "./src/components/APage.vue?vue&type=template&id=53c8e290":
/*!****************************************************************!*\ /*!****************************************************************!*\
!*** ./src/components/APage.vue?vue&type=template&id=53c8e290 ***! !*** ./src/components/APage.vue?vue&type=template&id=53c8e290 ***!

View File

@ -1,18 +1,58 @@
{% extends "./page_detail.html" %} {% extends "./page_detail.html" %}
{% load static i18n %} {% load static i18n %}
{% block assets %}
{{ block.super }}
<script src="{% static "aircox/js/dashboard.js" %}"></script>
{% endblock %}
{% block header-cover %} {% block header-cover %}
<img src="{{ cover }}" ref="cover" class="cover"> <div class="flex-column">
<img src="{{ cover }}" ref="cover" class="cover">
<button type="button" class="button" @click="$refs['cover-modal'].open()">
{% translate "Change cover" %}
</button>
</div>
{% endblock %} {% endblock %}
{% block content-container %} {% block content-container %}
<section class="container active"> <a-modal ref="cover-modal" title="{% translate "Select an image" %}">
<template #default>
<a-select-file list-url="{% url "api:image-list" %}" upload-url="{% url "api:image-list" %}"
prev-label="{% translate "Show previous" %}"
next-label="{% translate "Show next" %}"
ref="cover-select"
>
<template #upload-preview="{item}">
<template v-if="item">
<img :src="item.src" class="upload-preview"/>
</template>
</template>
<template #default="{item}">
<div class="flex-column">
<div class="flex-grow-1">
<img :src="item.file"/>
</div>
<label class="label">[[ item.name || item.original_filename ]]</label>
</div>
</template>
</a-select-file>
</template>
<template #footer>
<button type="button" class="button align-right"
@click="(event) => fileSelected('cover-select', 'cover', 'cover-input', 'cover-modal')">
{% translate "Select" %}
</button>
</template>
</a-modal>
<section class="container">
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
{% for field in form %} {% for field in form %}
<div class="field"> <div class="field">
{% if field.name == "cover" %} {% if field.name == "cover" %}
<input type="hidden" name="{{ field.name }}" value="{{ field.pk }}" ref="coverField"/> <input type="hidden" name="{{ field.name }}" value="{{ field.pk }}" ref="cover-input"/>
{% else %} {% else %}
<label class="label">{{ field.label }}</label> <label class="label">{{ field.label }}</label>
<div class="control clear-unset"> <div class="control clear-unset">
@ -40,32 +80,4 @@
</div> </div>
</form> </form>
</section> </section>
<section id="cover-modal" class="container page-edit-panel">
<h3 class="title">{% translate "Change cover" %}</h3>
<a-select-file list-url="{% url "api:image-list" %}" upload-url="{% url "api:image-list" %}"
prev-label="{% translate "Show previous" %}"
next-label="{% translate "Show next" %}"
>
<template #upload-preview="{item}">
<template v-if="item">
<img :src="item.src" class="upload-preview"/>
</template>
</template>
<template #default="{item}">
<div class="flex-column">
<div class="flex-grow-1">
<img :src="item.file"/>
</div>
<label class="label">[[ item.name || item.original_filename ]]</label>
</div>
</template>
<template #footer="{item}">
<button type="button" class="button float-right"
@click="(event) => {$refs.cover.src = item.file; $refs.coverField.value = item.id}">
{% translate "Select" %}
</button>
</template>
</a-select-file>
</section>
{% endblock %} {% endblock %}

View File

@ -0,0 +1,36 @@
<template>
<section :class="['modal', active && 'is-active' || '']">
<div class="modal-background" @click="close"></div>
<div class="modal-card">
<header class="modal-card-head">
<div class="modal-card-title">
<slot name="title">{{ title }}</slot>
</div>
</header>
<section class="modal-card-body">
<slot name="default"></slot>
</section>
<div class="modal-card-foot align-right">
<slot name="footer" :close="close"></slot>
</div>
</div>
</section>
</template>
<script>
export default {
props: {
title: { type: String, default: ""},
},
data() {
return {
active: false,
}
},
methods: {
open() { this.active = true; },
close() { this.active = false; },
}
}
</script>

View File

@ -1,18 +1,20 @@
import AAutocomplete from './AAutocomplete.vue' import AAutocomplete from './AAutocomplete'
import ACarousel from './ACarousel.vue' import ACarousel from './ACarousel'
import ADropdown from "./ADropdown.vue" import ADropdown from "./ADropdown"
import AEpisode from './AEpisode.vue' import AEpisode from './AEpisode'
import AList from './AList.vue' import AList from './AList'
import APage from './APage.vue' import APage from './APage'
import APlayer from './APlayer.vue' import APlayer from './APlayer'
import APlaylist from './APlaylist.vue' import APlaylist from './APlaylist'
import APlaylistEditor from './APlaylistEditor.vue' import APlaylistEditor from './APlaylistEditor'
import AProgress from './AProgress.vue' import AProgress from './AProgress'
import ASoundItem from './ASoundItem.vue' import ASoundItem from './ASoundItem'
import ASwitch from './ASwitch.vue' import ASwitch from './ASwitch'
import AStatistics from './AStatistics.vue' import AStatistics from './AStatistics'
import AStreamer from './AStreamer.vue' import AStreamer from './AStreamer'
import ASelectFile from "./ASelectFile.vue"
import AModal from "./AModal"
import ASelectFile from "./ASelectFile"
/** /**
* Core components * Core components
@ -20,7 +22,7 @@ import ASelectFile from "./ASelectFile.vue"
export const base = { export const base = {
AAutocomplete, ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist, AAutocomplete, ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
AProgress, ASoundItem, ASwitch, AProgress, ASoundItem, ASwitch,
ASelectFile,
} }
export default base export default base
@ -29,3 +31,8 @@ export const admin = {
...base, ...base,
AStatistics, AStreamer, APlaylistEditor AStatistics, AStreamer, APlaylistEditor
} }
export const dashboard = {
...base,
ASelectFile, AModal, APlaylistEditor,
}

28
assets/src/dashboard.js Normal file
View File

@ -0,0 +1,28 @@
import './styles/admin.scss'
import './index.js'
import App from './app';
import {dashboard as components} from './components'
const AdminApp = {
...App,
components: {...App.components, ...components},
methods: {
...App.methods,
fileSelected(select, cover, input, modal) {
console.log("file!")
const item = this.$refs[select].item
if(item) {
this.$refs[cover].src = item.file
this.$refs[input].value = item.id
modal && this.$refs[modal].close()
}
},
}
}
export default AdminApp;
window.App = AdminApp

View File

@ -13,7 +13,6 @@
.admin { .admin {
.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow { .navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
box-shadow: 0em 0em 1em rgba(0,0,0,0.1); box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
} }

View File

@ -138,9 +138,12 @@
} }
// ---- panels // ---- bulma overrides
.panels { .modal-card {
.panel:not(.active) { display: none; } max-width: v.$screen-wide;
}
.modal-card {
max-height: calc(100% - 10rem);
} }
// ---- button // ---- button
@ -718,8 +721,6 @@
} }
.a-select-file-list { .a-select-file-list {
max-height: 30rem;
overflow-y: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: v.$mp-3; gap: v.$mp-3;

View File

@ -388,7 +388,7 @@ nav li {
.header-cover:not(:only-child) { .header-cover:not(:only-child) {
float: right; float: right;
position: relative; position: relative;
z-index: 1000; z-index: 30;
background-color: var(--body-bg); background-color: var(--body-bg);
margin: 0 0 v.$mp-4 v.$mp-4; margin: 0 0 v.$mp-4 v.$mp-4;

View File

@ -3,6 +3,7 @@
// ---- bulma // ---- bulma
$body-color: #000; $body-color: #000;
$title-color: #000; $title-color: #000;
$modal-content-width: 80%;
@import "~bulma/sass/utilities/_all.sass"; @import "~bulma/sass/utilities/_all.sass";

View File

@ -17,6 +17,7 @@ module.exports = defineConfig({
pages: { pages: {
public: { entry: 'src/public.js' }, public: { entry: 'src/public.js' },
dashboard: { entry: 'src/dashboard.js' },
admin: { entry: 'src/admin.js' }, admin: { entry: 'src/admin.js' },
} }
}) })