Skip to content

Commit

Permalink
Reworks the needle page with session saving and new look and feel
Browse files Browse the repository at this point in the history 
Signed-off-by: Cole Gentry <[email protected]>
  • Loading branch information
@SomethingNew71
SomethingNew71 committed Dec 19, 2021
1 parent 4da11a5 commit 212ed4d
Show file tree
Hide file tree
Showing 6 changed files with 278 additions and 159 deletions.
250 changes: 151 additions & 99 deletions components/NeedleConfigurator.vue
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,126 @@
<template>
<div class="columns is-multiline configurator-component">
<div class="column is-3">
<nav class="panel">
<p class="panel-heading">Choose your Needles</p>
<a
v-for="(value, name) in selectValues"
:key="name"
class="panel-block is-fullwidth"
>
<b-button
class="remove-button"
:aria-label="
'Click here to remove the ' + selectValues[name] + ' needle'
"
type="is-light"
icon-pack="fas"
icon-right="minus"
:disabled="selectValues.length === 1"
@click="removeArrayItem(selectValues[name])"
/>
<b-field class="is-fullwidth" expanded>
<b-select
v-model="selectValues[name]"
expanded
placeholder="Select a Needle"
@input="updateArrayItem(value, selectValues[name])"
>
{{ selectValues[name] }}
<option
v-for="needle in allNeedles"
:key="needle.name"
:value="needle"
>
{{ needle.name }}
</option>
</b-select>
</b-field>
</a>
<div class="panel-block">
<div class="column is-8 is-offset-2 card">
<div class="card-content">
<h3 class="fancy-font-bold is-size-4 pb-3">Add a Needle To Compare</h3>
<p class="pb-3">
Adding a needle is as simple as starting to type the name of the
needle in the box below. You can also use the dropdown menu to scroll
through the list of availble options. Unsure of what the graph values
mean? Check out
<a
class="has-text-weight-bold"
href="#"
@click="isComponentModalActive = true"
>this helpful diagram</a
>
to learn more.
</p>
<b-field class="is-fullwidth" expanded>
<b-autocomplete
v-model="addNeedleValue"
expanded
:data="filteredDataObj"
:open-on-focus="true"
placeholder="Needle Name"
field="name"
@select="(option) => (addNeedleSelection = option)"
>
</b-autocomplete>
<b-button
type="is-primary"
icon-pack="fas"
icon-left="plus"
expanded
aria-label="Click here to add another needle with a generic value"
:disabled="selectValues.length === 10"
:disabled="selectValues.length === 10 || !addNeedleSelection"
@click="addArrayItem()"
></b-button>
<b-message v-if="existsError" type="is-warning" class="my-3">
This needle already exists on the chart.
</b-message>
</b-field>
<b-field grouped group-multiline>
<div
v-for="(value, needle) in selectValues"
:key="needle"
class="control"
>
Add Needle
</b-button>
</div>
<div class="panel-block">
<b-button
type="is-secondary"
icon-pack="fas"
icon-left="info"
expanded
@click="isComponentModalActive = true"
>
What do these values mean?
</b-button>

