Students
/
ITRadio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

запустил lint:fix

This commit is contained in:
Norbaev 2024-06-25 17:22:17 +05:00
parent 6ea385f1eb
commit caa0326d9a
49 changed files with 3661 additions and 3331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -7,6 +7,7 @@
"private": true,
"scripts": {
"lint": "eslint --ext .js,.vue ./",
"lint:fix": "eslint --ext .js,.vue --fix ./",
"test": "echo \"No test specified\" && exit 0",
"serve": "npx cross-env NODE_ENV=development quasar dev",
"serve:ssr": "quasar dev -m ssr",

59
client/src/App.vue
View File

@ -1,30 +1,37 @@
<template>
<div class="app">
<AppHeader/>
<AppHeader />
<div class="app__block">
<Page404 v-if="showErrorPage404"/>
<Page500 v-if="showErrorPage500"/>
<routerView v-else/>
<Page404 v-if="showErrorPage404" />
<Page500 v-if="showErrorPage500" />
<routerView v-else />
</div>
<Player/>
<AppFooter/>
<Player />
<AppFooter />
</div>
<Authentication/>
<ChangingUser/>
<Authentication />
<ChangingUser />
</template>
<script>
import Page404 from '@/views/Page404.vue';
import Page500 from '@/views/Page500.vue';
import AppHeader from "@/components/app-header.vue";
import AppFooter from "@/components/app-footer.vue";
import Authentication from "@/components/modal/authentication.vue";
import Player from "@/components/player.vue";
import ChangingUser from "@/components/modal/сhanging-user.vue";
import AppHeader from '@/components/app-header.vue';
import AppFooter from '@/components/app-footer.vue';
import Authentication from '@/components/modal/authentication.vue';
import Player from '@/components/player.vue';
import ChangingUser from '@/components/modal/сhanging-user.vue';
export default {
async preFetch({store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath}) {
},
async preFetch({
store,
currentRoute,
previousRoute,
redirect,
ssrContext,
urlPath,
publicPath,
}) {},
components: {
ChangingUser,
Player,
@ -44,29 +51,29 @@ export default {
return this.$store.state.user;
},
showErrorPage404() {
return false
return false;
// return this.$store.state.showErrorPage?.response?.status === 404;
},
showErrorPage500() {
return false
return false;
// return this.$store.state.showErrorPage?.response?.status === 500;
},
currentPlay() {
return this.$store.state.currentPlay
return this.$store.state.currentPlay;
},
},
watch: {},
created() {
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isPlay: false});
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
isPlay: false,
});
},
mounted() {
},
methods: {
}
mounted() {},
methods: {},
};
</script>
<style>
@import "swiper/swiper.css";
@import "assets/css/index.scss";
@import 'swiper/swiper.css';
@import 'assets/css/index.scss';
</style>

14
client/src/boot/axios.js
View File

@ -1,5 +1,5 @@
import { boot } from 'quasar/wrappers'
import axios from 'axios'
import { boot } from 'quasar/wrappers';
import axios from 'axios';
// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
@ -7,18 +7,18 @@ import axios from 'axios'
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'https://api.example.com' })
const api = axios.create({ baseURL: 'https://api.example.com' });
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios
app.config.globalProperties.$axios = axios;
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api
app.config.globalProperties.$api = api;
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
})
});
export { api }
export { api };

5
client/src/boot/directive.js
View File

@ -1,6 +1,5 @@
import { boot } from 'quasar/wrappers'
import { boot } from 'quasar/wrappers';
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async ({ app, router }) => {
})
export default boot(async ({ app, router }) => {});

30
client/src/boot/main.js
View File

@ -1,21 +1,21 @@
import { boot } from 'quasar/wrappers'
import helpers from '@/utils/helpers'
import VueScrollmagic from 'scrollmagic'
import 'vue-final-modal/style.css'
import { VueFinalModal } from 'vue-final-modal'
import {plugin, defaultConfig, createInput} from '@formkit/vue'
import { ru } from '@formkit/i18n'
import { boot } from 'quasar/wrappers';
import helpers from '@/utils/helpers';
import VueScrollmagic from 'scrollmagic';
import 'vue-final-modal/style.css';
import { VueFinalModal } from 'vue-final-modal';
import { plugin, defaultConfig, createInput } from '@formkit/vue';
import { ru } from '@formkit/i18n';
import maskaInput from '@/components/inputs/maska-input';
import toggle from '@/components/inputs/toggle';
import { vMaska } from 'maska'
import { vMaska } from 'maska';
export default boot(async ({ app, router }) => {
app.config.globalProperties.$router = router
app.config.globalProperties.$router = router;
app.use(helpers);
app.scrollMagic = VueScrollmagic;
app.component('VueFinalModal', VueFinalModal);
app.config.globalProperties.$scrollMagic = VueScrollmagic
app.config.globalProperties.$scrollMagic = VueScrollmagic;
app.directive('Maska', vMaska);
const confFormKit = {
@ -36,7 +36,7 @@ export default boot(async ({ app, router }) => {
fieldset: '$reset field__fieldset',
options: '$reset field__options',
option: '$reset field__option',
decorator: '$reset field__decorator'
decorator: '$reset field__decorator',
},
},
messages: {
@ -56,7 +56,7 @@ export default boot(async ({ app, router }) => {
// return `${name} должна быть в прошлом.`;
// },
// },
}
},
},
inputs: {
// datepicker: createInput(datePickerInput, {
@ -73,11 +73,9 @@ export default boot(async ({ app, router }) => {
}),
toggle: createInput(toggle, {
props: ['placeholder', 'disabled', 'readonly'],
emits: ['toggle']
emits: ['toggle'],
}),
},
};
app.use(plugin, defaultConfig(confFormKit));
})
});

13
client/src/boot/store.js
View File

@ -1,8 +1,15 @@
import { boot } from 'quasar/wrappers'
import { boot } from 'quasar/wrappers';
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async ({ store }) => {
// For Vuex
if (window.__INITIAL_STATE__) store.replaceState(Object.assign(store.state, { metaScheme: window.__INITIAL_STATE__.metaScheme, data: window.__INITIAL_STATE__.data, meta: window.__INITIAL_STATE__.meta }));
})
if (window.__INITIAL_STATE__)
store.replaceState(
Object.assign(store.state, {
metaScheme: window.__INITIAL_STATE__.metaScheme,
data: window.__INITIAL_STATE__.data,
meta: window.__INITIAL_STATE__.meta,
}),
);
});

50
client/src/components/app-footer.vue
View File

@ -4,7 +4,9 @@
<h2 class="h2 m--white">Напишите нам</h2>
<div class="footer__question">
<div class="text">Остались вопросы? Мы с радостью вам ответим!</div>
<button class="button m--white m--arrow footer__question-button">Написать</button>
<button class="button m--white m--arrow footer__question-button">
Написать
</button>
</div>
</div>
<div class="footer__bottom">
@ -29,29 +31,19 @@
:key="key"
:class="['footer__menu-item', item.class]"
>
<router-link
:to="item.link"
class="footer__menu-link"
>
<router-link :to="item.link" class="footer__menu-link">
{{ item.title }}
</router-link>
</li>
</ul>
<ul class="footer__connection">
<li class="footer__menu-item"
>
<router-link
to="#"
class="m--underline"
>
<li class="footer__menu-item">
<router-link to="#" class="m--underline">
it@radio.org
</router-link>
</li>
<li class="footer__menu-item">
<router-link
to="#"
class="m--underline"
>
<router-link to="#" class="m--underline">
+7 (900) 000-01-12
</router-link>
</li>
@ -70,57 +62,57 @@ export default {
{
name: 'home',
role: 'all',
title: 'О нас'
title: 'О нас',
},
{
name: 'support',
role: 'all',
title: 'Поддержка'
title: 'Поддержка',
},
{
name: 'rubric',
role: 'all',
title: 'Программы'
title: 'Программы',
},
{
name: 'playlists',
role: 'all',
title: 'Контакты'
title: 'Контакты',
},
{
name: 'contacts',
role: 'all',
title: 'Блог'
title: 'Блог',
},
{
name: 'contacts',
role: 'all',
title: 'Карьера'
title: 'Карьера',
},
],
socialMenu: [
{
link: '#',
role: 'all',
title: 'Telegram'
title: 'Telegram',
},
{
link: '#',
role: 'all',
title: 'VKontakte'
title: 'VKontakte',
},
{
link: '#',
role: 'all',
title: 'Instagram'
title: 'Instagram',
},
{
link: '#',
role: 'all',
title: 'YouTube'
title: 'YouTube',
},
]
}
}
}
],
};
},
};
</script>

110
client/src/components/app-header.vue
View File

