Skip to content

Commit

Permalink
feat: adjusted catview to new cat-data
Browse files Browse the repository at this point in the history
  • Loading branch information
wiebken-n committed Dec 20, 2023
1 parent e390d82 commit 9a69d8f
Show file tree
Hide file tree
Showing 8 changed files with 674 additions and 678 deletions.
2 changes: 2 additions & 0 deletions public/themes/lara-dark-cyan/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -5772,6 +5772,8 @@
background: hsl(205, 20%, 17%);
color: rgba(255, 255, 255, 0.6);
padding: 1.25rem;
padding-block: 0.75rem;

font-weight: 700;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
Expand Down
1 change: 1 addition & 0 deletions public/themes/lara-light-cyan/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -5704,6 +5704,7 @@
background: #ffffff;
color: #6b7280;
padding: 1.25rem;
padding-block: 0.75rem;
font-weight: 700;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
Expand Down
51 changes: 42 additions & 9 deletions src/components/CatDataCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,27 @@
<slot name="icon"></slot>
<h2>{{ props.headline }}</h2>
</div>
<div class="card-output" v-if="!props.edit">
<div v-if="typeof props.content === 'string' || typeof props.content === 'number'">
<p>{{ props.content }}</p>
<div class="output-container" v-if="!props.edit && props.dataContent">
<div class="card-output content-object" v-if="props.hasContent">
<div class="chip-container" v-if="props.isNoArray">
<span class="chips">{{ props.dataContent.content }}</span>
</div>
<div class="chip-container" v-else>
<span class="chips" v-for="element of props.dataContent" :key="element"
>{{ element.content }}
</span>
</div>
</div>
<div v-else>
<p v-for="item of props.content" :key="item">{{ props.content }}</p>
<div v-else class="card-output no-content-object">
<div v-if="typeof props.dataContent === 'string' || typeof props.dataContent === 'number'">
<p>{{ props.dataContent }}</p>
</div>
<div v-else>
<p v-for="item of props.dataContent" :key="item">{{ item }}</p>
</div>
</div>
</div>
<div v-if="!props.edit && !props.dataContent"><p>(noch) keine Angabe vorhanden</p></div>
<slot v-if="props.edit" name="card-input"> </slot>