<b-modal
v-model="isComponentModalActive"
has-modal-card
trap-focus
:destroy-on-hide="true"
aria-role="dialog"
aria-label="Example Modal"
aria-modal
>
<div class="modal-card">
<header class="modal-card-head">
<h1 class="modal-card-title">Diagram of Needle Measurements</h1>
<button
type="button"
class="delete"
@click="isComponentModalActive = false"
/>
</header>
<section class="modal-card-body">
<img
class="diagram"
src="/diagram.jpg"
alt="Diagram of Needle Measurements"
/>
</section>
<footer class="modal-card-foot">
<b-button
label="Close"
@click="isComponentModalActive = false"
/>
</footer>
</div>
</b-modal>
</div>
</nav>
<b-tag
type="is-primary is-light"
size="is-medium"
attached
closable
:disabled="selectValues.length === 1"
:aria-close-label="
'Click here to remove the ' + selectValues[needle] + ' needle'
"
@close="removeArrayItem(selectValues[needle])"
>
{{ selectValues[needle].name }}
</b-tag>
</div>
</b-field>
</div>
</div>
<div class="column is-9">
<div class="column is-12">
<div class="card">
<highcharts ref="needlesChart" :options="mapOptions"></highcharts>
</div>
</div>
<b-modal
v-model="isComponentModalActive"
has-modal-card
trap-focus
:destroy-on-hide="true"
aria-role="dialog"
aria-label="Example Modal"
aria-modal
>
<div class="modal-card">
<header class="modal-card-head">
<h1 class="modal-card-title">Diagram of Needle Measurements</h1>
<button
type="button"
class="delete"
@click="isComponentModalActive = false"
/>
</header>
<section class="modal-card-body">
<img
class="diagram"
src="/diagram.jpg"
alt="Diagram of Needle Measurements"
/>
</section>
<footer class="modal-card-foot">
<b-button label="Close" @click="isComponentModalActive = false" />
</footer>
</div>
</b-modal>
</div>
</template>
<script>
import Needles from '~/static/data/needles.json';
import StarterNeedles from '~/static/data/default-needles.json';
export default {
data() {
return {
Needles,
existsError: false,
addNeedleValue: '',
addNeedleSelection: null,
isComponentModalActive: false,
allNeedles: Needles,
selectValues: [...StarterNeedles],
selectValues: undefined,
mapOptions: {
chart: { zoomType: 'x' },
title: { text: 'Needle Comparison Chart' },
exporting: {
buttons: {
contextButton: {
symbol: 'download',
},
},
},
subtitle: {
text: 'Source: <a target="_blank" href="http://www.mintylamb.co.uk/suneedle/">http://www.mintylamb.co.uk/suneedle/</a>',
},
Expand Down Expand Up @@ -158,25 +162,73 @@
},
};
},
computed: {
filteredDataObj() {
return this.Needles.filter((needle) => {
return (
needle.name
.toString()
.toLowerCase()
.includes(this.addNeedleValue.toLowerCase()) >= 0
);
});
},
},
created() {
this.initializeNeedles();
},
methods: {
initializeNeedles() {
// Check to see if there are any pre-selected needles in the store
const cachedNeedles = this.$store.getters.needles;
if (cachedNeedles) {
this.selectValues = [...cachedNeedles];
} else {
this.selectValues = [...StarterNeedles];
this.$store.commit('updateNeedles', this.selectValues);
}
},
updateArrayItem() {
// When someone changes a needle value, update the chart
this.mapOptions.series = this.selectValues;
this.$store.commit('updateNeedles', this.selectValues);
},
addArrayItem() {
// Pick out a random needle from all the needles
const rand =
this.allNeedles[Math.floor(Math.random() * this.allNeedles.length)];
// Update the needle values which automatically triggers a redraw
StarterNeedles.push(rand);
this.selectValues.push(rand);
this.existsError = this.selectValues.some(
(obj) => obj.name === this.addNeedleSelection.name
);
if (this.existsError) {
setTimeout(() => {
this.existsError = false;
}, 5000);
} else {
StarterNeedles.push(this.addNeedleSelection);
this.selectValues.push(this.addNeedleSelection);
this.$store.commit('updateNeedles', this.selectValues);
}
},
removeArrayItem(currentItem) {
// Find the index of the item you wanna remove
const itemIndex = this.selectValues.indexOf(currentItem);
// Remove the specific needle value which automatically triggers a redraw
StarterNeedles.splice(itemIndex, 1);
this.selectValues.splice(itemIndex, 1);
this.$store.commit('updateNeedles', this.selectValues);
},
warning() {
this.$buefy.snackbar.open({
message: 'This',
type: 'is-warning',
position: 'is-top',
actionText: 'Retry',
indefinite: true,
onAction: () => {
this.$buefy.toast.open({
message: 'Action pressed',
queue: false,
});
},
});
},
},
};
Expand Down
Loading

0 comments on commit 212ed4d

Please sign in to comment.