commit 75950063299980974641eda2390f62c5e4063862
parent 1818f18565808edeb049766dfe2de95df9f29c07
Author: Vetle Haflan <vetle@haflan.dev>
Date: Sat, 11 Jan 2020 06:30:13 +0100
Add Checkbox.vue and continue dev
Diffstat:
5 files changed, 77 insertions(+), 21 deletions(-)
diff --git a/vuejs/exdata.json b/vuejs/exdata.json
@@ -1,9 +1,9 @@
[{
"id": "42",
- "text": "/todo this is my great todo"
+ "text": "/todo This is my great todo\n-[ ] oppg1.\n-[x] oppg2."
},
{
"id": "45",
- "text": "/todo is my other"
+ "text": "/todo The *other* task"
}]
diff --git a/vuejs/index.html b/vuejs/index.html
@@ -1,6 +1,7 @@
<html>
<head>
<title>Vue Experiment</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Mont_Blanc_oct_2004.JPG/1024px-Mont_Blanc_oct_2004.JPG');">
<div id="app"></div>
diff --git a/vuejs/src/App.vue b/vuejs/src/App.vue
@@ -1,8 +1,11 @@
<template>
- <div>
- <!-- <List></List> -->
- <div class="card" style="width: 400px; background-color: #DFF">
- <b @onhover="alert('hah')">This workin?</b>
+ <div style="margin: 20px;">
+ <!-- This should replace the card div eventually: <List></List> -->
+ <div class="card"
+ style="width: 400px; background-color: #BBF; padding: 10px;"
+ ondragover="event.preventDefault()"
+ ondrop="console.log(event)" >
+ <b>This workin?</b>
<Task v-for="(item, index) in exArray" @update="updateTask"
:key="item.id"
:index="index"
@@ -37,6 +40,9 @@
let newItem = this.exArray[index];
newItem.text = newText
this.$set(this.exArray, index, newItem);
+ },
+ moveTask(event) {
+ console.log(event);
}
},
mounted() {
diff --git a/vuejs/src/components/Checkbox.vue b/vuejs/src/components/Checkbox.vue
@@ -0,0 +1,37 @@
+<template>
+ <div>
+ <input type="checkbox" @change="$emit('update')" :checked="checked" />
+ <span v-html="html"></span>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: "Checkbox",
+ props: {
+ contents: String
+ },
+ data() {
+ let match = this.contents.match(/^ *- *\[[ x]*\]/);
+ return {
+ checked: match[0].includes("x"),
+ html: this.contents.replace(match[0], "")
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ span {
+ white-space: pre-wrap;
+ }
+ input {
+ /* Double-sized Checkboxes */
+ -ms-transform: scale(1.5); /* IE */
+ -moz-transform: scale(1.5); /* FF */
+ -webkit-transform: scale(1.5); /* Safari and Chrome */
+ -o-transform: scale(1.5); /* Opera */
+ transform: scale(1.5);
+ padding: 10px;
+ }
+</style>
diff --git a/vuejs/src/components/Task.vue b/vuejs/src/components/Task.vue
@@ -2,14 +2,16 @@
<div class="card"
@dblclick="editToggle"
@keyup.ctrl.enter="editToggle"
- @keyup.enter="enterAction">
+ @keyup.enter="enterAction"
+ draggable="true">
<template v-if="editing">
<textarea v-model="contents" v-bind:rows="textRows"></textarea>
</template>
<template v-else>
<component v-for="component in renderedComponents"
:is="component.name"
- :contents="component.contents"></component>
+ :contents="component.contents"
+ @update="updateTask"></component>
</template>
</div>
</template>
@@ -18,9 +20,10 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios/dist/axios.min.js';
import RawText from './RawText.vue';
+ import Checkbox from './Checkbox.vue';
export default {
name: "Task",
- components: {RawText},
+ components: {RawText, Checkbox},
props: {
index: Number,
text: String
@@ -38,28 +41,33 @@
for (var i in lines) {
// If line starts starts with '- ':
let comp = {
- name: "RawText",
- contents: lines[i]
+ name: "RawText"
};
+ let line = lines[i];
// TODO: Make more generic, like an array of objects w/
// component name, parser/modifier and regex to match on
if (/^ *\/todo +/.test(lines[i])) {
- comp.contents = lines[i].replace(/\/todo /, '');
- } else if (/^- /.test(lines[i])) {
+ line = line.replace(/\/todo /, '');
+ }
+ if (/^ *- *\[[ x]*\]/.test(lines[i])) {
+ comp.name = "Checkbox";
+ } else if (/^ *- /.test(lines[i])) {
// TODO: Consider implementing unordered list
- } else if (/^ *- *\[ *\]/.test(lines[i])) {
- comp.name = "Checkbox"
- console.log("check")
- } else if (lines[i] === "") {
+ let match = line.match(/^ *-(.+)/);
+ if (match) {
+ line = "<li>" + match[1] + "</li>";
+ }
+ } else if (line === "") {
// TODO: Find a more elegant way of dealing with '\n's
- comp.contents = "\n";
+ line = "\n";
}
- let match = lines[i].match(/\*(.+)\*/);
+ let match = line.match(/\*(.+)\*/);
if (match) {
- comp.contents = lines[i].replace(
+ line = line.replace(
match[0], "<b>" + match[1] + "</b>"
)
}
+ comp.contents = line;
components.push(comp);
}
return components;
@@ -83,10 +91,14 @@
if (match) {
if (e.shiftKey) {
this.contents += " ".repeat(match[0].length) + " ";
- } else {
+ } else if (!e.ctrlKey) {
this.contents += match[0] + " ";
}
}
+ },
+ updateTask(e) {
+ // TODO: Generate qump text based on the different components
+ console.log(e);
}
}
}
