wbrawner/ffc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update addNewDeck to read file to localStorage

Browse source
This commit is contained in:
Rene Fischer 2020-06-05 18:30:17 +02:00
parent 0f2e492644
commit 16fc212ebc
1 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/views/AddNewDeck.vue
View file

@ -3,13 +3,67 @@
<v-container fluid>
<v-row align="center" justify="center">
<v-col cols="10">
<span class="title">Fancy Flashcard</span>
<br>
<span>You will be able to add a new deck here.</span>
<br>
<a href="https://github.com/dhbw-ffc/ffc">https://github.com/dhbw-ffc/ffc</a>
<v-card class="file-input" width="600" height="300" raised>
<v-card-title>Deck-Import</v-card-title>
<br />
<v-card-text>
<v-file-input
accept=".json"
label="Click here to select a .json file"
outlined
v-model="chosenFile"
></v-file-input>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn right @click="importFile">Import File</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="10">
<v-card class="file-input" width="600" height="300" raised>
<v-card-title>Deck-Creation</v-card-title>
<br />
<p>You will be able to natively create a new deck here.</p>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "AddNewDeck",
data() {
return {
chosenFile: null,
fileContent: ""
};
},
computed: {},
components: {},
methods: {
importFile() {
const reader = new FileReader();
reader.readAsText(this.chosenFile);
reader.onload = () => {
this.fileContent = JSON.parse(reader.result);
if (this.fileContent.decks) {
localStorage.setItem("decks", JSON.stringify(this.fileContent.decks));
}
};
}
}
};
</script>
<style scoped>
.file-input {
margin: auto;
width: 50%;
}
</style>