ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add empty bar and rating number

This commit is contained in:
Ramon Wenger 2023-01-18 11:53:07 +01:00 committed by Christian Cueni
parent e86c36248c
commit f3d61bff8a
2 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
client/src/components/ui/RatingScale.vue
View File

@ -49,46 +49,63 @@ const getRGBString = ([r, g, b]: RGB) => {
return `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`; return `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`;
}; };
const getRGBStyle = (c1: RGB, c2: RGB, weight: number) => { // const getRGBStyle = (c1: RGB, c2: RGB, weight: number) => {
return getRGBString(blendColors(c1, c2, weight)); // return getRGBString(blendColors(c1, c2, weight));
}; // };
const getLeftPosition = (rating:number, weight: number) => { const percent = computed(() => {
const percent = (rating - 1) * 33 + weight * 25; return (scale.value - 1) * 33.33 + weight.value * 25;
return `${Math.floor(percent)}%`; });
};
const leftPosition = computed(() => {
return `${Math.round(percent.value)}%`;
});
const rightClip = computed(() => {
return `${Math.round(100 - percent.value)}%`;
});
const blendedColor = computed(() => {
return blendColors(colors.value[0], colors.value[1], weight.value);
});
const backgroundColor = getRGBString(blendedColor.value);
const style = { const style = {
backgroundColor: getRGBStyle(colors.value[0], colors.value[1], weight.value), backgroundColor,
left: getLeftPosition(scale.value, weight.value), left: leftPosition.value,
};
const gradientStyle = {
clipPath: `inset(0 ${rightClip.value} 0 0)`,
};
const ratingValueStyle = {
backgroundColor,
}; };
console.log(props); console.log(props);
</script> </script>
<template> <template>
<h3>{{ props.rating }} - {{ weight }} = {{style}}</h3> <h3>
<span class="text-xl mr-2">Durchschnitt:</span>
<span
class="w-11 h-9 inline-flex justify-center rounded items-center text-xl"
:style="ratingValueStyle"
>
{{ props.rating }}
</span>
</h3>
<h3>{{ props.rating }} - {{ weight }} = {{ style }}</h3>
<div class="gradient-with-circle pt-3 relative"> <div class="gradient-with-circle pt-3 relative">
<!-- <div --> <div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
<!-- class="circle" --> <div class="h-2 bg-gray-300 absolute empty-bar -mt-2 w-full"></div>
<!-- :style="{ --> <div class="circle z-20" :style="style"></div>
<!-- backgroundColor: getRGBStyle(yellow, red, 0.5), -->
<!-- left: getLeftPosition(0.5), -->
<!-- }" -->
<!-- ></div> -->
<!-- <div -->
<!-- class="circle" -->
<!-- :style="{ -->
<!-- backgroundColor: getRGBStyle(yellow, red, 0.25), -->
<!-- left: getLeftPosition(0.25), -->
<!-- }" -->
<!-- ></div> -->
<div class="circle" :style="style"></div>
<div class="h-2 gradient"></div>
</div> </div>
</template> </template>
<style> <style lang="postcss">
.circle { .circle {
width: 32px; width: 32px;
height: 32px; height: 32px;

4
client/src/pages/StyleGuidePage.vue
View File

@ -426,8 +426,8 @@ function log(data: any) {
:items="satisfactionValues" :items="satisfactionValues"
/> />
<div> <div>
<RatingScale :rating="1" /> <RatingScale :rating="1.1" />
<RatingScale :rating="1.3" /> <RatingScale :rating="2" />
<RatingScale :rating="2.5" /> <RatingScale :rating="2.5" />
<RatingScale :rating="3.9" /> <RatingScale :rating="3.9" />
<RatingScale :rating="4" /> <RatingScale :rating="4" />