<svg v-if="props.userIsOwner && !props.edit" @click="emit('editMode')" class="icon icon-edit">
Expand All @@ -28,7 +41,9 @@ const props = defineProps({
edit: Boolean,
userIsOwner: Boolean,
headline: String,
content: String
dataContent: [String, Object, Number, Array],
hasContent: Boolean,
isNoArray: Boolean
})
const emit = defineEmits(['editMode', 'dataSaved'])
Expand All @@ -45,25 +60,29 @@ const emit = defineEmits(['editMode', 'dataSaved'])
border-radius: var(--border-radius);
box-shadow: 0 0 4px 2px var(--card-shadow);
}
.output-container {
width: 100%;
}
.info-segment-header {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
height: max-content;
width: 100%;
}
h2 {
color: var(--primary);
font-size: 1.1rem;
font-size: 1rem;
top: -0.8rem;
}
.icon {
width: 1.25rem;
height: 1.25rem;
color: var(--primary-darker);
}
.info-segment > p {
.info-segment p {
padding-bottom: 0.5rem;
padding-inline: 0.5rem;
inline-size: 100%;
Expand All @@ -76,7 +95,21 @@ h2 {
right: 8px;
bottom: 8px;
}
.chip-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: space-evenly;
}
.chips {
background: var(--nav-background);
padding-inline: 1rem;
padding-block: 0.75rem;
margin-inline: 1rem;
border-radius: 30px;
width: fit-content;
}
@media screen and (min-width: 700px) {
.info-segment-header {
gap: 0.5rem;
Expand Down
52 changes: 33 additions & 19 deletions src/stores/useCatsStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/useUserStore'
const userStore = useUserStore()
const router = useRouter()
export const feeding_times = reactive({})
export const useCatsStore = defineStore('cats', () => {
const state = reactive({
cats: {},
Expand All @@ -18,18 +17,19 @@ export const useCatsStore = defineStore('cats', () => {
birthday: '',
breed: '',

inoutdoor: '',
weight: '',
food_varieties: '', //JSON
feeding_times: '',
drugs: '',
drugs_info: '',
personality: '', //JSON
playtimes: '',
play_info: '',
food_info: '',
health_info: '',
behaviour_info: '',
cat_id: '',
weight: { content: '' },
in_outdoor: { content: '' },
food_varieties: [{ content: '' }],
feeding_times: { content: '' },
food_info: { content: '' },
drugs: { content: '' },
drugs_info: { content: '' },
personality: [{ content: '' }],
playtimes: { content: '' },
play_info: { content: '' },
health_info: { content: '' },
behaviour_info: { content: '' },

herder_connections: '',
catHerderProfiles: '',
Expand All @@ -38,9 +38,23 @@ export const useCatsStore = defineStore('cats', () => {
profiles: {
id: '',
username: ''
},
cats_info: [{ food_info: '' }, { health_info: '' }, { behaviour_info: '' }]

}
// cats_info: [{ food_info: '' }, { health_info: '' }, { behaviour_info: '' }]
// cats_info: {
// cat_id: '',
// weight: { content: '' },
// in_outdoor: { content: '' },
// food_varieties: [{ content: '' }],
// feeding_times: { content: '' },
// food_info: { content: '' },
// drugs: { content: '' },
// drugs_info: { content: '' },
// personality: [{ content: '' }],
// playtimes: { content: '' },
// play_info: { content: '' },
// health_info: { content: '' },
// behaviour_info: { content: '' }
// }
// age: '',
// description: ''
},
Expand All @@ -56,7 +70,7 @@ export const useCatsStore = defineStore('cats', () => {
const { data, error } = await supabase
.from('cats')
.select(
`id, name, avatar, user_id, birthday, herder_connections(id, herder_id, cat_id), cats_info(food_info, health_info, behaviour_info), todos(id, cat_id, content, created_by, completed, date)`
`id, name, avatar, user_id, birthday, breed, herder_connections(id, herder_id, cat_id), todos(id, cat_id, content, created_by, completed, date)`
)
.eq('user_id', userStore.state.userId)

Expand All @@ -76,7 +90,7 @@ export const useCatsStore = defineStore('cats', () => {
const { data, error } = await supabase
.from('cats')
.select(
`id, name, avatar, user_id, birthday, herder_connections(id, herder_id, cat_id), cats_info(food_info, health_info, behaviour_info), profiles(id, username), todos(id, cat_id, content, created_by, completed, date)`
`id, name, avatar, user_id, birthday, breed, herder_connections(id, herder_id, cat_id), profiles(id, username), todos(id, cat_id, content, created_by, completed, date)`
)

.neq('user_id', userStore.state.userId)
Expand All @@ -96,7 +110,7 @@ export const useCatsStore = defineStore('cats', () => {
const { data, error } = await supabase
.from('cats')
.select(
`id, name, avatar, user_id, birthday, herder_connections(id, herder_id, cat_id), cats_info(food_info, health_info, behaviour_info), profiles(id, username)`
`id, name, avatar, user_id, birthday, breed, herder_connections(id, herder_id, cat_id), profiles(id, username)`
)
.eq('id', id)
.single()
Expand Down
68 changes: 68 additions & 0 deletions src/stores/useResourcesStore.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { reactive } from 'vue'
import { defineStore } from 'pinia'
// import { supabase } from '@/supabase'
// import { useRouter } from 'vue-router'
// import { useUserStore } from '../stores/useUserStore'
// const userStore = useUserStore()
// const router = useRouter()
export const feeding_times = reactive({})
export const useResourcesStore = defineStore('resources', () => {
const options = reactive({
catbreeds: [
{ content: 'Wald-und-Wiesen-Katze' },
{ content: 'Kurzhaar-Mischung' },
{ content: 'Europäisch Kurzhaar' },
{ content: 'Britisch Kurzhaar' },
{ content: 'Europäisch Langhaar' },
{ content: 'Ragdoll' },
{ content: 'Siamkatze' },
{ content: 'Perser' },
{ content: 'Maine Coon' },
{ content: 'andere' }
],
inoutdoor: [
{ content: 'Wohnungskatze' },
{ content: 'Freigänger' },
{ content: 'Reine Draußenkatze' }
],
foodVarieties: [
{ content: 'Dosenfutter' },
{ content: 'Trockenfutter' },
{ content: 'Barf' },
{ content: 'Kochbarf' }
],
feedingTimes: [
{ content: 1 },
{ content: 2 },
{ content: 3 },
{ content: 4 },
{ content: 5 },
{ content: 6 },
{ content: 7 },
{ content: 8 }
],
drugs: [{ content: 'Nein' }, { content: 'Ja, täglich' }, { content: 'Ja, aber selten' }],
personality: [
{ content: 'ruhig' },
{ content: 'ängstlich' },
{ content: 'freundlich' },
{ content: 'aktiv' },
{ content: 'spielfreudig' },
{ content: 'mutig' },
{ content: 'unruhig' },
{ content: 'entspannt' },
{ content: 'aggressiv' }
],
playtimes: [
{ content: 'gar nicht' },
{ content: 'alle paar Tage' },
{ content: 'einmal am Tag' },
{ content: '2-3 mal am Tag' },
{ content: '3-5 mal am Tag' },
{ content: 'Pausenlos!' }
]
})
return {
options
}
})
Loading

0 comments on commit 9a69d8f

Please sign in to comment.