Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add input styling for numbers, and an error check prior to emitting the data_request event

Browse source
This commit is contained in:
Tyler-A 2020-07-29 23:23:46 -06:00
parent de98f92d21
commit 45161718ca
1 changed files with 56 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/ControlBar.vue
View file

@ -29,7 +29,7 @@
v-if="type && duration" v-if="type && duration"
id="data_button" id="data_button"
> >
<button @click.self="event('data_request')"> <button @click.self="data_request()">
{{ button_text }} {{ button_text }}
</button> </button>
</div> </div>
@ -41,6 +41,9 @@
Export Playlist Export Playlist
</button> </button>
</div> </div>
<div v-if="error" id="error">
{{ error }}
</div>
</div> </div>
</template> </template>
@ -52,6 +55,7 @@ export default {
], ],
components: {}, components: {},
data() { return { data() { return {
error: ``,
user: { user: {
name: ``, name: ``,
image: ``, image: ``,
@ -62,19 +66,34 @@ export default {
};}, };},
computed: { computed: {
button_text() { button_text() {
let pre_text = `Get Top`;
switch (this.amount) { switch (this.amount) {
case "": case "":
return `Get top 10 ${this.type}`; return `${pre_text} 10 ${this.type}`;
case "1": case "1":
return `Get top ${this.type.slice(0, -1)}`; return `${pre_text} ${this.type.slice(0, -1)}`;
default: default:
return `Get top ${this.amount} ${this.type}`; return `${pre_text} ${this.amount} ${this.type}`;
} }
} }
}, },
methods: { methods: {
event(name) { this.$emit(name); }, event(name) { this.$emit(name); },
get_user() {}, get_user() {},
data_request() {
let amount = parseInt(this.amount);
if (amount > 50) {
this.error = `Cannot request more than 50 ${this.type.toLowerCase()}`;
} else if (amount < 1) {
this.error = `Cannot get 0 or fewer ${this.type.toLowerCase()}`;
} else {
this.event(`data_request`, {
type: this.type,
amount: amount,
duration: this.duration,
});
}
},
} }
} }
</script> </script>
@ -85,21 +104,50 @@ export default {
background-color: var(--card-colour); background-color: var(--card-colour);
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
flex-wrap: wrap;
margin: 15px auto; margin: 15px auto;
flex-wrap: wrap;
display: flex; display: flex;
padding: 15px; padding: 15px 15px 5px;
width: 90%; width: 90%;
} }
#control > div {
margin-bottom: 10px;
}
#error {
border-radius: var(--corner-rounding);
border-color: var(--error);
border-style: solid;
color: var(--error);
text-align: center;
border-width: 2px;
padding: 15px;
width: 100%;
}
select { select {
background-color: var(--select-background); background-color: var(--input-background);
border-radius: var(--corner-rounding); border-radius: var(--corner-rounding);
font-family: var(--fonts); font-family: var(--fonts);
color: var(--select-text); color: var(--input-text);
outline: none; outline: none;
padding: 15px; padding: 15px;
border: none; border: none;
} }
select:hover { cursor: pointer; } select:hover { cursor: pointer; }
input[type=number] {
background-color: var(--input-background);
border-radius: var(--corner-rounding);
color: var(--input-text);
font-family: var(--fonts);
border-style: none;
outline: none;
padding: 15px;
width: 100px;
}
input[type=number]:active {
border-color: var(--spotify-green);
}
</style> </style>