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

stylelint

This commit is contained in:
Norbaev 2024-07-19 17:19:52 +05:00
parent 329a75f57c
commit 674003ccd9
36 changed files with 1472 additions and 648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/.prettierrc.cjs
View File

@ -1,3 +1,11 @@
module.exports = {
printWidth: 120,
tabWidth: 2,
tabs: false,
semi: true,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'always',
endOfLine: 'auto',
};

6
client/.stylelintrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
"rules": {
"selector-class-pattern": null
}
}

1240
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
client/package.json
View File

@ -8,6 +8,8 @@
"scripts": {
"lint": "eslint --ext .js,.vue ./",
"lint:fix": "eslint --ext .js,.vue --fix ./",
"lint:css": "stylelint '**/*.scss'",
"lint:css:fix": "npm run lint:css -- --fix",
"test": "echo \"No test specified\" && exit 0",
"serve": "npx cross-env NODE_ENV=development quasar dev",
"serve:ssr": "quasar dev -m ssr",
@ -64,6 +66,10 @@
"postcss-simple-vars": "^7.0.1",
"prettier": "^3.3.2",
"sass-loader": "^13.3.2",
"stylelint": "^16.7.0",
"stylelint-config-clean-order": "^6.1.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"vue-loader": "^17.3.0"
},
"browserslist": [

20
client/quasar.config.js
View File

@ -80,9 +80,7 @@ module.exports = configure(function (ctx) {
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
// chain.plugin('normal-module-replacement').use(
// new webpack.NormalModuleReplacementPlugin(/settings$/, function(resource) {
// resource.request = resource.request.replace(/settings$/, `settings/${process.env.NODE_ENV}`);
@ -193,9 +191,7 @@ module.exports = configure(function (ctx) {
// Tell browser when a file from the server should expire from cache (in ms)
chainWebpackWebserver(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
middlewares: [
@ -213,9 +209,7 @@ module.exports = configure(function (ctx) {
// if using workbox in InjectManifest mode
chainWebpackCustomSW(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
manifest: {
@ -290,15 +284,11 @@ module.exports = configure(function (ctx) {
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackMain(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
chainWebpackPreload(chain) {
chain
.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }]);
chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
},
},
};

10
client/src/App.vue
View File

@ -23,15 +23,7 @@ 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,

79
client/src/assets/css/common.scss
View File

@ -1,80 +1,81 @@
*,
*::before,
*::after {
box-sizing: border-box;
outline: none !important;
box-sizing: border-box;
outline: none !important;
}
h1{
margin: 0;
position: relative;
z-index: 2;
h1 {
margin: 0;
position: relative;
z-index: 2;
}
.text{
@mixin p;
.text {
@mixin p;
}
.h1 {
@mixin h1;
@mixin h1;
}
.h2, h2 {
@mixin h2;
.h2,
h2 {
@mixin h2;
}
.h3 {
@mixin h3;
@mixin h3;
}
.h4 {
@mixin h4;
@mixin h4;
}
.p {
@mixin p;
@mixin p;
}
.title {
@mixin p;
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
font-size: 34px;
&.m--white{
color: var(--color-white);
}
@mixin p;
color: transparent;
background-clip: text;
background-image: var(--linear-gradient);
font-size: 34px;
&.m--white {
color: var(--color-white);
}
}
.ul {
@mixin ul;
@mixin ul;
}
.ol {
@mixin ol;
@mixin ol;
}
.hr {
@mixin hr;
@mixin hr;
}
.a,
a {
@mixin a;
/*@mixin a--color $color-base;*/
@mixin a;
/*@mixin a--color $color-base;*/
}
html{
scrollbar-color: var(--color-black) var(--bg-opacity);
scrollbar-gutter: stable;
scrollbar-width: thin;
html {
scrollbar-color: var(--color-black) var(--bg-opacity);
scrollbar-gutter: stable;
scrollbar-width: thin;
}
body{
font-size: var(--base-fz);
line-height: var(--base-lh);
background: var(--color-black);
font-family: var(--font-family-base);
color: var(--color-white);
padding: 0 !important;
body {
font-size: var(--base-fz);
line-height: var(--base-lh);
background: var(--color-black);
font-family: var(--font-family-base);
color: var(--color-white);
padding: 0 !important;
}
.button {
@mixin button;
@mixin button;
}

213
client/src/assets/css/module/about.scss
View File

@ -1,117 +1,120 @@
.about {
&__header {
margin-bottom: var(--space-between-sections);
&__header {
margin-bottom: var(--space-between-sections);
&-top {
display: flex;
gap: 20px;
margin-bottom: var(--space-between-block);
}
&-left {
width: calc(42% - 10px);
}
&-right {
flex: 1 1 auto;
background: url("./assets/img/bg/about-banner.svg") no-repeat 50% 60%;
position: relative;
z-index: 2;
}
&-description {
font-size: 1.5rem;
}
&-bottom {
width: calc(58% - 10px);
margin-left: auto;
text-align: end;
}
&-top {
display: flex;
gap: 20px;
margin-bottom: var(--space-between-block);
}
&__description {
margin-bottom: var(--space-between-block);
&-info {
display: flex;
gap: var(--space-between-block);
}
&-item {
flex: 1 1 auto;
&.m--left {
width: calc(70% - 40px);
}
}
&-left {
width: calc(42% - 10px);
}
&__video {
position: relative;
z-index: 2;
width: 100%;
margin-bottom: var(--space-between-sections);
&-right {
position: relative;
z-index: 2;
flex: 1 1 auto;
background: url('./assets/img/bg/about-banner.svg') no-repeat 50% 60%;
}
&__gallery {
display: flex;
gap: 20px;
margin-bottom: var(--space-between-sections);
&-item {
width: calc(100% / 3 - 20px / 3);
min-height: 725px;
position: relative;
z-index: 2;
background-size: cover;
background-repeat: no-repeat;
&.m--gallery-item-one {
background-image: url("./assets/img/bg/gallery-item-one.svg");
}
&.m--gallery-item-two {
background-image: url("./assets/img/bg/gallery-item-two.svg");
}
&.m--gallery-item-three {
background-image: url("./assets/img/bg/gallery-item-three.svg");
}
}
&-description {
font-size: 1.5rem;
}
&__history {
margin-bottom: var(--space-between-sections);
&-header {
display: flex;
align-items: flex-end;
margin-bottom: var(--space-between-block);
}
&-title {
flex: 1 1 auto;
margin: 0;
}
&-date {
width: 220px;
}
&-list {
}
&-item {
display: flex;
align-items: center;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
border-bottom: 1px solid var(--color-white-opacity);
}
&-bottom {
width: calc(58% - 10px);
margin-left: auto;
text-align: end;
}
}
&__description {
margin-bottom: var(--space-between-block);
&-info {
display: flex;
gap: var(--space-between-block);
}
&-item {
flex: 1 1 auto;
&.m--left {
width: calc(70% - 40px);
}
}
}
&__video {
position: relative;
z-index: 2;
width: 100%;
margin-bottom: var(--space-between-sections);
}
&__gallery {
display: flex;
gap: 20px;
margin-bottom: var(--space-between-sections);
&-item {
position: relative;
z-index: 2;
width: calc(100% / 3 - 20px / 3);
min-height: 725px;
background-repeat: no-repeat;
background-size: cover;
&.m--gallery-item-one {
background-image: url('./assets/img/bg/gallery-item-one.svg');
}
&.m--gallery-item-two {
background-image: url('./assets/img/bg/gallery-item-two.svg');
}
&.m--gallery-item-three {
background-image: url('./assets/img/bg/gallery-item-three.svg');
}
}
}
&__history {
margin-bottom: var(--space-between-sections);
&-header {
display: flex;
align-items: flex-end;
margin-bottom: var(--space-between-block);
}
&-title {
flex: 1 1 auto;
margin: 0;
}
&-date {
width: 220px;
}
&-list {
}
&-item {
position: relative;
z-index: 2;
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-white-opacity);
}
}
}

10
client/src/assets/css/module/app-breadcrumbs.scss
View File

@ -1,18 +1,18 @@
.breadcrumbs{
.breadcrumbs {
display: flex;
margin-top: 80px;
margin-bottom: var(--space-between-block);
&__item{
&__item {
display: flex;
align-items: center;
&:last-child:after{
&:last-child:after {
display: none;
}
&:after{
&:after {
margin: 0 10px;
content: '/';
}
&-link{
&-link {
font-size: 0.875rem;
}
}

14
client/src/assets/css/setting.scss
View File

@ -20,18 +20,8 @@ $color-white-opacity: #bbb9ca;
--base-fz: 18px;
--base-lh: 1.3;
--font-family-base: 'Manrope', 'Tahoma', sans-serif;
--linear-gradient-highlight: linear-gradient(
259.3deg,
#5e5bfc 0.44%,
#871df0 97.88%
);
--linear-gradient: linear-gradient(
91.17deg,
#c6f1f7 -4.01%,
#f983e9 36.14%,
#b877ff 77.44%,
#c2e9cd 106.11%
);
--linear-gradient-highlight: linear-gradient(259.3deg, #5e5bfc 0.44%, #871df0 97.88%);
--linear-gradient: linear-gradient(91.17deg, #c6f1f7 -4.01%, #f983e9 36.14%, #b877ff 77.44%, #c2e9cd 106.11%);
--container: $document-width-xl;
--space-between-block: calc(var(--base-fz) * 2.25);
--space-between-sections: calc(var(--base-fz) * 7);

8
client/src/components/app-breadcrumbs.vue
View File

@ -1,12 +1,6 @@
<template>
<div class="app__breadcrumbs breadcrumbs">
<router-link
v-for="(item, key) in breadcrumbs"
:key="key"
v-slot="{ href, navigate }"
:to="item.route"
custom
>
<router-link v-for="(item, key) in breadcrumbs" :key="key" v-slot="{ href, navigate }" :to="item.route" custom>
<div v-if="item.name" class="breadcrumbs__item">
<a :href="href" class="breadcrumbs__item-link" @click="navigate">
{{ item.name }}

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

@ -4,33 +4,20 @@
<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">
<ul class="footer__menu">
<li
v-for="(item, key) in menu"
:key="key"
:class="['footer__menu-item', item.class]"
>
<router-link
:to="{ name: item.name, params: item.params }"
class="footer__menu-link"
>
<li v-for="(item, key) in menu" :key="key" :class="['footer__menu-item', item.class]">
<router-link :to="{ name: item.name, params: item.params }" class="footer__menu-link">
{{ item.title }}
</router-link>
</li>
</ul>
<div class="footer__connection">
<ul class="footer__social">
<li
v-for="(item, key) in socialMenu"
:key="key"
:class="['footer__menu-item', item.class]"
>
<li v-for="(item, key) in socialMenu" :key="key" :class="['footer__menu-item', item.class]">
<router-link :to="item.link" class="footer__menu-link">
{{ item.title }}
</router-link>
@ -38,14 +25,10 @@
</ul>
<ul class="footer__connection">
<li class="footer__menu-item">
<router-link to="#" class="m--underline">
it@radio.org
</router-link>
<router-link to="#" class="m--underline"> it@radio.org </router-link>
</li>
<li class="footer__menu-item">
<router-link to="#" class="m--underline">
+7 (900) 000-01-12
</router-link>
<router-link to="#" class="m--underline"> +7 (900) 000-01-12 </router-link>
</li>
</ul>
</div>

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

@ -11,16 +11,8 @@
<li class="header__logo m--menu" @click="next('home')">
<img src="@/assets/img/icon/logo.svg" alt="logo" />
</li>
<li
v-for="(item, key) in menu"
:key="key"
:class="['header__menu-item', item.class]"
>
<router-link
v-if="!item.action"
:to="{ name: item.name, params: item.params }"
class="header__menu-link"
>
<li v-for="(item, key) in menu" :key="key" :class="['header__menu-item', item.class]">
<router-link v-if="!item.action" :to="{ name: item.name, params: item.params }" class="header__menu-link">
{{ item.title }}
</router-link>
<button
@ -31,12 +23,7 @@
>
{{ item.title }}
</button>
<button
v-else
class="header__menu-icon"
:class="[item.icon]"
@click="handlerClick(item.action)"
></button>
<button v-else class="header__menu-icon" :class="[item.icon]" @click="handlerClick(item.action)"></button>
</li>
</ul>
<div class="header__burger" @click="handlerShowMenu">

6
client/src/components/blog.vue
View File

@ -36,15 +36,13 @@ export default {
},
{
id: 2,
title:
'Искусственный интеллект меняет мир технологий: возможности и вызовы',
title: 'Искусственный интеллект меняет мир технологий: возможности и вызовы',
time: '2',
data: '21 октября',
},
{
id: 3,
title:
'Как кибербезопасность становится ключевым фактором успеха в IT',
title: 'Как кибербезопасность становится ключевым фактором успеха в IT',
time: '2',
data: '21 октября',
},

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

@ -161,10 +161,7 @@ export default {
node.setErrors([err.detail], err.error);
});
} else {
if (
this.formRegistration.password ===
this.formRegistration.repeatPassword
) {
if (this.formRegistration.password === this.formRegistration.repeatPassword) {
app
.createUser(this.formRegistration)
.then((res) => {

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

@ -19,10 +19,7 @@
<div class="title m--white rubric-modal__title">
{{ rubrik.name }}
</div>
<button
class="button modal__close rubric-modal__close"
@click="$emit('hideModal')"
></button>
<button class="button modal__close rubric-modal__close" @click="$emit('hideModal')"></button>
</div>
<div class="rubric-modal__cover">
<img :src="`${selfUrl}${rubrik.img}`" alt="" />
@ -30,9 +27,7 @@
<div class="rubric-modal__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>

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

@ -97,28 +97,16 @@ export default {
if (count <= 4) {
items.push({ text: item, value: item });
} else {
if (
item === 1 &&
this.currentPage !== item &&
this.currentPage - 1 !== 1 &&
this.currentPage - 2 !== 1
) {
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
) {
} 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
) {
if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) {
console.log(item);
items.push({ text: item, value: item });
}

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

@ -4,31 +4,15 @@
<q-skeleton v-if="loaderPlay" height="100%" />
<template v-else>
<img v-if="currentPlay.art" :src="currentPlay.art" alt="player" />
<img
v-else
:src="require('@/assets/img/mock/template-artist.png')"
alt="player"
/>
<img v-else :src="require('@/assets/img/mock/template-artist.png')" alt="player" />
</template>
</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" />
@ -44,12 +28,7 @@
</div>
<div @click="handleAuthRequired">
<q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton" />
<div
v-else
class="player__favorites"
:class="[isFavorites && 'm--active']"
@click="handlerFavorites"
></div>
<div v-else class="player__favorites" :class="[isFavorites && 'm--active']" @click="handlerFavorites"></div>
</div>
<div class="player__tools">
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
@ -67,26 +46,14 @@
<span
ref="volumeIcon"
@click="toggleVolume"
:class="
songVolume == 0 ? 'player__volume-off' : 'player__volume-on'
"
/>
<input
type="range"
min="0"
max="1"
step="0.01"
v-model="songVolume"
@input="changeVolume"
:class="songVolume == 0 ? 'player__volume-off' : 'player__volume-on'"
/>
<input type="range" min="0" max="1" step="0.01" v-model="songVolume" @input="changeVolume" />
</div>
</div>
</div>
<div class="player__bottom">
<div
class="player__time"
:class="!loaderPlay && !isUserMusic && 'm--ether'"
>
<div class="player__time" :class="!loaderPlay && !isUserMusic && 'm--ether'">
<q-skeleton v-if="loaderPlay" />
<template v-else-if="isUserMusic">
{{ getTime(playerInfo.currentTime) }} /
@ -96,12 +63,7 @@
</div>
<div class="player__progress">
<q-skeleton v-if="loaderPlay" height="5px" />
<input
v-else
:disabled="!isUserMusic"
type="range"
v-model="playerInfo.progress"
/>
<input v-else :disabled="!isUserMusic" type="range" v-model="playerInfo.progress" />
</div>
</div>
</div>
@ -196,9 +158,7 @@ export default {
...this.userSongList[this.currentPlay.currentIndex || 0],
live: false,
});
this.getAudio(
this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id,
);
this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id);
if (this.player.target) {
this.player.target.addEventListener('timeupdate', this.updateProgress);
}
@ -284,16 +244,12 @@ export default {
updateProgress(e) {
this.playerInfo = {
...this.playerInfo,
progress:
(this.player.target.currentTime / this.player.target.duration) * 100,
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', {
@ -333,9 +289,7 @@ export default {
if (this.user?.id) {
const params = {
...this.currentPlay,
azura_id: Number(this.currentPlay.id)
? this.currentPlay.azura_id
: this.currentPlay.id,
azura_id: Number(this.currentPlay.id) ? this.currentPlay.azura_id : this.currentPlay.id,
};
if (!this.isFavorites) {
delete params.id;
@ -395,8 +349,7 @@ export default {
this.player.target.addEventListener('timeupdate', this.updateProgress);
blob.arrayBuffer().then((buffer) => {
var audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContext.decodeAudioData(buffer, (decodedData) => {
this.playerInfo.duration = decodedData.duration;
});

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

@ -2,18 +2,13 @@
<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 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">
@ -23,27 +18,14 @@
</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="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>
<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>

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

@ -1,67 +1,32 @@
<template>
<div
class="song-item"
:class="[selectSong && 'm--select']"
@click="handlerSelectSong"
>
<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"
>
<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"
/>
<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 }}
</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--favorites" @click.stop="removeSong"></button>
<button
class="button song-item__btn m--small m--add"
:class="songAlreadyAddPlaylist && 'm--already'"
@click.stop="
songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()
"
@click.stop="songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()"
></button>
</div>
</div>

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

@ -4,9 +4,7 @@
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"
@ -46,9 +44,7 @@ export default {
methods: {
handlerSelectSong(params) {
const data = { ...this.currentPlay, ...params, isLoader: true };
data.currentIndex = this.songList.findIndex(
(el) => el.azura_id === params.azura_id,
);
data.currentIndex = this.songList.findIndex((el) => el.azura_id === params.azura_id);
this.$store.dispatch('setCurrentPlay', data);
console.log('handlerSelectSong');
},

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

@ -4,19 +4,17 @@
<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>

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

@ -3,9 +3,8 @@
<div class="team__header">
<h2 class="h2 team__title">Наша команда</h2>
<div class="team__description">
На IT волне команда профессионалов неутомимо трудится, чтобы дарить
слушателям самые свежие и актуальные новости из мира технологий,
отвечать на их вопросы и обсуждать горячие темы на IT радио.
На IT волне команда профессионалов неутомимо трудится, чтобы дарить слушателям самые свежие и актуальные новости
из мира технологий, отвечать на их вопросы и обсуждать горячие темы на IT радио.
</div>
</div>
<template v-if="showLoader">
@ -43,11 +42,7 @@
}"
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" />
</div>
@ -61,9 +56,7 @@
<div class="team__progress" ref="progressBar">
<span></span>
</div>
<router-link :to="{ name: 'about' }" class="m--link">
Больше о нас
</router-link>
<router-link :to="{ name: 'about' }" class="m--link"> Больше о нас </router-link>
</div>
</div>
</template>

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

@ -1,11 +1,6 @@
import { route } from 'quasar/wrappers';
import store from '@/store';
import {
createRouter,
createMemoryHistory,
createWebHistory,
createWebHashHistory,
} from 'vue-router';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';
/*
@ -43,9 +38,7 @@ 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) => {

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

@ -1,12 +1,9 @@
import { urlPath as settings } from '@/settings';
import { REST, RESTError } from './rest';
// запросы на сервер Django
// console.log(settings);
export default class extends REST {
// export default class Django extends REST {
static get settings() {
return settings;
}
@ -233,10 +230,7 @@ export default class extends REST {
return data;
})
.catch((error) => {
throw new RESTError(
error,
'Ошибка при получении информации о текущем треке',
);
throw new RESTError(error, 'Ошибка при получении информации о текущем треке');
});
}

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

@ -21,9 +21,7 @@ export default class extends REST {
}),
});
// console.log('sseUriParams', sseUriParams.toString());
this.connection = new EventSource(
sseBaseUri + '?' + sseUriParams.toString(),
);
this.connection = new EventSource(sseBaseUri + '?' + sseUriParams.toString());
// window.connection = this.connection;
// this.connection.onopen = (e) => console.log('connected', e);
}

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

@ -8,8 +8,7 @@ class RESTError extends Error {
let detail =
error.response &&
error.response.data &&
(error.response.data.detail ||
(error.response.data.error && error.response.data.error.detail));
(error.response.data.detail || (error.response.data.error && error.response.data.error.detail));
let header = (message || error.message) + (detail ? ': ' + detail : '');
super(header);
@ -39,23 +38,8 @@ 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);

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

@ -24,10 +24,7 @@ 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;
}
/*

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

@ -5,23 +5,16 @@
<div class="page404__block">
<div class="page404__info">
<div class="page404__info-title">404</div>
<div class="page404__info-subtitle">
Мы не можем найти то, что вы ищете
</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>
<button class="button button-blue" @click="next()">На главную</button>
</div>
</div>
</div>

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

@ -6,17 +6,12 @@
<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-content">Мы уже знаем об этом и делаем все возможное!</div>
<div class="page500__info-bottom">
Переходите на главную страницу, там вы сможете найти много
полезной информации!
Переходите на главную страницу, там вы сможете найти много полезной информации!
</div>
<div class="page500__info-button">
<button class="button button-blue" @click="next()">
На главную
</button>
<button class="button button-blue" @click="next()">На главную</button>
</div>
</div>
</div>

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

@ -13,26 +13,22 @@
<div class="about__header-left">
<h1 class="h2">О нас</h1>
<div class="text about__header-description">
IT-радио — это не просто обычная радиостанция, мы ваши партнеры в
творчестве и современных технологиях.
IT-радио — это не просто обычная радиостанция, мы ваши партнеры в творчестве и современных технологиях.
</div>
</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">
Мы — команда, которая верит в силу теплой улыбки и дружеской беседы.
@ -45,14 +41,13 @@
<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>
@ -71,27 +66,19 @@
</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>

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

@ -10,30 +10,20 @@
<div class="contacts__content">
<div v-if="contacts" class="contacts__info">
<div v-for="(item, index) in contactsField" :key="index">
<div
v-if="item.title !== dictionaryFields.socials"
class="text contacts__item"
>
<div v-if="item.title !== dictionaryFields.socials" class="text contacts__item">
<span class="title">{{ item.title }}</span>
{{ item.data }}
</div>
<div v-else class="contacts__socials">
<span class="title">{{ item.title }}</span>
<div
v-for="(href, social) in item.data"
:key="social"
class="contacts__social"
>
<div v-for="(href, social) in item.data" :key="social" class="contacts__social">
<a :href="href" :class="['contacts__social', social]"></a>
</div>
</div>
</div>
</div>
<div class="contacts__map">
<div
class="contacts__map-frame"
style="position: relative; overflow: hidden"
>
<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"

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

@ -5,8 +5,7 @@
<p class="text home__subtitle">
Мы цифровое <span>онлайн радио.</span><br />
Помогаем разобраться в том, что такое <span>IT.</span><br />
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span
><br />
Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br />
</p>
<h1 class="home__title" ref="targetTitle">
IT-Радио —
@ -30,31 +29,27 @@
<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">
Открывая новые горизонты в мире технологий
</h2>
<h2 class="h2 m--border">Открывая новые горизонты в мире технологий</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>
@ -76,9 +71,8 @@
<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">
@ -125,8 +119,7 @@ export default {
});
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,

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

@ -15,18 +15,9 @@
<h1 class="h2 playlist__title m--margin">
{{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}
</h1>
<button class="playlist-edit__upload" @click="handlerUploadCover">
Добавить обложку
</button>
<button class="playlist-edit__upload" @click="handlerUploadCover">Добавить обложку</button>
<div class="field__input m--hidden">
<input
id="cover"
ref="coverInput"
accept=".jpg,.png,.svg"
class="input"
type="file"
name="logo"
/>
<input id="cover" ref="coverInput" accept=".jpg,.png,.svg" class="input" type="file" name="logo" />
</div>
<FormKit
v-model="playlist.name"
@ -96,9 +87,7 @@ export default {
computed: {
songsFiltered() {
return this.songs.filter((song) => {
const alreadyAdd = this.playlist.song.find(
(item) => item.azura_id === song.azura_id,
);
const alreadyAdd = this.playlist.song.find((item) => item.azura_id === song.azura_id);
return !alreadyAdd;
});
},

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

@ -10,12 +10,7 @@
<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" />
</template>

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

@ -1,10 +1,6 @@
<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' } },
@ -12,9 +8,7 @@
]"
/>
<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"
@ -35,11 +29,7 @@
Загрузка данных
</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="showLoaderPlaylist">
@ -48,11 +38,7 @@
Загрузка данных
</div>
</template>
<PlaylistRoster
v-else
:list="userFavorite.playlist"
@createPlaylist="createPlayList"
/>
<PlaylistRoster v-else :list="userFavorite.playlist" @createPlaylist="createPlayList" />
</template>
</template>
<routerView v-else />
@ -106,10 +92,7 @@ export default {
console.log('1');
this.currentTabsItem = to?.hash.replace('#', '') || 'music';
}
if (
(to?.hash !== from?.hash && to?.name === from?.name) ||
(!from?.name && !from?.hash)
) {
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';