Dhaverd/ computer-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Продолжаем

This commit is contained in:
p.belezov 2024-11-01 17:02:09 +08:00
parent 30a3ff49c6
commit 2d4151847c
5 changed files with 115 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Models/Computer.php
View File

@ -8,4 +8,10 @@
class Computer extends Model
{
use HasFactory;
protected $fillable = ['user_id', 'name', 'cpu', 'motherboard', 'gpu', 'additional_info'];
public function user(){
return $this->belongsTo(User::class);
}
}

5
app/Models/Job.php
View File

@ -8,4 +8,9 @@
class Job extends Model
{
use HasFactory;
protected $fillable = ['computer_id', 'description', 'status'];
public function computer(){
return $this->belongsTo(Computer::class);
}
}

25
resources/store/computers.js
View File

@ -13,7 +13,7 @@ export const useComputersStore = defineStore('computers', {
localStorage.setItem('auth_token', token);
},
checkToken(){
this.token = this.useUserStore().token;
this.token = useUserStore().token;
},
async getComputerList(user_id){
if (this.token === null){
@ -33,6 +33,29 @@ export const useComputersStore = defineStore('computers', {
).then((response)=>{
this.computers = response.data;
})
},
async create(name, cpu, motherboard, gpu, additional_info){
if (this.token === null){
this.checkToken();
}
await axios.post('/api/data/computers/create', {
user_id: useUserStore().user['id'],
name: name,
cpu: cpu,
motherboard: motherboard,
gpu: gpu,
additional_info: additional_info,
}, {
headers: {
Authorization: `Bearer ${this.token}`,
token: this.token
},
}).then(()=>{
this.getComputerList(useUserStore().user['id']);
return true;
}).catch(()=>{
return false;
});
}
},
})

66
resources/views/Computers/CreateForm.vue Normal file
View File

@ -0,0 +1,66 @@
<script>
import { useComputersStore } from '../../store/computers';
import {rules} from '../../js/rules.js'
export default {
name: "CreateForm",
computed: {
rules() {
return rules
}
},
props: {
dialogClose: Function
},
data() {
return {
computerName: null,
computerCpu: null,
computerMotherboard: null,
computerGpu: null,
computerAdditional: null,
loading: false,
computersStore: useComputersStore()
}
},
methods: {
createComputer(){
this.loading = true;
if (!rules.notNull(this.computerName)){
alert('Имя компьютера необходимо заполнить');
this.loading = false;
return;
}
this.computersStore.create(
this.computerName,
this.computerCpu,
this.computerMotherboard,
this.computerGpu,
this.computerAdditional
).then((result)=>{
this.loading = false;
this.dialogClose();
});
}
}
}
</script>
<template>
<v-card class="main-bg">
<v-card-title>Создание нового компьютера</v-card-title>
<v-card-text>
<v-text-field :rules="[rules.notNull]" label="Название" v-model="computerName" placeholder="Мой компьютер"></v-text-field>
<v-text-field label="CPU" v-model="computerCpu" placeholder="Intel Core i5-12400F"></v-text-field>
<v-text-field label="Материнская плата" v-model="computerMotherboard" placeholder="Asus ROG B650"></v-text-field>
<v-text-field label="Gpu" v-model="computerGpu" placeholder="Nvidia RTX 3060ti"></v-text-field>
<v-textarea label="Дополнительная информация" v-model="computerAdditional"></v-textarea>
<div class="d-flex justify-center">
<v-btn :loading="loading" @click="createComputer">Создать</v-btn>
</div>
</v-card-text>
</v-card>
</template>
<style scoped>
</style>

28
resources/views/ComputersList.vue
View File

@ -2,9 +2,10 @@
import { watch } from 'vue';
import { useUserStore } from '../store/auth.js';
import {useComputersStore} from "../store/computers.js";
import {rules} from "../js/rules.js";
import CreateForm from './Computers/CreateForm.vue';
export default {
name: "About",
components: {CreateForm},
data() {
return {
userStore: useUserStore(),
@ -14,17 +15,16 @@ export default {
editDialogShow: false,
fetching: false,
authenticated: false,
computerName: null,
computerCpu: null,
computerMotherboard: null,
computerGpu: null,
computerAdditional: null,
editLoading: false
};
},
methods: {
showCreateDialog(){
this.createDialogShow = true;
},
hideCreateDialog(){
this.createDialogShow = false;
},
showEditDialog(){
this.editDialogShow = true;
}
@ -35,10 +35,12 @@ export default {
this.fetching = true;
this.authenticated = newStore.user !== null && newStore.user !== undefined;
this.computersStore.setToken(this.userStore.token);
if (this.userStore.user['id']){
this.computersStore.getComputerList(this.userStore.user['id']).then(()=>{
this.computerList = this.computersStore.computers;
this.fetching = false;
})
}
});
}
}
@ -48,7 +50,7 @@ export default {
<div class="d-flex flex-column justify-center w-100">
<v-skeleton-loader v-if="fetching" color="grey-darken-3" class="w-100" type="card"/>
<div v-if="!fetching" class="w-100 h-100">
<div class="d-flex align-center justify-space-between w-100 h-100" v-for="computer in computerList">
<div class="d-flex align-center justify-space-between w-100 h-100 pt-3 pb-3" v-for="computer in computerList">
<router-link :to="`/jobs?id=${computer['id']}`" class="text-decoration-none w-100 mr-2" >
<v-card class="card-bg text-decoration-none cursor-pointer w-100">
<v-card-title>{{ computer['name'] }}</v-card-title>
@ -72,17 +74,7 @@ export default {
</div>
</div>
<v-dialog :model-value="createDialogShow">
<v-card class="main-bg">
<v-card-title>Создание нового компьютера</v-card-title>
<v-card-text>
<v-text-field label="Название" :model-value="computerName" placeholder="Мой компьютер"></v-text-field>
<v-text-field label="CPU" :model-value="computerCpu" placeholder="Intel Core i5-12400F"></v-text-field>
<v-text-field label="Материнская плата" :model-value="computerMotherboard" placeholder="Asus ROG B650"></v-text-field>
<v-text-field label="Gpu" :model-value="computerGpu" placeholder="Nvidia RTX 3060ti"></v-text-field>
<v-textarea label="Дополнительная информация" :model-value="computerAdditional"></v-textarea>
<v-btn>Создать</v-btn>
</v-card-text>
</v-card>
<CreateForm :dialogClose="hideCreateDialog" />
</v-dialog>
</template>