diff --git a/package-lock.json b/package-lock.json index dbb7b25..3209acf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@tailwindcss/postcss": "^4.0.1", "@tailwindcss/vite": "^4.0.1", + "pinia": "^2.3.1", "vue": "^3.5.13", "vue-router": "^4.5.0" }, @@ -932,6 +933,28 @@ "version": "1.1.1", "license": "ISC" }, + "node_modules/pinia": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz", + "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^6.6.3", + "vue-demi": "^0.14.10" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "typescript": ">=4.4.4", + "vue": "^2.7.0 || ^3.5.11" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/postcss": { "version": "8.5.1", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz", @@ -1144,6 +1167,32 @@ } } }, + "node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "license": "MIT", + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-router": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz", diff --git a/package.json b/package.json index fab90af..d8eaea3 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@tailwindcss/postcss": "^4.0.1", "@tailwindcss/vite": "^4.0.1", + "pinia": "^2.3.1", "vue": "^3.5.13", "vue-router": "^4.5.0" }, diff --git a/src/components/NewProject.vue b/src/components/NewProject.vue index 99e39c5..3076053 100644 --- a/src/components/NewProject.vue +++ b/src/components/NewProject.vue @@ -483,15 +483,8 @@ diff --git a/src/pages/project/projectCard.vue b/src/pages/project/projectCard.vue new file mode 100644 index 0000000..62d10d3 --- /dev/null +++ b/src/pages/project/projectCard.vue @@ -0,0 +1,12 @@ + + + diff --git a/src/router/index.js b/src/router/index.js index 5f1cc75..3bf1a01 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,7 +1,8 @@ -// import VueRouter from 'vue-router' + import { createRouter, createWebHistory } from 'vue-router' import ProjectList from "../pages/project/list.vue"; +import ProjectPage from "../pages/project/projectCard.vue"; @@ -15,16 +16,18 @@ const routes = [ pageTitle: 'Olimp', }, }, - { path: '/project', component: ProjectList }, - - // { - // path: '/project', - // name: 'ProjectList', - // component: ProjectList, - // props: { - // pageTitle: 'Проекты', - // }, - // }, + { + path: '/project/id', + component: ProjectPage + }, + { + path: '/project', + name: 'ProjectList', + component: ProjectList, + props: { + pageTitle: 'Проекты', + }, + }, ] diff --git a/src/stores/project.ts b/src/stores/project.ts new file mode 100644 index 0000000..fd7c348 --- /dev/null +++ b/src/stores/project.ts @@ -0,0 +1,225 @@ +import { defineStore } from 'pinia'; + +interface UserPayloadInterface { + username: string; + password: string; +} + +export const useProjectStore = defineStore('ProjectStore', { + state: () => ({ + projects: [], + errors: null, + loading: false, + address: 'http://94.228.121.18/api/projects', + }), + actions: { + async loadData() { + // 'http://127.0.0.1:8001' + + // const url = this.$config.REST_SERVER + '/projects'; + // const token = useCookie('token'); + console.log(this.address, 'url loadData'); + + try { + const data = await fetch(this.address,{ + method: 'get', + headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` }, + }); + + + if (data?.data) this.projects = data.data; + console.log(this.projects, 'in store.projects'); + // const json = data.json(); + // if (Array.isArray(data)) { + // data.forEach(function(a: Object) { + // const date = new Date(a?.last_changed) + // const year = date.getFullYear(); + // let month = date.getMonth() + 1; + // let dt = date.getDate(); + // if (dt < 10) { + // dt = "0" + dt; + // } + // if (month < 10) { + // month = "0" + month; + // } + // a.last_changed = dt + '.' + month + ' ' + year + // }); + // this.projects = data; + // } + } catch(e) { + console.error('Во время запроса loadData возникли следующие ошибки:\n' + e); + // this.errors = e; + } + }, + async fetchEditPr(project: Object) { + // http://127.0.0.1:8001 + const url = this.address+ '/' + project?.id_project; + try { + const data = await fetch(url, { + method: 'put', + // headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` }, + body: JSON.stringify(project), + }); + + + let obj = Object.assign({}, project); + + if (data?.data?.id_project) { + // obj.id_project = data.id_project; + const json = data.json(); + + console.log(obj); + if (Array.isArray(this.projects)) { + let match = this.projects.findIndex(pr => pr.id_project == data.data.id_project); + if (match>=0) this.projects.splice(match, 1, data.data); + } + return json; + } + } + catch(e) { + console.error('Во время запроса возникли следующие ошибки:\n' + e); + // this.errors = e; + return []; + } + }, + // async unFaveProject(project: Object) { + + // project.is_favorites = false; + // let res = await this.fetchEditPr(project); + // return res; + // }, + // async faveProject(project: Object) { + // project.is_favorites = true; + // let res = await this.fetchEditPr(project); + // return res; + // }, + // async deleteProject({ commit }, project) { + + // if (!project.id_project) return false; + // const url = this.$config.REST_SERVER + '/projects/' + project.id_project + // try { + // const response = await fetch(url, { + // method: 'DELETE', + // headers: { + // 'Content-Type': 'application/json; charset=UTF-8' + // }, + // }) + // const json = await response.json(); + // console.log("json:", json) + + // if (json.data) { + // commit("DELETE_PROJECT", project); + // return true; + // } + // return false; + // } + // catch(e) { + // console.error('Во время запроса' + url + 'возникли следующие ошибки:\n' + e); + // return false; + // } + // }, + // async stopProject({commit, dispatch}, project) { + // await commit("STOP_PROJECT", project); + // project.status = 2; + // const res = await dispatch('fetchEditPr', project); + // return res; + // }, + // async runProject({commit, dispatch}, project) { + // await commit("RUN_PROJECT", project); + // project.status = 1; + // const res = await dispatch('fetchEditPr', project); + // return res; + // }, + + // async editRpoject({ commit }, newProject) { + // try { + // const response = await fetch('http://127.0.0.1:8001/api/projects', { + // method: 'PUT', + // headers: { + // 'Content-Type': 'application/json; charset=UTF-8' + // }, + // body: JSON.stringify(newProject), + // }) + // const json = await response.json(); + // commit("EDIT_PROJECT", newProject); + // return json; + // } + // catch(e) { + // console.error('Во время запроса возникли следующие ошибки:\n' + e); + // return []; + + // } + // }, + async addNew(newProject: Object) { + + // const url = this.$config.REST_SERVER + '/projects'; + // const token = useCookie('token'); + console.log(3, newProject, 'url & add NewPR'); + try { + const data = await fetch(this.address,{ + method: 'patch', + // headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` }, + body: JSON.stringify(newProject), + }); + let obj = Object.assign({}, newProject); + + if (data?.data?.id_project) { + obj.id_project = data.data.id_project; + console.log(obj); + if (Array.isArray(this.projects)) this.projects.push(obj); + } + + console.log(data?.data, this.projects, 'add new to store.projects'); + return data; + // try { + // const response = await fetch(url, { + // method: 'POST', + // headers: { + // 'Content-Type': 'application/json; charset=UTF-8' + // }, + // body: JSON.stringify(newProject), + // }) + // const json = await response.json(); + + // if (json.data.id_project) { + // newProject["id_project"] = json.data.id_project; + // console.log(newProject) + + // } + // commit("ADD_PROJECT", newProject); + // return json.data; + } catch(e) { + console.error('Во время запроса возникли следующие ошибки:\n' + e); + return []; + + } + }, + }, + getters: { + getProjects: state => state.projects || [], + getFavProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => a?.is_favorites) + else return []; + }, + authorProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => a?.owner) + else return []; + }, + participantProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => !a?.owner) + else return []; + }, + finishedProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 3) + else return []; + }, + stoppedProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 2) + else return []; + }, + runningProjects: state => { + if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 1) + else return []; + } + } +}); diff --git a/src/style.css b/src/style.css index 685879c..bdb109c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,81 +1,2 @@ @import "tailwindcss"; -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -}