51 lines
1.1 KiB
Svelte
51 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import StarRatting from "../star-rating/Stars.svelte";
|
|
|
|
export let score
|
|
|
|
let config = {
|
|
readOnly: false,
|
|
countStars: 5,
|
|
range: {
|
|
min: 0,
|
|
max: 5,
|
|
step: 0.5
|
|
},
|
|
score: score / 2,
|
|
showScore: false,
|
|
name: "rating",
|
|
scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
|
|
starConfig: {
|
|
size: 32,
|
|
fillColor: '#F9ED4F',
|
|
strokeColor: "#e2c714",
|
|
unfilledColor: '#FFF',
|
|
strokeUnfilledColor: '#000'
|
|
}
|
|
}
|
|
|
|
const ratingInWords = {
|
|
0: "Not Reviewed",
|
|
1: "Appalling",
|
|
2: "Horrible",
|
|
3: "Very Bad",
|
|
4: "Bad",
|
|
5: "Average",
|
|
6: "Fine",
|
|
7: "Good",
|
|
8: "Very Good",
|
|
9: "Great",
|
|
10: "Masterpiece",
|
|
}
|
|
|
|
const changeRating = (e: any) => {
|
|
score = e.target.valueAsNumber * 2
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<StarRatting bind:config on:change={changeRating}/>
|
|
<p>Rating: {config.score * 2}</p>
|
|
<p>{ratingInWords[config.score * 2]}</p>
|
|
</div>
|