@ -2,14 +2,14 @@
<div class="header">
<div class="app__content header__wrapper">
<div class="header__logo" @click="next('home')">
<img src="@/assets/img/icon/logo.svg" alt="logo"/>
<img src="@/assets/img/icon/logo.svg" alt="logo" />
</div>
<ul class="header__menu" :class="showMenu&&'m--active'">
<ul class="header__menu" :class="showMenu && 'm--active'">
<li class="header__burger m--active m--menu" @click="handlerShowMenu">
<span></span>
</li>
<li class="header__logo m--menu" @click="next('home')">
<img src="@/assets/img/icon/logo.svg" alt="logo"/>
<img src="@/assets/img/icon/logo.svg" alt="logo" />
</li>
<li
v-for="(item, key) in menu"
@ -23,8 +23,20 @@
>
{{ item.title }}
</router-link>
<button v-else-if="item.title" class="button" :class="[item.icon, showAuthentication&&'m--active']" @click="handlerClick(item.action)">{{ item.title }}</button>
<button v-else class="header__menu-icon" :class="[item.icon]" @click="handlerClick(item.action)"></button>
<button
v-else-if="item.title"
class="button"
:class="[item.icon, showAuthentication && 'm--active']"
@click="handlerClick(item.action)"
>
{{ item.title }}
</button>
<button
v-else
class="header__menu-icon"
:class="[item.icon]"
@click="handlerClick(item.action)"
></button>
</li>
</ul>
<div class="header__burger" @click="handlerShowMenu">
@ -38,39 +50,39 @@
<script>
export default {
name: 'app-header',
props:{},
data(){
return{
menuList:[
props: {},
data() {
return {
menuList: [
{
name: 'about',
role: 'all',
title: 'О нас'
title: 'О нас',
},
{
name: 'rubric',
role: 'all',
title: 'Рубрики'
title: 'Рубрики',
},
{
name: 'playlists',
role: 'all',
title: 'Плейлист'
title: 'Плейлист',
},
{
name: 'podcasts',
role: 'all',
title: 'Подкасты'
title: 'Подкасты',
},
{
name: 'support',
role: 'all',
title: 'Поддержка'
title: 'Поддержка',
},
{
name: 'contacts',
role: 'all',
title: 'Контакты'
title: 'Контакты',
},
{
name: 'home',
@ -78,70 +90,70 @@ export default {
action: 'login',
icon: 'm--arrow',
title: 'Войти',
class: 'header__btn'
class: 'header__btn',
},
{
name: 'profile',
role: 'auth',
icon: 'm--profile',
action: 'profile',
class:'m--tools'
class: 'm--tools',
},
{
name: 'exit',
role: 'auth',
icon: 'm--exit',
action: 'exit',
class:'m--tools'
class: 'm--tools',
},
],
showMenu: true,
}
};
},
watch:{
'$route':{
handler(to){
if (this.showMenu){
watch: {
$route: {
handler(to) {
if (this.showMenu) {
this.showMenu = false;
}
}
}
},
computed:{
},
},
computed: {
user() {
return this.$store.state.user;
},
menu(){
return this.menuList.filter(item=>{
if (item.role==='all') return true
if (item.role==='auth' && this.user?.id) return !!this.user?.id
if (item.role==='login' && !this.user?.id) return !this.user?.id
return false
})
menu() {
return this.menuList.filter((item) => {
if (item.role === 'all') return true;
if (item.role === 'auth' && this.user?.id) return !!this.user?.id;
if (item.role === 'login' && !this.user?.id) return !this.user?.id;
return false;
});
},
showAuthentication(){
return this.$store.state.showAuthModal
showAuthentication() {
return this.$store.state.showAuthModal;
},
},
methods:{
handlerClick(methods){
if (methods==='login'){
this.$store.dispatch('setModal', {auth: true});
methods: {
handlerClick(methods) {
if (methods === 'login') {
this.$store.dispatch('setModal', { auth: true });
}
if (methods==='profile'){
this.next('profile')
if (methods === 'profile') {
this.next('profile');
}
if(methods==='exit'){
if (methods === 'exit') {
this.$store.dispatch('deathUser');
this.next('home')
this.next('home');
}
},
next(name){
this.$router.push({name})
next(name) {
this.$router.push({ name });
},
handlerShowMenu(){
handlerShowMenu() {
this.showMenu = !this.showMenu;
}
}
}
},
},
};
</script>

8
client/src/components/inputs/maska-input.vue
View File

@ -10,7 +10,7 @@
type="text"
:placeholder="placeholder"
@maska="handleMaska"
>
/>
</template>
<script setup>
@ -18,8 +18,8 @@ import { defineProps, ref, onUpdated, computed } from 'vue';
const props = defineProps({
context: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const maska = props.context.maska;
@ -30,6 +30,6 @@ const readonly = props.context.readonly || false;
function handleMaska($event) {
//console.log('handleInput', $event.target.disabled)
props.context.node.input($event.target.value)
props.context.node.input($event.target.value);
}
</script>

19
client/src/components/inputs/toggle.vue
View File

@ -7,36 +7,33 @@
:readonly="readonly"
type="checkbox"
@change="change"
>
/>
<label class="field__checkbox-label" :for="context.id">
{{ context.label }}
</label>
</template>
<script>
import {defineProps, ref, onUpdated, computed} from 'vue';
import { defineProps, ref, onUpdated, computed } from 'vue';
export default {
props: {
context: {
type: Object,
default: () => {
}
}
default: () => {},
},
},
data() {
return {
placeholder: this.context.placeholder || '',
disabled: this.context.disabled || false,
readonly: this.context.readonly || false,
}
};
},
methods: {
change() {
this.context.node.input(!this.context._value);
}
}
}
},
},
};
</script>

103
client/src/components/modal/authentication.vue
View File

@ -8,11 +8,7 @@
:clickToClose="false"
@click-outside="close()"
>
<button
class="button modal__close"
@click="close"
>
</button>
<button class="button modal__close" @click="close"></button>
<div class="authentication">
<div class="authentication__tabs tabs">
<button
@ -42,7 +38,7 @@
@submit="submitHandler"
@click-outside="close"
>
<FormKitSchema :schema="loginForm"/>
<FormKitSchema :schema="loginForm" />
</FormKit>
</template>
<template v-else>
@ -61,7 +57,7 @@
}"
@submit="submitHandler"
>
<FormKitSchema :schema="registerForm"/>
<FormKitSchema :schema="registerForm" />
</FormKit>
</template>
</div>
@ -69,7 +65,7 @@
</template>
<script>
import {app} from "@/services";
import { app } from '@/services';
export default {
name: 'authentication',
@ -79,11 +75,11 @@ export default {
tabsItems: [
{
label: 'Войти',
name: 'login'
name: 'login',
},
{
label: 'Зарегистрироваться',
name: 'register'
name: 'register',
},
],
formLogin: {},
@ -95,7 +91,7 @@ export default {
label: 'Ваша почта',
placeholder: 'Ваша почта',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'password',
@ -103,7 +99,7 @@ export default {
label: 'придумайте пароль',
placeholder: 'Придумайте пароль',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'password',
@ -111,8 +107,8 @@ export default {
label: 'Повторите пароль',
placeholder: 'Повторите пароль',
validation: 'required',
outerClass: 'field--required'
}
outerClass: 'field--required',
},
],
loginForm: [
{
@ -121,7 +117,7 @@ export default {
label: 'Почта',
placeholder: 'Почта',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'password',
@ -129,16 +125,16 @@ export default {
label: 'пароль',
placeholder: 'Пароль',
validation: 'required',
outerClass: 'field--required'
}
outerClass: 'field--required',
},
],
showLoaderSending: false,
}
};
},
computed: {
show() {
return this.$store.state.modal.auth
}
return this.$store.state.modal.auth;
},
},
methods: {
changeTab(tab) {
@ -146,57 +142,62 @@ export default {
},
submitHandler(data, node) {
if (this.currentTabsItem === 'login') {
app.loginUser(this.formLogin).then(res => {
app
.loginUser(this.formLogin)
.then((res) => {
this.$store.dispatch('setToken', res);
app.user().then(user => {
app
.user()
.then((user) => {
this.$store.dispatch('setUser', user);
this.close();
this.next('profile');
}).catch(err => {
console.log(err)
})
}).catch(err => {
node.setErrors(
[err.detail],
err.error
)
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
node.setErrors([err.detail], err.error);
});
} else {
if (this.formRegistration.password === this.formRegistration.repeatPassword) {
app.createUser(this.formRegistration).then(res => {
if (
this.formRegistration.password ===
this.formRegistration.repeatPassword
) {
app
.createUser(this.formRegistration)
.then((res) => {
this.$store.dispatch('setToken', res);
app.user().then(user => {
app
.user()
.then((user) => {
this.$store.dispatch('setUser', user);
this.close();
this.next('profile');
}).catch(err => {
console.log(err)
})
}).catch(err => {
node.setErrors(
[err.detail],
err.error
)
console.log(err)
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
node.setErrors([err.detail], err.error);
console.log(err);
});
} else {
node.setErrors(
['Пароли не совпадают'],
{
node.setErrors(['Пароли не совпадают'], {
password: '',
repeatPassword: '',
}
)
});
}
}
},
close() {
this.$store.dispatch('setModal', {auth: false});
this.$store.dispatch('setModal', { auth: false });
},
next(name) {
this.$router.push({name});
}
}
}
this.$router.push({ name });
},
},
};
</script>

51
client/src/components/modal/rubric-modal.vue
View File

@ -10,36 +10,36 @@
>
<template v-if="showLoader">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
<template v-else>
<div class="rubric-modal__header">
<div class="title m--white rubric-modal__title">
{{rubrik.name}}
{{ rubrik.name }}
</div>
<button
class="button modal__close rubric-modal__close"
@click="$emit('hideModal')"
>
</button>
></button>
</div>
<div class="rubric-modal__cover">
<img :src="`${selfUrl}${rubrik.img}`" alt=""/>
<img :src="`${selfUrl}${rubrik.img}`" alt="" />
</div>
<div class="rubric-modal__description">
{{rubrik.description}}
{{ rubrik.description }}
</div>
<button class="button m--fit-content m--white m--arrow" v-if="user?.id">Написать</button>
<button class="button m--fit-content m--white m--arrow" v-if="user?.id">
Написать
</button>
</template>
</vue-final-modal>
</template>
<script>
import {app} from "@/services";
import {selfUrl} from '@/settings';
import { app } from '@/services';
import { selfUrl } from '@/settings';
export default {
name: 'RubricModal',
@ -48,21 +48,21 @@ export default {
type: Boolean,
default() {
return false;
}
},
},
selectRubric: {
type: String,
default() {
return '';
}
},
},
},
data() {
return {
selfUrl,
rubrik: {},
showLoader: false
}
showLoader: false,
};
},
computed: {
show() {
@ -73,25 +73,28 @@ export default {
},
},
watch: {
'selectRubric': {
selectRubric: {
handler() {
if (this.selectRubric){
if (this.selectRubric) {
this.getRubrik();
}
}
}
},
},
},
methods: {
getRubrik() {
this.showLoader = true;
app.getRubrik(this.selectRubric).then((data) => {
app
.getRubrik(this.selectRubric)
.then((data) => {
this.showLoader = false;
this.rubrik = data[0];
}).catch(err => {
this.showLoader = false;
console.log(err)
})
.catch((err) => {
this.showLoader = false;
console.log(err);
});
},
}
}
},
};
</script>

62
client/src/components/modal/сhanging-user.vue
View File

@ -8,11 +8,7 @@
:clickToClose="false"
@click-outside="close()"
>
<button
class="button modal__close"
@click="close"
>
</button>
<button class="button modal__close" @click="close"></button>
<div class="modal__content">
<div class="modal__title">Изменение данных</div>
<FormKit
@ -30,27 +26,27 @@
}"
@submit="submitHandler"
>
<FormKitSchema :schema="userForm"/>
<FormKitSchema :schema="userForm" />
</FormKit>
</div>
</vue-final-modal>
</template>
<script>
import {app} from "@/services";
import { app } from '@/services';
export default {
name: 'recovery',
data(){
return{
userForm:[
data() {
return {
userForm: [
{
$formkit: 'text',
name: 'email',
label: 'Ваша почта',
placeholder: 'Ваша почта',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'password',
@ -58,7 +54,7 @@ export default {
label: 'Введите старый пароль',
placeholder: 'Введите старый пароль',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'password',
@ -66,44 +62,44 @@ export default {
label: 'Введите новый пароль',
placeholder: 'Введите новый пароль',
validation: 'required',
outerClass: 'field--required'
}
outerClass: 'field--required',
},
],
formData: {},
showLoaderSending: false,
}
};
},
computed: {
user() {
return this.$store.state.user;
},
show(){
show() {
return this.$store.state.modal.changingUser;
}
},
},
mounted() {
this.formData.email = this.user.email;
this.formData.email = this.user?.email;
},
methods:{
submitHandler(data, node){
methods: {
submitHandler(data, node) {
this.showLoaderSending = true;
app.updateUser(this.formData).then(user=>{
app
.updateUser(this.formData)
.then((user) => {
this.showLoaderSending = false;
this.$store.dispatch('setUser', user);
}).catch(err=>{
this.showLoaderSending = false;
node.setErrors(
[err.detail],
err.error
)
})
.catch((err) => {
this.showLoaderSending = false;
node.setErrors([err.detail], err.error);
});
},
close() {
this.$store.dispatch('setModal', {changingUser: false});
this.$store.dispatch('setModal', { changingUser: false });
},
next(name){
this.$router.push({name});
}
}
}
next(name) {
this.$router.push({ name });
},
},
};
</script>

107
client/src/components/pagination.vue
View File

@ -1,29 +1,37 @@
<template>
<div
v-if="total && false"
class="pagination"
>
<router-link class="pagination__btn m--prev"
:to="{ path: url, query: Object.assign({}, query, { page: goPrev }), hash: hash }"
<div v-if="total && false" class="pagination">
<router-link
class="pagination__btn m--prev"
:to="{
path: url,
query: Object.assign({}, query, { page: goPrev }),
hash: hash,
}"
>
</router-link>
<ul class="pagination__list">
<li
v-for="page in pagesArray"
:key="`page-${page.value}`"
>
<li v-for="page in pagesArray" :key="`page-${page.value}`">
<router-link
class="pagination__link"
:class="[page.value === currentPage && 'm--current']"
:to="{ path: url, query: Object.assign({}, query, { page: page.value }), hash: hash }"
:to="{
path: url,
query: Object.assign({}, query, { page: page.value }),
hash: hash,
}"
:event="page.value ? 'click' : ''"
>
{{ page.text }}
</router-link>
</li>
</ul>
<router-link class="pagination__btn m--next"
:to="{ path: url, query: Object.assign({}, query, { page: goForward }), hash: hash }"
<router-link
class="pagination__btn m--next"
:to="{
path: url,
query: Object.assign({}, query, { page: goForward }),
hash: hash,
}"
>
</router-link>
</div>
@ -36,45 +44,45 @@ export default {
type: Number,
default() {
return 0;
}
},
},
limit: {
type: Number,
default() {
return 10;
}
},
},
currentPage: {
type: Number,
default() {
return 1;
}
},
},
query: {
type: Object,
default() {
return {};
}
},
},
hash: {
type: String,
default() {
return '';
}
},
},
url: {
type: String,
default() {
return '';
}
}
},
},
},
data() {
return {}
return {};
},
computed: {
step() {
return 1
return 1;
},
pages() {
const pagesCount = Math.ceil(this.total / this.limit);
@ -83,41 +91,52 @@ export default {
pagesArray() {
const count = Math.ceil(this.total / this.limit);
let items = [];
[...Array(count).keys()].map(i => i + 1).forEach(item => {
[...Array(count).keys()]
.map((i) => i + 1)
.forEach((item) => {
if (count <= 4) {
items.push({text: item, value: item});
items.push({ text: item, value: item });
} else {
if (item === 1 && this.currentPage !== item && this.currentPage - 1 !== 1 && this.currentPage - 2 !== 1) {
items.push({text: '1', value: 1});
items.push({text: '...', value: null});
} else if (item === count && this.currentPage + 1 !== count && this.currentPage + 2 !== count) {
items.push({text: '...', value: null});
items.push({text: count, value: count});
if (
item === 1 &&
this.currentPage !== item &&
this.currentPage - 1 !== 1 &&
this.currentPage - 2 !== 1
) {
items.push({ text: '1', value: 1 });
items.push({ text: '...', value: null });
} else if (
item === count &&
this.currentPage + 1 !== count &&
this.currentPage + 2 !== count
) {
items.push({ text: '...', value: null });
items.push({ text: count, value: count });
} else {
let deltaPrev = (count - this.currentPage <= 3) ? 3 : 2;
let deltaAfter = (this.currentPage <= 3) ? 4 - this.currentPage : 2;
if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) {
console.log(item)
items.push({text: item, value: item});
let deltaPrev = count - this.currentPage <= 3 ? 3 : 2;
let deltaAfter = this.currentPage <= 3 ? 4 - this.currentPage : 2;
if (
item > this.currentPage - deltaPrev &&
item < this.currentPage + deltaAfter
) {
console.log(item);
items.push({ text: item, value: item });
}
}
}
});
return items
return items;
},
goForward() {
return `${this.currentPage + this.step}`
return `${this.currentPage + this.step}`;
},
goPrev() {
return `${this.currentPage - this.step}`
return `${this.currentPage - this.step}`;
},
},
mounted() {
},
beforeDestroy() {
},
created() {
},
mounted() {},
beforeDestroy() {},
created() {},
methods: {},
};
</script>

283
client/src/components/player.vue
View File

@ -1,37 +1,51 @@
<template>
<div class="player">
<div class="player__cover">
<q-skeleton v-if="loaderPlay" height="100%"/>
<img v-else :src="currentPlay.art" alt="player"/>
<q-skeleton v-if="loaderPlay" height="100%" />
<img v-else :src="currentPlay.art" alt="player" />
</div>
<div class="player__content">
<div class="player__top">
<q-skeleton v-if="loaderPlay" type="circle" class="player__btn m--skeleton"/>
<q-skeleton
v-if="loaderPlay"
type="circle"
class="player__btn m--skeleton"
/>
<template v-else>
<button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause">
</button>
<button v-else @click="handlerPlay" class="button player__btn m--play">
</button>
<button
v-if="currentPlay.isPlay"
@click="handlerPause"
class="button player__btn m--pause"
></button>
<button
v-else
@click="handlerPlay"
class="button player__btn m--play"
></button>
</template>
<div class="player__executor">
<q-skeleton v-if="loaderPlay" class="player__executor m--skeleton"/>
<q-skeleton v-if="loaderPlay" class="player__executor m--skeleton" />
<template v-else>
{{ currentPlay.title || '—' }}
</template>
<span>
<q-skeleton v-if="loaderPlay"/>
<q-skeleton v-if="loaderPlay" />
<template v-else>
{{ currentPlay.artist || '—' }}
</template>
</span>
</div>
<template v-if="user?.id">
<q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton"/>
<div v-else class="player__favorites" :class="[isFavorites&&'m--active']" @click="handlerFavorites">
</div>
<q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton" />
<div
v-else
class="player__favorites"
:class="[isFavorites && 'm--active']"
@click="handlerFavorites"
></div>
</template>
<div class="player__tools">
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton"/>
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
<FormKit
v-else
v-model="isUserMusic"
@ -39,26 +53,33 @@
label="Включить мою музыку"
:disabled="!user?.id || userSongList.length === 0"
/>
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton"/>
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
<div v-else class="player__volume">
<span @click="changeVolume('set')"/>
<input type="range" v-model="songVolume" @change="changeVolume">
<span @click="changeVolume('set')" />
<input type="range" v-model="songVolume" @change="changeVolume" />
</div>
</div>
</div>
<div class="player__bottom">
<div class="player__time" :class="!loaderPlay&&!isUserMusic&&'m--ether'">
<q-skeleton v-if="loaderPlay"/>
<div
class="player__time"
:class="!loaderPlay && !isUserMusic && 'm--ether'"
>
<q-skeleton v-if="loaderPlay" />
<template v-else-if="isUserMusic">
{{ getTime(playerInfo.currentTime) }} / {{ getTime(playerInfo.duration) }}
</template>
<template v-else>
Эфир
{{ getTime(playerInfo.currentTime) }} /
{{ getTime(playerInfo.duration) }}
</template>
<template v-else> Эфир </template>
</div>
<div class="player__progress">
<q-skeleton v-if="loaderPlay" height="5px"/>
<input v-else :disabled="!isUserMusic" type="range" v-model="playerInfo.progress">
<q-skeleton v-if="loaderPlay" height="5px" />
<input
v-else
:disabled="!isUserMusic"
type="range"
v-model="playerInfo.progress"
/>
</div>
</div>
</div>
@ -66,7 +87,7 @@
</template>
<script>
import {app, audio as Player} from "@/services";
import { app, audio as Player } from '@/services';
export default {
name: 'player',
@ -81,29 +102,29 @@ export default {
playerInfo: {
progress: 0,
currentTime: 0,
duration: 0
duration: 0,
},
}
};
},
computed: {
user() {
return this.$store.state.user;
},
currentPlay() {
return this.$store.state.currentPlay
return this.$store.state.currentPlay;
},
player() {
return this.$store.state.player
return this.$store.state.player;
},
userSongList() {
return this.$store.state.userFavorite?.songs || []
return this.$store.state.userFavorite?.songs || [];
},
loaderPlay() {
return this.$store.state.currentPlay.isLoader
}
return this.$store.state.currentPlay.isLoader;
},
},
watch: {
'currentPlay': {
currentPlay: {
immediate: false,
handler(to, from) {
if (this.isUserMusic === this.currentPlay.live) {
@ -117,7 +138,7 @@ export default {
}
},
},
'userSongList': {
userSongList: {
immediate: false,
handler(to, from) {
if (this.user?.id && to.length !== from.length) {
@ -125,7 +146,7 @@ export default {
}
},
},
'isUserMusic': {
isUserMusic: {
immediate: false,
handler() {
if (this.isUserMusic === this.currentPlay.live) {
@ -138,7 +159,7 @@ export default {
this.connectionPlayer();
},
mounted() {
console.log(this.currentPlay)
console.log(this.currentPlay);
this.$store.dispatch('initPlayer');
if (this.user?.id) {
this.checkSongIsFavorite();
@ -146,14 +167,24 @@ export default {
}
this.playerInfo.progress = this.currentPlay.live ? 100 : 0;
if (!this.currentPlay.live && this.userSongList?.length > 0) {
this.$store.dispatch('setCurrentPlay', {...this.userSongList[this.currentPlay.currentIndex || 0], live: false});
this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id);
this.$store.dispatch('setCurrentPlay', {
...this.userSongList[this.currentPlay.currentIndex || 0],
live: false,
});
this.getAudio(
this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id,
);
if (this.player.target) {
this.player.target.addEventListener('timeupdate', this.updateProgress)
this.player.target.addEventListener('timeupdate', this.updateProgress);
}
}
if (!this.user?.id){
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true, currentIndex: null});
if (!this.user?.id) {
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
live: true,
isLoader: true,
currentIndex: null,
});
}
},
methods: {
@ -166,27 +197,36 @@ export default {
this.connection.onHandler(this.getPlaying);
},
checkSongIsFavorite() {
app.getCheckFavoriteSong(this.currentPlay.azura_id || this.currentPlay.id).then(res => {
app
.getCheckFavoriteSong(this.currentPlay.azura_id || this.currentPlay.id)
.then((res) => {
this.isFavorites = res.is_favorite;
}).catch(err => {
console.error(err)
})
.catch((err) => {
console.error(err);
});
},
removeFavorites(song) {
app.removeFavorites(song).then(() => {
app
.removeFavorites(song)
.then(() => {
this.getSongList();
}).catch(err => {
this.showLoader = false;
console.error(err)
})
.catch((err) => {
this.showLoader = false;
console.error(err);
});
},
getPlaying(e) {
const jsonData = JSON.parse(e.data)
const jsonData = JSON.parse(e.data);
if (jsonData?.pub?.data) {
const data = jsonData?.pub?.data;
if (this.currentPlay.live) {
if (data.np.station.listen_url !== this.player.target.src) {
console.log('data.np.station.listen_url', data.np.station.listen_url)
console.log(
'data.np.station.listen_url',
data.np.station.listen_url,
);
this.$store.dispatch('changePlayer', data.np.station.listen_url);
const params = {
...this.currentPlay,
@ -194,8 +234,8 @@ export default {
azura_id: data.np.now_playing.song.id,
isLoader: false,
live: true,
currentIndex: null
}
currentIndex: null,
};
delete params.unique_id;
this.$store.dispatch('setCurrentPlay', params);
}
@ -205,59 +245,84 @@ export default {
updateProgress(e) {
this.playerInfo = {
...this.playerInfo,
progress: this.player.target.currentTime / this.player.target.duration * 100,
currentTime: this.player.target.currentTime
}
if (this.player.target.currentTime === this.player.target.duration){
progress:
(this.player.target.currentTime / this.player.target.duration) * 100,
currentTime: this.player.target.currentTime,
};
if (this.player.target.currentTime === this.player.target.duration) {
let currentIndex = this.currentPlay.currentIndex + 1;
if (!this.userSongList[currentIndex]?.azura_id || currentIndex === null){
if (
!this.userSongList[currentIndex]?.azura_id ||
currentIndex === null
) {
currentIndex = 0;
}
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, ...this.userSongList[currentIndex], currentIndex})
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
...this.userSongList[currentIndex],
currentIndex,
});
}
},
handlerPlay() {
console.log(this.currentPlay)
console.log(this.player)
this.$store.dispatch('handlerPlayer', {play: true});
console.log(this.currentPlay);
console.log(this.player);
this.$store.dispatch('handlerPlayer', { play: true });
},
handlerPause() {
this.$store.dispatch('handlerPlayer', {pause: true});
this.$store.dispatch('handlerPlayer', { pause: true });
},
getSongList() {
app.getFavoriteList().then(res => {
this.$store.dispatch('setUserFavorite', {songs: res})
console.log('res.length' ,res.length)
if (res.length === 0){
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true});
app
.getFavoriteList()
.then((res) => {
this.$store.dispatch('setUserFavorite', { songs: res });
console.log('res.length', res.length);
if (res.length === 0) {
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
live: true,
isLoader: true,
});
}
}).catch(err => {
console.error(err)
})
.catch((err) => {
console.error(err);
});
},
handlerFavorites() {
if (this.user?.id) {
const params = {...this.currentPlay, azura_id: Number(this.currentPlay.id)?this.currentPlay.azura_id:this.currentPlay.id};
const params = {
...this.currentPlay,
azura_id: Number(this.currentPlay.id)
? this.currentPlay.azura_id
: this.currentPlay.id,
};
if (!this.isFavorites) {
delete params.id;
app.createFavoriteForUser(params).then(() => {
app
.createFavoriteForUser(params)
.then(() => {
this.isFavorites = !this.isFavorites;
this.getSongList();
}).catch(err => {
console.error(err)
})
.catch((err) => {
console.error(err);
});
} else {
console.log(params)
app.removeFavorites(params).then(()=>{
console.log(params);
app
.removeFavorites(params)
.then(() => {
this.getSongList();
}).catch(err=>{
console.error(err)
})
.catch((err) => {
console.error(err);
});
}
} else {
this.$emit('shopAuthentication', true)
this.$emit('shopAuthentication', true);
}
},
changeVolume(type) {
let volume = this.songVolume;
@ -267,52 +332,72 @@ export default {
} else {
volume = this.songVolume / 100;
}
if (volume === 0) volume = 0.01
this.$store.dispatch('handlerPlayer', {volume});
if (volume === 0) volume = 0.01;
this.$store.dispatch('handlerPlayer', { volume });
},
getAudio(id) {
app.getAudio(id).then(res => {
const blob = new Blob([res], {type: 'application/audio'});
app
.getAudio(id)
.then((res) => {
const blob = new Blob([res], { type: 'application/audio' });
const audioUrl = URL.createObjectURL(blob);
this.$store.dispatch('changePlayer', audioUrl);
this.player.target.addEventListener('timeupdate', this.updateProgress);
this.player.target.addEventListener(
'timeupdate',
this.updateProgress,
);
blob.arrayBuffer().then(buffer => {
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
blob.arrayBuffer().then((buffer) => {
var audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
audioContext.decodeAudioData(buffer, (decodedData) => {
this.playerInfo.duration = decodedData.duration;
});
});
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isLoader: false})
}).catch(err => {
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isLoader: false})
console.debug(err)
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
isLoader: false,
});
})
.catch((err) => {
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
isLoader: false,
});
console.debug(err);
});
},
changeLive() {
if (this.currentPlay.live) {
console.log('избранное')
console.log('избранное');
this.playerInfo.progress = 0;
const params = {...this.userSongList[this.currentPlay.currentIndex || 0], live: false, isLoader: true};
const params = {
...this.userSongList[this.currentPlay.currentIndex || 0],
live: false,
isLoader: true,
};
if (!this.currentPlay.currentIndex) params.currentIndex = 0;
this.$store.dispatch('setCurrentPlay', params);
} else {
this.playerInfo.progress = 100;
this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true});
console.log('поток')
this.$store.dispatch('setCurrentPlay', {
...this.currentPlay,
live: true,
isLoader: true,
});
console.log('поток');
}
},
getTime(value) {
let minutes = Math.floor(value / 60);
let seconds = Math.round(value % 60);
let paddedMinutes = minutes < 10 ? "0" + minutes : minutes;
let paddedSeconds = seconds < 10 ? "0" + seconds : seconds;
let paddedMinutes = minutes < 10 ? '0' + minutes : minutes;
let paddedSeconds = seconds < 10 ? '0' + seconds : seconds;
if (!paddedMinutes) paddedMinutes = '00';
if (!paddedSeconds) paddedSeconds = '00';
return `${paddedMinutes}:${paddedSeconds}`;
},
}
}
},
};
</script>

26
client/src/components/playlist-item.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="playlist-item" @click="selectPlaylist">
<div class="playlist-item__cover"></div>
<div>{{playlist.name}}</div>
<div>{{ playlist.name }}</div>
<div @click="editPlaylist">...</div>
</div>
</template>
@ -9,19 +9,19 @@
<script>
export default {
name: 'playlist-item',
props:{
playlist:{
props: {
playlist: {
type: Object,
default: () => {}
}
default: () => {},
},
methods:{
editPlaylist(){
this.$emit('editPlaylist', this.playlist)
},
selectPlaylist(){
this.$emit('selectPlaylist', this.playlist)
}
}
}
methods: {
editPlaylist() {
this.$emit('editPlaylist', this.playlist);
},
selectPlaylist() {
this.$emit('selectPlaylist', this.playlist);
},
},
};
</script>

20
client/src/components/playlist-roster.vue
View File

@ -15,27 +15,27 @@
</template>
<script>
import PlaylistItem from "@/components/playlist-item.vue";
import PlaylistItem from '@/components/playlist-item.vue';
export default {
name: 'playlist-roster',
components: {PlaylistItem},
components: { PlaylistItem },
props: {
list: {
type: Array,
default: () => []
}
default: () => [],
},
},
methods: {
createPlaylist() {
this.$emit('createPlaylist')
this.$emit('createPlaylist');
},
selectPlaylist(params) {
this.$router.push({name: 'playlist', params: {id: params.id}})
this.$router.push({ name: 'playlist', params: { id: params.id } });
},
editPlaylist(params) {
this.$router.push({name: 'playlist-edit', params: {id: params.id}})
}
}
}
this.$router.push({ name: 'playlist-edit', params: { id: params.id } });
},
},
};
</script>

85
client/src/components/rubric-block.vue
View File

@ -1,70 +1,93 @@
<template>
<div class="rubric-block">
<div class="rubric-block__header">
<h2 class="h2 rubric-block__header-title">
Рубрики
</h2>
<button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">Смотреть все</button>
<h2 class="h2 rubric-block__header-title">Рубрики</h2>
<button
class="button m--arrow rubric-block__link"
v-if="$route.name !== 'rubric'"
@click="next('rubric')"
>
Смотреть все
</button>
<div class="p rubric-block__description">
IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений IT-индустрии
IT-радио - это уникальная платформа для обмена опытом, знаниями и
обсуждения актуальных вопросов, связанных с разработкой программного
обеспечения, искусственного интеллекта, интернета вещей и других
направлений IT-индустрии
</div>
</div>
<template v-if="showLoader">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
<div v-else class="rubric-block__list">
<div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
<div class="title rubric-block__title">{{rubrik.name}}</div>
<div class="p rubric-block__description m--50">{{rubrik.title}}</div>
<button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
<div
class="rubric-block__item"
v-for="rubrik in rubriks"
:key="`rubrik_${rubrik.id}`"
>
<div class="title rubric-block__title">{{ rubrik.name }}</div>
<div class="p rubric-block__description m--50">{{ rubrik.title }}</div>
<button
class="button m--arrow rubric-block__btn"
@click="showModalRubric(rubrik.id)"
>
Узнать больше
</button>
</div>
</div>
</div>
<RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate"/>
<RubricModal
:showModal="isShowModalRubric"
@hideModal="hiddenModalRubric"
:selectRubric="ModalTemplate"
/>
</template>
<script>
import RubricModal from "@/components/modal/rubric-modal.vue";
import {app} from "@/services";
import RubricModal from '@/components/modal/rubric-modal.vue';
import { app } from '@/services';
export default {
name: 'rubric-block',
components: {RubricModal},
data(){
return{
components: { RubricModal },
data() {
return {
isShowModalRubric: false,
ModalTemplate:null,
ModalTemplate: null,
rubriks: [],
showLoader: false,
}
};
},
created() {
this.getRubriks();
},
methods:{
methods: {
getRubriks() {
this.showLoader = true;
app.getRubriks().then((data) => {
app
.getRubriks()
.then((data) => {
this.showLoader = false;
this.rubriks = data;
}).catch(err => {
this.showLoader = false;
console.log(err)
})
.catch((err) => {
this.showLoader = false;
console.log(err);
});
},
showModalRubric(key){
this.ModalTemplate = key
showModalRubric(key) {
this.ModalTemplate = key;
this.isShowModalRubric = true;
},
hiddenModalRubric(){
hiddenModalRubric() {
this.isShowModalRubric = false;
},
next(name){
this.$router.push({name})
}
}
}
next(name) {
this.$router.push({ name });
},
},
};
</script>

143
client/src/components/song-item.vue
View File

@ -1,27 +1,68 @@
<template>
<div class="song-item" :class="[selectSong&&'m--select']" @click="handlerSelectSong">
<div class="song-item__selected" :class="[!isPlay&&'m--stop']">
<svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="" d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z" fill="#7138F4"/>
<path d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z" fill="#7138F4"/>
<path d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z" fill="#7138F4"/>
<path d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z" fill="#7138F4"/>
<path d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z" fill="#7138F4"/>
<div
class="song-item"
:class="[selectSong && 'm--select']"
@click="handlerSelectSong"
>
<div class="song-item__selected" :class="[!isPlay && 'm--stop']">
<svg
width="33"
height="28"
viewBox="0 0 33 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class=""
d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z"
fill="#7138F4"
/>
<path
d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z"
fill="#7138F4"
/>
<path
d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z"
fill="#7138F4"
/>
<path
d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z"
fill="#7138F4"
/>
<path
d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z"
fill="#7138F4"
/>
</svg>
</div>
<div>
<button v-if="isPlay" @click.stop="handlerPause" class="button song-item__btn m--pause">
</button>
<button v-else @click.stop="handlerPlay" class="button song-item__btn m--play">
</button>
<button
v-if="isPlay"
@click.stop="handlerPause"
class="button song-item__btn m--pause"
></button>
<button
v-else
@click.stop="handlerPlay"
class="button song-item__btn m--play"
></button>
</div>
<div class="song-item__info">
<span>{{song.title}}</span>
{{song.artist}}
<span>{{ song.title }}</span>
{{ song.artist }}
</div>
<div class="song-item__tools">
<button class="button song-item__btn m--small m--favorites" @click.stop="removeSong"></button>
<button class="button song-item__btn m--small m--add" :class="songAlreadyAddPlaylist&&'m--already'" @click.stop="songAlreadyAddPlaylist?removeToPlaylist():addPlaylist()"></button>
<button
class="button song-item__btn m--small m--favorites"
@click.stop="removeSong"
></button>
<button
class="button song-item__btn m--small m--add"
:class="songAlreadyAddPlaylist && 'm--already'"
@click.stop="
songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()
"
></button>
</div>
</div>
</template>
@ -29,64 +70,64 @@
<script>
export default {
name: 'song-item',
props:{
selectSong:{
props: {
selectSong: {
type: Boolean,
default(){
return false
}
default() {
return false;
},
song:{
},
song: {
type: Object,
default(){
return {}
}
default() {
return {};
},
playSong:{
type: Boolean,
default(){
return false
}
},
songAlreadyAddPlaylist:{
playSong: {
type: Boolean,
default(){
return false
}
default() {
return false;
},
},
songAlreadyAddPlaylist: {
type: Boolean,
default() {
return false;
},
},
},
watch: {
'playSong': {
playSong: {
immediate: true,
handler() {
this.isPlay = this.playSong;
},
}
},
data(){
return{
isPlay: this.playSong
}
},
methods:{
data() {
return {
isPlay: this.playSong,
};
},
methods: {
handlerPlay() {
this.$emit('playSong', {...this.song, live: false, isPlay: true,})
this.$emit('playSong', { ...this.song, live: false, isPlay: true });
},
handlerPause() {
this.$emit('pauseSong', {...this.song, live: false, isPlay: false,})
this.$emit('pauseSong', { ...this.song, live: false, isPlay: false });
},
handlerSelectSong(){
this.$emit('selectSong', {...this.song, live: false})
handlerSelectSong() {
this.$emit('selectSong', { ...this.song, live: false });
},
removeSong(){
removeSong() {
this.$emit('removeSong', this.song);
},
addPlaylist(){
addPlaylist() {
this.$emit('addPlaylist', this.song);
},
removeToPlaylist(){
removeToPlaylist() {
this.$emit('removePlaylist', this.song);
}
}
}
},
},
};
</script>

50
client/src/components/song-list.vue
View File

@ -4,7 +4,9 @@
v-for="song in songList"
:key="song"
:song="song"
:playSong="song.azura_id === currentPlay.azura_id? currentPlay.isPlay: false"
:playSong="
song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false
"
:selectSong="song.azura_id === currentPlay.azura_id"
:songAlreadyAddPlaylist="songAlreadyAdd"
@selectSong="handlerSelectSong"
@ -18,55 +20,57 @@
</template>
<script>
import SongItem from "@/components/song-item.vue";
import SongItem from '@/components/song-item.vue';
export default {
name: 'song-list',
components: {SongItem},
components: { SongItem },
props: {
songList: {
type: Array,
default: () => []
default: () => [],
},
songAlreadyAdd: {
type: Boolean,
default: () => false
}
default: () => false,
},
},
data() {
return {}
return {};
},
computed: {
currentPlay() {
return this.$store.state.currentPlay
}
return this.$store.state.currentPlay;
},
},
methods: {
handlerSelectSong(params) {
const data = {...this.currentPlay, ...params, isLoader: true};
data.currentIndex = this.songList.findIndex(el=>el.azura_id === params.azura_id);
const data = { ...this.currentPlay, ...params, isLoader: true };
data.currentIndex = this.songList.findIndex(
(el) => el.azura_id === params.azura_id,
);
this.$store.dispatch('setCurrentPlay', data);
console.log('handlerSelectSong')
console.log('handlerSelectSong');
},
handlerPlaySong(params) {
this.$store.dispatch('setCurrentPlay', params);
console.log('handlerPlaySong')
console.log('handlerPlaySong');
// this.$store.dispatch('handlerPlayer', {pause: true});
},
handlerPauseSong(params) {
this.$store.dispatch('setCurrentPlay', params);
console.log('handlerPauseSong')
console.log('handlerPauseSong');
// this.$store.dispatch('handlerPlayer', {play: true});
},
removeSong(song){
this.$emit('removeSong', song)
removeSong(song) {
this.$emit('removeSong', song);
},
addPlaylist(song){
this.$emit('addPlaylist', song)
addPlaylist(song) {
this.$emit('addPlaylist', song);
},
removePlaylist(song){
this.$emit('removePlaylist', song)
}
}
}
removePlaylist(song) {
this.$emit('removePlaylist', song);
},
},
};
</script>

14
client/src/components/support-block.vue
View File

@ -4,15 +4,19 @@
<div class="support-block__list">
<div class="support-block__item m--one-circle">
<div class="title">Донат</div>
Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут на дальнейшее развитие проекта
Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут
на дальнейшее развитие проекта
</div>
<div class="support-block__item m--two-circle">
<div class="title">Дело</div>
Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь продвижением или делаете еще что-нибудь классное и думаете, что можете быть нам полезны на волонтерских началах — свяжитесь с нами через форму
Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь
продвижением или делаете еще что-нибудь классное и думаете, что можете
быть нам полезны на волонтерских началах — свяжитесь с нами через форму
</div>
<div class="support-block__item m--three-circle">
<div class="title">Развитие</div>
Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим постом, видео в ютубе или рассказать о нас в своей аудитории
Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим
постом, видео в ютубе или рассказать о нас в своей аудитории
</div>
</div>
</div>
@ -20,6 +24,6 @@
<script>
export default {
name: 'SupportBlock'
}
name: 'SupportBlock',
};
</script>

52
client/src/components/team.vue
View File

@ -1,17 +1,16 @@
<template>
<div class="team">
<div class="team__header">
<h2 class="h2 team__title">
Наша команда
</h2>
<h2 class="h2 team__title">Наша команда</h2>
<div class="team__description">
На IT волне команда профессионалов неутомимо трудится, чтобы дарить слушателям самые свежие и актуальные
новости из мира технологий, отвечать на их вопросы и обсуждать горячие темы на IT радио.
На IT волне команда профессионалов неутомимо трудится, чтобы дарить
слушателям самые свежие и актуальные новости из мира технологий,
отвечать на их вопросы и обсуждать горячие темы на IT радио.
</div>
</div>
<template v-if="showLoader">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
@ -35,7 +34,7 @@
768: {
slidesPerView: 2.5,
},
1020:{
1020: {
slidesPerView: 3,
},
1280: {
@ -44,9 +43,13 @@
}"
class="team__slider"
>
<SwiperSlide class="team__item" v-for="employee in team" :key="employee.id">
<SwiperSlide
class="team__item"
v-for="employee in team"
:key="employee.id"
>
<div class="team__cover">
<img :src="`${selfUrl + employee.img_person}`" alt="user"/>
<img :src="`${selfUrl + employee.img_person}`" alt="user" />
</div>
<div class="team__name">
{{ employee.name }} {{ employee.last_name }}
@ -58,7 +61,7 @@
<div class="team__progress" ref="progressBar">
<span></span>
</div>
<router-link :to="{name: 'about'}" class="m--link">
<router-link :to="{ name: 'about' }" class="m--link">
Больше о нас
</router-link>
</div>
@ -67,21 +70,21 @@
<script>
import 'swiper/css';
import {Swiper, SwiperSlide} from "swiper/vue";
import {Pagination, Scrollbar} from "swiper/modules";
import {app} from "@/services";
import {selfUrl} from '@/settings';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Scrollbar } from 'swiper/modules';
import { app } from '@/services';
import { selfUrl } from '@/settings';
export default {
name: 'team',
components: {Swiper, SwiperSlide},
components: { Swiper, SwiperSlide },
data() {
return {
selfUrl,
team: [],
showLoader: false,
modules: [Scrollbar, Pagination],
}
};
},
created() {
this.getTeams();
@ -89,14 +92,17 @@ export default {
methods: {
getTeams() {
this.showLoader = true;
app.getTeams().then((data) => {
app
.getTeams()
.then((data) => {
this.showLoader = false;
this.team = data;
}).catch(err => {
this.showLoader = false;
console.log(err)
})
}
}
}
.catch((err) => {
this.showLoader = false;
console.log(err);
});
},
},
};
</script>

36
client/src/router/index.js
View File

@ -1,7 +1,12 @@
import { route } from 'quasar/wrappers'
import store from '@/store'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'
import { route } from 'quasar/wrappers';
import store from '@/store';
import {
createRouter,
createMemoryHistory,
createWebHistory,
createWebHashHistory,
} from 'vue-router';
import routes from './routes';
/*
* If not building with SSR mode, you can
@ -15,18 +20,20 @@ import routes from './routes'
export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
return savedPosition;
} else {
//document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
//if (to.query.page) return;
return new Promise((resolve) => {
resolve({ left: 0, top: 0 });
})
});
}
},
routes,
@ -36,11 +43,16 @@ export default route(function (/* { store, ssrContext } */) {
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
})
history: createHistory(
process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE,
),
});
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth) && !process.env.SERVER) {
if (
to.matched.some((record) => record.meta.requiresAuth) &&
!process.env.SERVER
) {
if (store.state.user && store.state.user?.id) {
next();
} else {
@ -58,5 +70,5 @@ export default route(function (/* { store, ssrContext } */) {
}
});
return Router
})
return Router;
});

50
client/src/router/routes.js
View File

@ -1,14 +1,13 @@
import home from "@/views/home.vue";
import rubric from "@/views/rubric.vue";
import playlists from "@/views/playlists.vue";
import support from "@/views/support.vue";
import contacts from "@/views/contacts.vue";
import podcasts from "@/views/podcasts.vue";
import about from "@/views/about.vue";
import profile from "@/views/profile.vue";
import playlist from "@/views/playlist.vue";
import playlistCreate from "@/views/playlist-edit.vue";
import home from '@/views/home.vue';
import rubric from '@/views/rubric.vue';
import playlists from '@/views/playlists.vue';
import support from '@/views/support.vue';
import contacts from '@/views/contacts.vue';
import podcasts from '@/views/podcasts.vue';
import about from '@/views/about.vue';
import profile from '@/views/profile.vue';
import playlist from '@/views/playlist.vue';
import playlistCreate from '@/views/playlist-edit.vue';
const routes = [
{
@ -17,7 +16,7 @@ const routes = [
component: home,
meta: {
title: 'Главная',
isAuth: false
isAuth: false,
},
},
{
@ -26,7 +25,7 @@ const routes = [
component: about,
meta: {
title: 'О нас',
isAuth: false
isAuth: false,
},
},
{
@ -35,7 +34,7 @@ const routes = [
component: rubric,
meta: {
title: 'Рубрики',
isAuth: false
isAuth: false,
},
},
{
@ -44,7 +43,7 @@ const routes = [
component: playlists,
meta: {
title: 'Плейлисты',
isAuth: false
isAuth: false,
},
},
{
@ -53,7 +52,7 @@ const routes = [
component: podcasts,
meta: {
title: 'Подкасты',
isAuth: false
isAuth: false,
},
},
{
@ -62,7 +61,7 @@ const routes = [
component: support,
meta: {
title: 'Поддержка',
isAuth: false
isAuth: false,
},
},
{
@ -71,7 +70,7 @@ const routes = [
component: contacts,
meta: {
title: 'Контакты',
isAuth: false
isAuth: false,
},
},
{
@ -80,7 +79,7 @@ const routes = [
component: profile,
meta: {
title: 'Личный кабинет',
isAuth: false
isAuth: false,
},
children: [
{
@ -89,7 +88,7 @@ const routes = [
component: playlist,
meta: {
title: 'Плейлист',
requiresAuth: true
requiresAuth: true,
},
props: true,
},
@ -99,20 +98,21 @@ const routes = [
component: playlistCreate,
meta: {
title: 'Плейлист',
requiresAuth: true
requiresAuth: true,
},
props: true,
},{
},
{
path: 'playlist-edit/:id',
name: 'playlist-edit',
component: playlistCreate,
meta: {
title: 'Плейлист',
requiresAuth: true
requiresAuth: true,
},
props: true,
},
]
],
},
// {
@ -142,4 +142,4 @@ const routes = [
// },
];
export default routes
export default routes;

149
client/src/services/app.js
View File

@ -1,172 +1,215 @@
import {urlPath as settings} from '@/settings';
import {REST, RESTError} from './rest';
import { urlPath as settings } from '@/settings';
import { REST, RESTError } from './rest';
export default class extends REST {
static get settings() {
return settings;
}
static user(params) {
return this._get(`user`, {}, params).then((data) => {
return this._get(`user`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Не удалось создать пользователя');
});
}
static loginUser(params) {
return this._post(`token`, {}, params).then((data) => {
return this._post(`token`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Не удалось создать пользователя');
});
}
static createUser(params) {
return this._post(`user/create_user`, {}, params).then((data) => {
return this._post(`user/create_user`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Не удалось создать пользователя');
});
}
static updateUser(params) {
return this._post(`user/update_user`, {}, params).then((data) => {
return this._post(`user/update_user`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Не удалось создать пользователя');
});
}
static getTeams(station, params) {
return this._get(`radio/teams`, params, {}).then((data) => {
return this._get(`radio/teams`, params, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении команды');
});
}
static getCheckFavoriteSong(id){
return this._get(`radio/song/check_is_favorite/${id}`, {}, {}).then((data) => {
static getCheckFavoriteSong(id) {
return this._get(`radio/song/check_is_favorite/${id}`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при проверке песни');
});
}
static getAllSong(){
return this._get(`radio/song/get_all_song`, {}, {}).then((data) => {
static getAllSong() {
return this._get(`radio/song/get_all_song`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получениии всех песен');
});
}
static getAudio(id){
return this._get(`radio/song/get_audio/${id}`, {}, {}, false, true).then((data) => {
static getAudio(id) {
return this._get(`radio/song/get_audio/${id}`, {}, {}, false, true)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получениии песни');
});
}
static createFavoriteForUser(params){
return this._post(`radio/song/add_favorite`, {}, params).then((data) => {
static createFavoriteForUser(params) {
return this._post(`radio/song/add_favorite`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static removeFavoriteForUser(params){
return this._post(`radio/song/delete_song`, {}, params).then((data) => {
static removeFavoriteForUser(params) {
return this._post(`radio/song/delete_song`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static getFavoriteList(params){
return this._get(`radio/song`, {}, params).then((data) => {
static getFavoriteList(params) {
return this._get(`radio/song`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static getRubriks() {
return this._get(`radio/rubriks`, {}, {}).then((data) => {
return this._get(`radio/rubriks`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении рубрик');
});
}
static getRubrik(id) {
return this._get(`radio/rubriks/${id}`, {}, {}).then((data) => {
return this._get(`radio/rubriks/${id}`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении рубрик');
});
}
static removeFavorites(params) {
return this._post(`radio/song/delete_song`, {}, params).then((data) => {
return this._post(`radio/song/delete_song`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении рубрик');
});
}
static getPlaylists() {
return this._get(`radio/playlists`, {}, {}).then((data) => {
return this._get(`radio/playlists`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static getPlaylist(id) {
return this._get(`radio/playlists/${id}`, {}, {}).then((data) => {
return this._get(`radio/playlists/${id}`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static addSongToPlaylist(params) {
return this._post(`radio/playlists/add_to_playlist`, {}, params).then((data) => {
return this._post(`radio/playlists/add_to_playlist`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static removeSongToPlaylist(params) {
return this._post(`radio/playlists/delete_song_with_playlist`, {}, params).then((data) => {
return this._post(`radio/playlists/delete_song_with_playlist`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при удаления треков из плейлиста');
});
}
static updatePlaylist(params) {
return this._post(`radio/playlists/update_playlist`, {}, params).then((data) => {
return this._post(`radio/playlists/update_playlist`, {}, params)
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при удаления треков из плейлиста');
});
}
static createPlaylists() {
return this._post(`radio/playlists/create_playlist`, {}, {}).then((data) => {
return this._post(`radio/playlists/create_playlist`, {}, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static getNews(station, params) {
return this._get(`radio.mp3`, params, {}).then((data) => {
return this._get(`radio.mp3`, params, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}
static getProfiles(station, params) {
return this._get(`radio.mp3`, params, {}).then((data) => {
return this._get(`radio.mp3`, params, {})
.then((data) => {
return data;
}).catch((error) => {
})
.catch((error) => {
throw new RESTError(error, 'Ошибка при получении плейлистов');
});
}

3
client/src/services/audio.js
View File

@ -1,6 +1,5 @@
import { urlPathAudio as settings } from '@/settings';
import { urlPathAudio as settings, urlPathAudio } from '@/settings';
import { REST, RESTError } from './rest';
import { urlPathAudio } from '@/settings';
export default class extends REST {
static get settings() {

59
client/src/services/rest.js
View File

@ -4,8 +4,12 @@ import store from '@/store';
import cache from '@/utils/cache';
class RESTError extends Error {
constructor(error, message, params={}) {
let detail = error.response && error.response.data && (error.response.data.detail || error.response.data.error && error.response.data.error.detail);
constructor(error, message, params = {}) {
let detail =
error.response &&
error.response.data &&
(error.response.data.detail ||
(error.response.data.error && error.response.data.error.detail));
let header = (message || error.message) + (detail ? ': ' + detail : '');
super(header);
@ -18,14 +22,14 @@ class RESTError extends Error {
}
//if (this.response && (this.response.status === 401 || this.response.status === 403)) {
if (this.response && (this.response.status === 401)) {
if (this.response && this.response.status === 401) {
store.dispatch('deathUser');
store.dispatch('setShowAuthModal', true);
} else {
if (typeof Error.captureStackTrace === 'function') {
Error.captureStackTrace(this, this.constructor);
} else {
this.stack = (new Error(header)).stack;
this.stack = new Error(header).stack;
}
}
}
@ -35,8 +39,23 @@ class REST {
static get settings() {
throw new Error('settings must be overridden');
}
static _get(url, params={}, extraParams, use_cache=false, isBlob=false) {
return this._request('get', url, params, {}, {}, extraParams, use_cache, isBlob);
static _get(
url,
params = {},
extraParams,
use_cache = false,
isBlob = false,
) {
return this._request(
'get',
url,
params,
{},
{},
extraParams,
use_cache,
isBlob,
);
}
static _post(url, params, data) {
return this._request('post', url, params, data);
@ -50,9 +69,19 @@ class REST {
static _delete(url, params, data) {
return this._request('delete', url, params, data);
}
static _request(method, url, params={}, data={}, extraData={}, extraParams={}, use_cache=false, isBlob=false) {
static _request(
method,
url,
params = {},
data = {},
extraData = {},
extraParams = {},
use_cache = false,
isBlob = false,
) {
let cache_key = null;
return ajax.request({
return ajax
.request({
method,
url: `${this.settings}${url ? '/' : ''}${url}/`,
params,
@ -61,21 +90,22 @@ class REST {
extraParams,
headers: this._getAuthHeaders(),
responseType: this._getResponseType(isBlob),
}).then((response) => {
})
.then((response) => {
if (cache_key) {
cache.set(cache_key, response.data);
}
return response.data;
});
}
static _getResponseType(value){
static _getResponseType(value) {
if (value) {
return 'arraybuffer'
return 'arraybuffer';
}
}
static _getAuthHeaders() {
if (store.state.token) {
return { 'Authorization': `Bearer ${store.state.token}` };
return { Authorization: `Bearer ${store.state.token}` };
}
}
static _cancelToken() {
@ -85,7 +115,4 @@ class REST {
export default REST;
export {
RESTError,
REST
};
export { RESTError, REST };

24
client/src/settings/index.js
View File

@ -2,11 +2,11 @@
const ajax = {
timeout: process.env.AJAX_TIMEOUT,
responseType: process.env.AJAX_RESPONSE_TYPE,
responseEncoding: process.env.AJAX_ENCODING
responseEncoding: process.env.AJAX_ENCODING,
};
const cache = {
storage: process.env.CACHE_STORAGE
storage: process.env.CACHE_STORAGE,
};
const serviceUrl = {
@ -17,8 +17,8 @@ const serviceUrl = {
api: process.env.SERVICE_API,
apiAudio: process.env.SERVICE_URL_AUDIO,
localPath: '//localhost',
onLocal: (process.env.SERVICE_ON_LOCAL === 'true')
}
onLocal: process.env.SERVICE_ON_LOCAL === 'true',
};
let urlPath = `${serviceUrl.protocol}:${serviceUrl.url}${serviceUrl.api}`;
let urlPathAudio = `${serviceUrl.protocol}:${serviceUrl.apiAudio}`;
@ -27,7 +27,7 @@ if (process.env.CLIENT) {
urlPath = `${serviceUrl.localPath}:${serviceUrl.port}${serviceUrl.api}`;
}
}
let selfUrl = `${serviceUrl.protocol}:${serviceUrl.url}`
let selfUrl = `${serviceUrl.protocol}:${serviceUrl.url}`;
let selfPath = `${serviceUrl.protocol}:${serviceUrl.selfUrl}`;
const robotsTxt = {
@ -38,16 +38,8 @@ const robotsTxt = {
userAgent: process.env.ROBOTS_USER_AGENT,
allow: JSON.parse(process.env.ROBOTS_ALLOW || null),
disallow: JSON.parse(process.env.ROBOTS_DISALLOW || null),
}
]
},
],
};
export {
selfUrl,
ajax,
cache,
urlPath,
urlPathAudio,
selfPath,
robotsTxt,
};
export { selfUrl, ajax, cache, urlPath, urlPathAudio, selfPath, robotsTxt };

39
client/src/store/index.js
View File

@ -1,4 +1,4 @@
import {createStore} from 'vuex'
import { createStore } from 'vuex';
import VuexPersist from 'vuex-persist';
const vuexPersist = new VuexPersist({
@ -14,13 +14,13 @@ export default createStore({
token: null,
refreshToken: null,
user: null,
modal:{
modal: {
auth: false,
changingUser: false
changingUser: false,
},
showAuthModal: false,
station: {
id: 1
id: 1,
},
currentPlay: {
isPlay: false,
@ -35,9 +35,9 @@ export default createStore({
userFavorite: {
podcast: [],
playlist: [],
songs: []
}
}
songs: [],
},
};
},
plugins: [vuexPersist.plugin],
mutations: {
@ -56,23 +56,23 @@ export default createStore({
state.currentPlay = song;
},
setModal(state, show) {
state.modal = {...state.modal, ...show}
state.modal = { ...state.modal, ...show };
},
setPlayer(state, params) {
state.player = {...state.player, ...params}
state.player = { ...state.player, ...params };
},
initPlayer(state) {
state.player.target = document.createElement('audio')
state.player.target = document.createElement('audio');
state.player.target.src = '';
state.player.target.preload = 'auto';
state.player.target.controls = true;
state.player.target.volume = 0.5;
console.log('initPlayer', state.player.target)
console.log('initPlayer', state.player.target);
},
changePlayer(state, params) {
const awaitPlay = () => {
if (state.player.target.readyState >= 4) {
if (state.currentPlay.isPlay){
if (state.currentPlay.isPlay) {
state.player.target.play();
}
state.currentPlay.isLoader = false;
@ -80,14 +80,13 @@ export default createStore({
} else {
awaitPlay();
}
}
};
state.player.target.src = params;
state.player.src = params;
console.log(state.player.target.src)
console.log(state.player.target.src);
// state.currentPlay.isLoader = true;
state.player.target.addEventListener('canplaythrough', awaitPlay)
state.player.target.addEventListener('canplaythrough', awaitPlay);
},
handlerPlayer(state, params) {
if (params.pause) {
@ -95,7 +94,7 @@ export default createStore({
state.player.target.pause();
}
if (params.play) {
if (state.player.target.readyState >= 3){
if (state.player.target.readyState >= 3) {
state.currentPlay.isPlay = true;
state.player.target.play();
}
@ -105,8 +104,8 @@ export default createStore({
}
},
setUserFavorite(state, params) {
state.userFavorite = {...state.userFavorite, ...params}
}
state.userFavorite = { ...state.userFavorite, ...params };
},
},
actions: {
setToken(context, tokens) {
@ -140,5 +139,5 @@ export default createStore({
setUserFavorite(context, params) {
context.commit('setUserFavorite', params);
},
}
},
});

3
client/src/store/module-example/actions.js
View File

@ -1,2 +1 @@
export function someAction (/* context */) {
}
export function someAction(/* context */) {}

3
client/src/store/module-example/getters.js
View File

@ -1,2 +1 @@
export function someGetter (/* state */) {
}
export function someGetter(/* state */) {}

12
client/src/store/module-example/index.js
View File

@ -1,12 +1,12 @@
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
import state from './state';
import * as getters from './getters';
import * as mutations from './mutations';
import * as actions from './actions';
export default {
namespaced: true,
getters,
mutations,
actions,
state
}
state,
};

3
client/src/store/module-example/mutations.js
View File

@ -1,2 +1 @@
export function someMutation (/* state */) {
}
export function someMutation(/* state */) {}

2
client/src/store/module-example/state.js
View File

@ -1,5 +1,5 @@
export default function () {
return {
//
}
};
}

9
client/src/utils/ajax.js
View File

@ -24,7 +24,10 @@ export default class {
delete params.extraData;
}
if (params.extraParams) {
params.params = this.__append_extra_params(params.params, params.extraParams);
params.params = this.__append_extra_params(
params.params,
params.extraParams,
);
delete params.extraParams;
}
/*
@ -64,7 +67,7 @@ export default class {
data[k] = extra[k];
}
} else {
throw new Error('Can\'t append extra data to this type of data');
throw new Error("Can't append extra data to this type of data");
}
return data;
}
@ -80,7 +83,7 @@ export default class {
data[k] = extra[k];
}
} else {
throw new Error('Can\'t append extra params to this type of params');
throw new Error("Can't append extra params to this type of params");
}
return data;
}

7
client/src/utils/cache.js
View File

@ -9,14 +9,13 @@ class Converter {
return this.__isJSON(value) ? JSON.parse(value) : value;
}
static __isComplex(value) {
return (value instanceof Array || typeof value === 'object');
return value instanceof Array || typeof value === 'object';
}
static __isJSON(value) {
return (typeof value === 'string' && /^(\{|\[)/.test(value));
return typeof value === 'string' && /^(\{|\[)/.test(value);
}
}
class TempStorage {
constructor() {
this.__data = {};
@ -38,7 +37,6 @@ class TempStorage {
}
}
class Cache {
constructor(storage) {
if (storage === 'tempStorage') {
@ -71,5 +69,4 @@ class Cache {
}
}
export default new Cache(settings.storage);

31
client/src/utils/helpers.js
View File

@ -1,25 +1,20 @@
const helpers = {
range: (start, end, step = 1, toFixed = null) => {
let arr = []
let arr = [];
while(start <= end) {
if (toFixed)
start = Number(start.toFixed(toFixed))
arr.push(start)
start += step
while (start <= end) {
if (toFixed) start = Number(start.toFixed(toFixed));
arr.push(start);
start += step;
}
return arr
return arr;
},
}
};
export default {
install (app) {
app.helpers = helpers
app.config.globalProperties.$helpers = helpers
}
}
export {
helpers
}
install(app) {
app.helpers = helpers;
app.config.globalProperties.$helpers = helpers;
},
};
export { helpers };

39
client/src/views/Page404.vue
View File

@ -1,30 +1,25 @@
<template>
<div class="app__main m--error-404">
<div
:class="['page404', this.user?.id? 'auth': null]"
>
<div :class="['page404', this.user?.id ? 'auth' : null]">
<div :class="['container']">
<div class="page404__block">
<div
class="page404__info"
>
<div class="page404__info-title">
404
</div>
<div class="page404__info">
<div class="page404__info-title">404</div>
<div class="page404__info-subtitle">
Мы не можем найти то, что вы ищете
</div>
<div class="page404__info-content">
Возможно, запрашиваемая вами страница была перенесена или удалена. Также возможно, что вы допустили небольшую опечатку при вводе адреса — такое случается даже с нами, поэтому еще раз внимательно проверьте.
Возможно, запрашиваемая вами страница была перенесена или удалена.
Также возможно, что вы допустили небольшую опечатку при вводе
адреса — такое случается даже с нами, поэтому еще раз внимательно
проверьте.
</div>
<div class="page404__info-bottom">
Переходите на главную страницу, там вы сможете найти много полезной информации!
Переходите на главную страницу, там вы сможете найти много
полезной информации!
</div>
<div class="page404__info-button">
<button
class="button button-blue"
@click="next()"
>
<button class="button button-blue" @click="next()">
На главную
</button>
</div>
@ -36,13 +31,11 @@
</template>
<script>
export default {
export default {
name: 'Page404',
components: {
},
components: {},
data() {
return {
}
return {};
},
computed: {
user() {
@ -50,12 +43,12 @@
},
},
mounted() {
console.log(this.user)
console.log(this.user);
},
methods: {
next() {
this.$router.push({ name: 'home' });
}
},
}
},
};
</script>

39
client/src/views/Page500.vue
View File

@ -1,30 +1,20 @@
<template>
<div class="app__main m--error-500">
<div
:class="['page500']"
>
<div :class="['page500']">
<div :class="['container']">
<div class="page500__block">
<div
class="page500__info"
>
<div class="page500__info-title">
Упс!
</div>
<div class="page500__info-subtitle">
Что то пошло не так!
</div>
<div class="page500__info">
<div class="page500__info-title">Упс!</div>
<div class="page500__info-subtitle">Что то пошло не так!</div>
<div class="page500__info-content">
Мы уже знаем об этом и делаем все возможное!
</div>
<div class="page500__info-bottom">
Переходите на главную страницу, там вы сможете найти много полезной информации!
Переходите на главную страницу, там вы сможете найти много
полезной информации!
</div>
<div class="page500__info-button">
<button
class="button button-blue"
@click="next()"
>
<button class="button button-blue" @click="next()">
На главную
</button>
</div>
@ -36,25 +26,22 @@
</template>
<script>
export default {
export default {
name: 'Page404',
components: {
},
components: {},
data() {
return {
}
return {};
},
computed: {
user() {
return this.$store.state.user;
},
},
mounted() {
},
mounted() {},
methods: {
next() {
this.$router.push({ name: 'home' });
}
},
}
},
};
</script>

70
client/src/views/about.vue
View File

@ -12,22 +12,27 @@
<div class="about__header-top">
<div class="about__header-left">
<h1 class="h2">О нас</h1>
<div class="text about__header-description">IT-радио — это не просто обычная радиостанция, мы ваши
партнеры в творчестве и современных технологиях.
<div class="text about__header-description">
IT-радио — это не просто обычная радиостанция, мы ваши партнеры в
творчестве и современных технологиях.
</div>
</div>
<div class="about__header-right">
</div>
<div class="about__header-right"></div>
</div>
<div class="text about__header-bottom">
Наша миссия — воплотить ваши мечты в реальность, шаг за шагом. Благодаря разнообразной команде ведущих, журналистов, разработчиков и новаторов, мы постоянно расширяем границы возможного в цифровом мире.
Наша миссия — воплотить ваши мечты в реальность, шаг за шагом.
Благодаря разнообразной команде ведущих, журналистов, разработчиков и
новаторов, мы постоянно расширяем границы возможного в цифровом мире.
</div>
</div>
<div class="about__description">
<h2 class="h2">Мы здесь, чтобы открыть глаза на мир IT</h2>
<div class="about__description-info">
<div class="text about__description-item m--left">
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.
IT-радио — это уникальный проект, который объединяет в себе самых
ярких представителей IT-индустрии, а также экспертов из различных
областей, чтобы поделиться своими знаниями и опытом с широкой
аудиторией.
</div>
<div class="text about__description-item">
Мы — команда, которая верит в силу теплой улыбки и дружеской беседы.
@ -35,31 +40,29 @@
</div>
</div>
<video class="about__video" playsinline="" autoplay="" loop="" muted="">
<source src="@/assets/videos/about.mp4" type="video/mp4">
<source src="@/assets/videos/about.mp4" type="video/mp4" />
</video>
<div class="about__description">
<div class="about__description-info">
<div class="text about__description-item m--left">
Основанное с целью переосмыслить радио через призму современного и инновационного подхода, мы стали больше, чем просто радиостанцией, мы сообщество родственных душ, которые разделяют страсть к артистизму, развитию и инновациям.
Основанное с целью переосмыслить радио через призму современного и
инновационного подхода, мы стали больше, чем просто радиостанцией,
мы сообщество родственных душ, которые разделяют страсть к
артистизму, развитию и инновациям.
</div>
<div class="text about__description-item">
Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое другое.
Каждое шоу на IT-радио включает в себя актуальные темы, новости,
обзоры, интервью с экспертами и многое другое.
</div>
</div>
</div>
</div>
<div class="about__gallery">
<div class="about__gallery-item m--gallery-item-one">
<div class="about__gallery-item m--gallery-item-one"></div>
<div class="about__gallery-item m--gallery-item-two"></div>
<div class="about__gallery-item m--gallery-item-three"></div>
</div>
<div class="about__gallery-item m--gallery-item-two">
</div>
<div class="about__gallery-item m--gallery-item-three">
</div>
</div>
<Team/>
<Team />
<div class="app__content">
<div class="about__history">
<div class="about__history-header">
@ -68,36 +71,43 @@
</div>
<div class="about__history-list">
<div class="about__history-item">
<div class="title m--white about__history-title">Событие кратко 1</div>
<div class="title m--white about__history-title">
Событие кратко 1
</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">Событие кратко 2</div>
<div class="title m--white about__history-title">
Событие кратко 2
</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">Событие кратко 3</div>
<div class="title m--white about__history-title">
Событие кратко 3
</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
<div class="about__history-item">
<div class="title m--white about__history-title">Событие кратко 4</div>
<div class="title m--white about__history-title">
Событие кратко 4
</div>
<div class="about__history-date">Ноябрь 2023</div>
</div>
</div>
</div>
<SupportBlock/>
<SupportBlock />
</div>
</div>
</template>
<script>
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import Team from "@/components/team.vue";
import SupportBlock from "@/components/support-block.vue";
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import Team from '@/components/team.vue';
import SupportBlock from '@/components/support-block.vue';
export default {
name: 'about',
components: {SupportBlock, Team, AppBreadcrumbs}
}
components: { SupportBlock, Team, AppBreadcrumbs },
};
</script>

63
client/src/views/contacts.vue
View File

@ -30,7 +30,28 @@
</div>
</div>
<div class="contacts__map">
<div class="contacts__map-frame" style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Челябинск</a><a href="https://yandex.ru/maps/geo/chelyabinsk/53159527/?ll=61.421984%2C55.159071&utm_medium=mapframe&utm_source=maps&z=14.04" style="color:#eee;font-size:12px;position:absolute;top:14px;">Челябинск — Яндекс Карты</a><iframe src="https://yandex.ru/map-widget/v1/?ll=61.421984%2C55.159071&mode=poi&poi%5Bpoint%5D=61.399655%2C55.160475&poi%5Buri%5D=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1MzE1OTUyNxIg0KDQvtGB0YHQuNGPLCDQp9C10LvRj9Cx0LjQvdGB0LoiCg04nHVCFb2jXEI%2C&z=14.04" width="100%" height="100%" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div> </div>
<div
class="contacts__map-frame"
style="position: relative; overflow: hidden"
>
<a
href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
style="color: #eee; font-size: 12px; position: absolute; top: 0px"
>Челябинск</a
><a
href="https://yandex.ru/maps/geo/chelyabinsk/53159527/?ll=61.421984%2C55.159071&utm_medium=mapframe&utm_source=maps&z=14.04"
style="color: #eee; font-size: 12px; position: absolute; top: 14px"
>Челябинск — Яндекс Карты</a
><iframe
src="https://yandex.ru/map-widget/v1/?ll=61.421984%2C55.159071&mode=poi&poi%5Bpoint%5D=61.399655%2C55.160475&poi%5Buri%5D=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1MzE1OTUyNxIg0KDQvtGB0YHQuNGPLCDQp9C10LvRj9Cx0LjQvdGB0LoiCg04nHVCFb2jXEI%2C&z=14.04"
width="100%"
height="100%"
frameborder="1"
allowfullscreen="true"
style="position: relative"
></iframe>
</div>
</div>
<FormKit
v-model="formData"
type="form"
@ -48,22 +69,22 @@
@click-outside="$emit('hideModal')"
>
<div class="title">Напишите нам</div>
<FormKitSchema :schema="schema"/>
<FormKitSchema :schema="schema" />
</FormKit>
</div>
<SupportBlock/>
<SupportBlock />
</div>
</template>
<script>
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import SupportBlock from "@/components/support-block.vue";
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import SupportBlock from '@/components/support-block.vue';
export default {
name: 'contacts',
components: {SupportBlock, AppBreadcrumbs},
data(){
return{
components: { SupportBlock, AppBreadcrumbs },
data() {
return {
formData: {},
schema: [
{
@ -72,7 +93,7 @@ export default {
label: 'ФИО',
placeholder: 'ФИО',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'text',
@ -80,7 +101,7 @@ export default {
label: 'Название организации',
placeholder: 'Название организации',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'maska',
@ -89,7 +110,7 @@ export default {
label: 'Контактный телефон',
placeholder: '+7 (###) ###-##-##',
validation: 'required',
outerClass: 'field--required'
outerClass: 'field--required',
},
{
$formkit: 'textarea',
@ -97,16 +118,14 @@ export default {
label: 'Сообщение',
placeholder: 'Сообщение',
validation: 'required',
outerClass: 'field--required'
}
],
showLoaderSending: false
}
outerClass: 'field--required',
},
methods:{
submitHandler(){
}
}
}
],
showLoaderSending: false,
};
},
methods: {
submitHandler() {},
},
};
</script>

73
client/src/views/home.vue
View File

@ -3,12 +3,16 @@
<div class="home__meaning" ref="targetWrapper">
<div class="app__content">
<p class="text home__subtitle">
Мы цифровое <span>онлайн радио.</span><br/>
Помогаем разобраться в том, что такое <span>IT.</span><br/>
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br/>
Мы цифровое <span>онлайн радио.</span><br />
Помогаем разобраться в том, что такое <span>IT.</span><br />
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span
><br />
</p>
<h1 class="home__title" ref="targetTitle">
IT-Радио — <span id="targetTitleSpan">радиостанция про сферу</span> технологий <br/> и развитие
IT-Радио —
<span id="targetTitleSpan">радиостанция про сферу</span> технологий
<br />
и развитие
<span id="targetTitleSpan">в IT</span>
<!-- IT Радио —-->
<!-- <span id="targetTitleSpan">радиостанция</span>-->
@ -17,18 +21,19 @@
<!-- и развитие <span id="targetTitleSpan">в IT</span><br/>-->
</h1>
</div>
<div class="home__banner" ref="target">
</div>
<div class="home__banner" ref="target"></div>
</div>
<template v-if="true">
<div class="app__content">
<div class="home__description">
<div class="home__info">
<div class="text home__info--item">
IT-RADIO. 2023
<span>
Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней становится все сложнее.<br/><br/> Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
Сегодня IT-сфера развивается настолько быстро, что следить за
всеми новинками и изменениями в ней становится все сложнее.<br /><br />
Но есть способ всегда быть в курсе последних новостей и событий
— это IT-радио.
</span>
</div>
<h2 class="h2 m--border">
@ -36,16 +41,20 @@
</h2>
<div class="text home__info--item m--circle">
<span>
IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.<br/><br/>
Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое другое.
IT-радио — это уникальный проект, который объединяет в себе
самых ярких представителей IT-индустрии, а также экспертов из
различных областей, чтобы поделиться своими знаниями и опытом с
широкой аудиторией.<br /><br />
Каждое шоу на IT-радио включает в себя актуальные темы, новости,
обзоры, интервью с экспертами и многое другое.
</span>
</div>
</div>
<div class="home__content">
<div class="home__content--item m--one-circle">
<span class="title">Музыка</span>
Нам важно создать комфортную атмосферу, которая поможет сосредоточиться на задачах и улучшит
продуктивность.
Нам важно создать комфортную атмосферу, которая поможет
сосредоточиться на задачах и улучшит продуктивность.
</div>
<div class="home__content--item m--two-circle">
<span class="title">Подкасты</span>
@ -58,18 +67,18 @@
</div>
</div>
</div>
<Team/>
<Team />
<div class="app__content">
<RubricBlock/>
<RubricBlock />
</div>
<div class="home__social">
<div class="home__social--tools">
<div class="home__social--description">
<h2 class="h2 m--white">Соц сети</h2>
<div class="text">
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей
и
событий в мире IT, а также следить за анонсами и обновлениями!
Следите за обновлениями и новыми постами на IT Radio, чтобы быть в
курсе последних новостей и событий в мире IT, а также следить за
анонсами и обновлениями!
</div>
</div>
<div class="home__social--btns">
@ -81,24 +90,23 @@
</div>
</div>
<div class="app__content">
<blog/>
<blog />
</div>
</template>
</div>
</template>
<script>
import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";
import Team from "@/components/team.vue";
import RubricBlock from "components/rubric-block.vue";
import Blog from "components/blog.vue";
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Team from '@/components/team.vue';
import RubricBlock from 'components/rubric-block.vue';
import Blog from 'components/blog.vue';
export default {
name: 'home',
components: {Blog, RubricBlock, Team},
created() {
},
components: { Blog, RubricBlock, Team },
created() {},
mounted() {
this.initScene();
},
@ -114,20 +122,19 @@ export default {
end: 600,
pin: true,
},
},
);
});
gsap.to(this.$refs.targetTitle, {
color: 'transparent',
backgroundImage: 'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
backgroundImage:
'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
scrollTrigger: {
trigger: this.$refs.targetWrapper,
scrub: true,
start: 0,
end: 600,
},
});
},
);
}
}
}
},
};
</script>

130
client/src/views/playlist-edit.vue
View File

@ -4,12 +4,20 @@
:breadcrumbs="[
{ name: 'Главная', route: { name: 'home' } },
{ name: 'Личный кабинет', route: { name: 'profile' } },
$route.name==='playlist-create'?
{ name: 'Добавление плейлиста', route: { name: 'playlist-create' } }:
{ name: 'Редактирование плейлиста', route: { name: 'playlist-edit' } },
]"/>
<h1 class="h2 playlist__title m--margin">{{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}</h1>
<button class="playlist-edit__upload" @click="handlerUploadCover">Добавить обложку</button>
$route.name === 'playlist-create'
? { name: 'Добавление плейлиста', route: { name: 'playlist-create' } }
: {
name: 'Редактирование плейлиста',
route: { name: 'playlist-edit' },
},
]"
/>
<h1 class="h2 playlist__title m--margin">
{{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}
</h1>
<button class="playlist-edit__upload" @click="handlerUploadCover">
Добавить обложку
</button>
<div class="field__input m--hidden">
<input
id="cover"
@ -18,7 +26,7 @@
class="input"
type="file"
name="logo"
>
/>
</div>
<FormKit
v-model="playlist.name"
@ -32,12 +40,12 @@
<div class="playlist-edit__title">Поиск по каталогу</div>
<template v-if="showLoaderSongs">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
<SongList
v-else-if="songsFiltered.length>0"
v-else-if="songsFiltered.length > 0"
:songList="songsFiltered"
class="m--column"
@addPlaylist="addPlaylist"
@ -48,12 +56,12 @@
<div class="playlist-edit__title">Добавленные треки</div>
<template v-if="showLoaderPlaylist">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
<SongList
v-else-if="playlist.song?.length>0"
v-else-if="playlist.song?.length > 0"
:songList="playlist.song"
class="m--column"
:songAlreadyAdd="true"
@ -63,24 +71,23 @@
</div>
</div>
</div>
</template>
<script>
import {app} from "@/services";
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import SongList from "@/components/song-list.vue";
import { app } from '@/services';
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import SongList from '@/components/song-list.vue';
export default {
name: 'playlist-edit',
components: {SongList, AppBreadcrumbs},
components: { SongList, AppBreadcrumbs },
data() {
return {
playlist: {},
songs: [],
showLoaderSongs: false,
showLoaderPlaylist: false,
}
};
},
created() {
this.getAllSong();
@ -88,92 +95,109 @@ export default {
},
computed: {
songsFiltered() {
return this.songs.filter(song => {
const alreadyAdd = this.playlist.song.find(item => item.azura_id === song.azura_id)
return !alreadyAdd
})
}
return this.songs.filter((song) => {
const alreadyAdd = this.playlist.song.find(
(item) => item.azura_id === song.azura_id,
);
return !alreadyAdd;
});
},
},
methods: {
getPlaylist() {
this.showLoaderPlaylist = true;
app.getPlaylist(this.$route.params.id).then(res => {
app
.getPlaylist(this.$route.params.id)
.then((res) => {
this.showLoaderPlaylist = false;
this.playlist = res;
}).catch(err => {
this.showLoaderPlaylist = false;
console.error(err)
})
.catch((err) => {
this.showLoaderPlaylist = false;
console.error(err);
});
},
getAllSong() {
this.showLoaderSongs = true;
app.getAllSong().then(res => {
app
.getAllSong()
.then((res) => {
this.showLoaderSongs = false;
this.songs = res;
}).catch(err => {
this.showLoaderSongs = false;
console.error(err)
})
.catch((err) => {
this.showLoaderSongs = false;
console.error(err);
});
},
addPlaylist(song) {
console.log(song)
console.log(song);
const params = {
playlist_id: this.$route.params.id,
...song
}
...song,
};
this.showLoaderSongs = true;
this.showLoaderPlaylist = true;
app.addSongToPlaylist(params).then(() => {
app
.addSongToPlaylist(params)
.then(() => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
this.getPlaylist();
}).catch(err => {
})
.catch((err) => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
console.error(err)
})
console.error(err);
});
},
removePlaylist(song) {
const params = {
playlist_id: this.$route.params.id,
azura_id: song.azura_id
}
azura_id: song.azura_id,
};
this.showLoaderSongs = true;
this.showLoaderPlaylist = true;
app.removeSongToPlaylist(params).then(() => {
app
.removeSongToPlaylist(params)
.then(() => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
this.getPlaylist();
}).catch(err => {
})
.catch((err) => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
console.error(err)
})
console.error(err);
});
},
handlerUploadCover(){
handlerUploadCover() {
let logoInput = this.$refs.coverInput;
let click = new MouseEvent('click');
logoInput.onchange = this.uploadCover;
logoInput.dispatchEvent(click);
},
uploadCover(event){
let file = event.target.files ? event.target.files[0] : null
uploadCover(event) {
let file = event.target.files ? event.target.files[0] : null;
if (file) {
const data = new FormData();
data.append('playlist_art', file);
data.append('playlist_id', this.$route.params.id);
app.updatePlaylist(data).then((res) => {
app
.updatePlaylist(data)
.then((res) => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
this.playlist = res;
}).catch(err => {
})
.catch((err) => {
this.showLoaderPlaylist = false;
this.showLoaderSongs = false;
console.error(err)
})
console.error(err);
});
}
}
}
}
},
},
};
</script>

38
client/src/views/playlist.vue
View File

@ -2,7 +2,7 @@
<div class="playlist">
<template v-if="showLoaderPlaylist">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
@ -10,25 +10,30 @@
<div class="playlist__header">
<div class="playlist__back" @click="handlerBack"></div>
<div class="h2 playlist__title">{{ playlist.name }}</div>
<div class="playlist__edit" @click="next({name: 'playlist-edit', params:{id:this.playlist.id}})"></div>
<div
class="playlist__edit"
@click="
next({ name: 'playlist-edit', params: { id: this.playlist.id } })
"
></div>
</div>
<SongList :songList="playlist.song" :songAlreadyAdd="true"/>
<SongList :songList="playlist.song" :songAlreadyAdd="true" />
</template>
</div>
</template>
<script>
import {app} from "@/services";
import SongList from "@/components/song-list.vue";
import { app } from '@/services';
import SongList from '@/components/song-list.vue';
export default {
name: 'playlist',
components: {SongList},
components: { SongList },
data() {
return {
showLoaderPlaylist: false,
playlist: {}
}
playlist: {},
};
},
created() {
this.getPlaylist();
@ -36,20 +41,23 @@ export default {
methods: {
getPlaylist() {
this.showLoaderPlaylist = true;
app.getPlaylist(this.$route.params.id).then(res => {
app
.getPlaylist(this.$route.params.id)
.then((res) => {
this.showLoaderPlaylist = false;
this.playlist = res;
}).catch(err => {
this.showLoaderPlaylist = false;
console.error(err)
})
.catch((err) => {
this.showLoaderPlaylist = false;
console.error(err);
});
},
handlerBack() {
this.$router.go(-1);
},
next(params) {
this.$router.push(params);
}
}
}
},
},
};
</script>

36
client/src/views/playlists.vue
View File

@ -52,44 +52,44 @@
</template>
<script>
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import Pagination from "@/components/pagination.vue";
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import Pagination from '@/components/pagination.vue';
// import { audio } from "@/services";
export default {
name: 'playlists',
components: {Pagination, AppBreadcrumbs},
data(){
return{
components: { Pagination, AppBreadcrumbs },
data() {
return {
currentTabsItem: 'today',
currentPage: 1,
tabsItems:[
tabsItems: [
{
label: 'Вчера',
name: 'yesterday'
name: 'yesterday',
},
{
label: 'Сегодня',
name: 'today'
name: 'today',
},
{
label: 'Завтра',
name: 'tomorrow'
name: 'tomorrow',
},
],
station: this.$store.state.station
}
station: this.$store.state.station,
};
},
watch:{
watch: {
'$route.query.page': {
handler(from) {
this.currentPage = Number(from);
},
}
},
},
created() {
// this.getPlayList();
},
methods:{
methods: {
// getPlayList(){
// audio.getPlayList(this.station.id).then(res => {
// let groups = res
@ -101,9 +101,9 @@ export default {
// console.error(err)
// })
// },
changeTab(tab){
changeTab(tab) {
this.currentTabsItem = tab;
}
}
}
},
},
};
</script>

8
client/src/views/podcasts.vue
View File

@ -1,11 +1,9 @@
<template>
<div>
</div>
<div></div>
</template>
<script>
export default {
name: 'podcasts'
}
name: 'podcasts',
};
</script>

131
client/src/views/profile.vue
View File

@ -1,6 +1,10 @@
<template>
<div class="app__content profile">
<template v-if="$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'">
<template
v-if="
$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'
"
>
<AppBreadcrumbs
:breadcrumbs="[
{ name: 'Главная', route: { name: 'home' } },
@ -8,7 +12,9 @@
]"
/>
<h1 class="h2 profile__title">{{ user.email }}</h1>
<button class="button m--text-link" @click="showRecovery">Редактировать профиль</button>
<button class="button m--text-link" @click="showRecovery">
Редактировать профиль
</button>
<div class="profile__tabs tabs m--btns">
<button
v-for="item in tabsItems"
@ -22,19 +28,23 @@
</div>
</template>
<template v-if="$route.name === 'profile'">
<template v-if="currentTabsItem==='music'">
<template v-if="currentTabsItem === 'music'">
<template v-if="showLoaderSong">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
<SongList v-else :songList="userFavorite.songs" @removeSong="removeFavorites"/>
<SongList
v-else
:songList="userFavorite.songs"
@removeSong="removeFavorites"
/>
</template>
<template v-if="currentTabsItem==='playlists'">
<template v-if="currentTabsItem === 'playlists'">
<template v-if="showLoaderPlaylist">
<div class="loader">
<div class="spinner"/>
<div class="spinner" />
Загрузка данных
</div>
</template>
@ -45,69 +55,71 @@
/>
</template>
</template>
<routerView v-else/>
<routerView v-else />
</div>
</template>
<script>
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import SongList from "@/components/song-list.vue";
import {app} from "@/services";
import PlaylistRoster from "@/components/playlist-roster.vue";
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
import SongList from '@/components/song-list.vue';
import { app } from '@/services';
import PlaylistRoster from '@/components/playlist-roster.vue';
export default {
name: 'profile',
components: {PlaylistRoster, SongList, AppBreadcrumbs},
components: { PlaylistRoster, SongList, AppBreadcrumbs },
data() {
return {
currentTabsItem: 'music',
tabsItems: [
{
label: 'Музыка',
name: 'music'
name: 'music',
},
{
label: 'Подкасты',
name: 'podcasts'
name: 'podcasts',
},
{
label: 'Плейлисты',
name: 'playlists'
name: 'playlists',
},
],
showLoaderSong: false,
showLoaderPlaylist: false,
showLoaderPodcast: true,
}
};
},
computed: {
user() {
return this.$store.state.user;
},
userFavorite() {
return this.$store.state.userFavorite
}
return this.$store.state.userFavorite;
},
},
watch: {
'$route': {
$route: {
immediate: true,
handler(to, from) {
if (!from && to?.hash && to?.name==='"profile"'){
console.log('1')
if (!from && to?.hash && to?.name === '"profile"') {
console.log('1');
this.currentTabsItem = to?.hash.replace('#', '') || 'music';
}
if (to?.hash !== from?.hash && to?.name === from?.name || !from?.name && !from?.hash){
console.log('2')
if (
(to?.hash !== from?.hash && to?.name === from?.name) ||
(!from?.name && !from?.hash)
) {
console.log('2');
if (to.hash) {
this.currentTabsItem = to?.hash.replace('#', '') || 'music';
} else {
this.currentTabsItem = 'music';
}
}
else {
console.log('3')
} else {
console.log('3');
if (to?.name === 'playlist') {
this.currentTabsItem = 'playlists'
this.currentTabsItem = 'playlists';
}
}
},
@ -120,52 +132,67 @@ export default {
methods: {
getSongList() {
this.showLoaderSong = true;
app.getFavoriteList().then(res => {
app
.getFavoriteList()
.then((res) => {
this.showLoaderSong = false;
this.$store.dispatch('setUserFavorite', {songs: res});
}).catch(err => {
this.showLoaderSong = false;
console.error(err)
this.$store.dispatch('setUserFavorite', { songs: res });
})
.catch((err) => {
this.showLoaderSong = false;
console.error(err);
});
},
changeTab(tab) {
this.currentTabsItem = tab;
if (this.$route.name === 'profile') {
this.$router.push({name: this.$route.name, hash: `#${tab}`});
this.$router.push({ name: this.$route.name, hash: `#${tab}` });
} else {
this.$router.push({name: 'profile', hash: `#${tab}`});
this.$router.push({ name: 'profile', hash: `#${tab}` });
}
},
removeFavorites(song) {
this.showLoaderSong = true;
app.removeFavorites(song).then(() => {
app
.removeFavorites(song)
.then(() => {
this.showLoaderSong = false;
this.getSongList();
}).catch(err => {
this.showLoaderSong = false;
console.error(err)
})
.catch((err) => {
this.showLoaderSong = false;
console.error(err);
});
},
showRecovery() {
this.$store.dispatch('setModal', {changingUser: true});
this.$store.dispatch('setModal', { changingUser: true });
},
getPlaylists() {
this.showLoaderPlaylist = true;
app.getPlaylists().then(res => {
app
.getPlaylists()
.then((res) => {
this.showLoaderPlaylist = false;
this.$store.dispatch('setUserFavorite', {playlist: res});
}).catch(err => {
this.showLoaderPlaylist = false;
console.error(err)
this.$store.dispatch('setUserFavorite', { playlist: res });
})
.catch((err) => {
this.showLoaderPlaylist = false;
console.error(err);
});
},
createPlayList() {
app.createPlaylists().then(res=>{
this.$router.push({name: 'playlist-create', params: {id: res.id}});
}).catch(err=>{
console.error(err)
app
.createPlaylists()
.then((res) => {
this.$router.push({
name: 'playlist-create',
params: { id: res.id },
});
})
}
}
}
.catch((err) => {
console.error(err);
});
},
},
};
</script>

10
client/src/views/rubric.vue
View File

@ -6,16 +6,16 @@
{ name: 'Рубрики', route: { name: 'rubric' } },
]"
/>
<RubricBlock/>
<RubricBlock />
</div>
</template>
<script>
import RubricBlock from "@/components/rubric-block.vue";
import AppBreadcrumbs from "@/components/app-breadcrumbs.vue";
import RubricBlock from '@/components/rubric-block.vue';
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
export default {
name: 'rubric',
components: {AppBreadcrumbs, RubricBlock}
}
components: { AppBreadcrumbs, RubricBlock },
};
</script>

8
client/src/views/support.vue
View File

@ -1,11 +1,9 @@
<template>
<div>
</div>
<div></div>
</template>
<script>
export default {
name: 'support'
}
name: 'support',
};
</script>