Skip to content

Commit 58091e6

Browse files
abetomoabetomo
committed
Initial commit of application
1 parent adc2207 commit 58091e6

12 files changed

+9454
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,8 @@ typings/
5959

6060
# next.js build output
6161
.next
62+
63+
#
64+
.cache/
65+
dist/
66+
src/sql.js

‎index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const path = require('path')
2+
3+
const carlo = require('carlo')
4+
const Bundler = require('parcel-bundler')
5+
6+
const bootstrap = async () => {
7+
const outDir = path.join(__dirname, 'dist')
8+
const entryFile = path.join(__dirname, 'src', 'index.html')
9+
const opts = {
10+
outDir,
11+
outFile: 'index.html',
12+
sourceMaps: true,
13+
hmr: false
14+
}
15+
16+
const bundler = new Bundler(entryFile, opts)
17+
await bundler.bundle()
18+
const cApp = await carlo.launch()
19+
cApp.serveFolder(outDir)
20+
await cApp.load('index.html')
21+
}
22+
23+
bootstrap()

‎package-lock.json

+9,172
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "@abetomo/csv-select",
3+
"version": "0.0.1",
4+
"description": "",
5+
"scripts": {
6+
"dev": "node --max-old-space-size=8192 ./index.js",
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "abetomo",
10+
"license": "MIT",
11+
"dependencies": {
12+
"carlo": "^0.9.41",
13+
"vue": "^2.5.17",
14+
"vue-hot-reload-api": "^2.3.1"
15+
},
16+
"devDependencies": {
17+
"@fortawesome/fontawesome-free-webfonts": "^1.0.9",
18+
"@vue/component-compiler-utils": "^2.3.0",
19+
"bulma": "^0.7.2",
20+
"node-sass": "^4.10.0",
21+
"parcel-bundler": "^1.10.3",
22+
"sass": "^1.15.1",
23+
"sass-loader": "^7.1.0",
24+
"typescript": "^3.2.1",
25+
"vue-property-decorator": "^7.2.0",
26+
"vue-router": "^3.0.2",
27+
"vue-template-compiler": "^2.5.17"
28+
},
29+
"bin": "index.js"
30+
}

‎src/App.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div class="container">
3+
<router-view />
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import Vue from 'vue'
9+
export default Vue.extend({})
10+
</script>
11+
12+
<style lang="scss">
13+
@import '../node_modules/bulma/bulma.sass';
14+
</style>

‎src/components/DbTableInfo.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="has-text-centered" v-show="columnNames.length > 0">
3+
<ul>
4+
<li>TableName: hoge</li>
5+
<li>Columns: {{ columnNames.join(', ') }}</li>
6+
</ul>
7+
</div>
8+
</template>
9+
10+
<script lang="ts">
11+
import Vue from 'vue'
12+
import { Component, Prop } from 'vue-property-decorator'
13+
14+
@Component
15+
export default class DbTableInfo extends Vue {
16+
@Prop() private columnNames!: string[]
17+
}
18+
</script>
19+
20+
<style lang="scss" scoped>
21+
</style>

‎src/components/ResultTable.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<table class="table is-hoverable">
3+
<thead>
4+
<tr>
5+
<th v-for="columnName in columnNames">{{ columnName }}</th>
6+
</tr>
7+
</thead>
8+
<tbody>
9+
<tr v-for="rows in result">
10+
<td v-for="str in rows">{{ str }}</td>
11+
</tr>
12+
</tbody>
13+
</table>
14+
</div>
15+
</template>
16+
17+
<script lang="ts">
18+
import Vue from 'vue'
19+
import { Component, Prop } from 'vue-property-decorator'
20+
21+
@Component
22+
export default class ResultTable extends Vue {
23+
@Prop() private columnNames!: string[]
24+
@Prop() private result!: string[]
25+
}
26+
</script>
27+
28+
<style lang="scss" scoped>
29+
</style>

‎src/components/TopPage.vue

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div>
3+
<div
4+
class="drop-area"
5+
@dragleave.prevent
6+
@dragover.prevent
7+
@drop.prevent="onDrop">
8+
<p>Drag and drop file</p>
9+
</div>
10+
11+
<db-table-info :column-names="baseColumnNames"></db-table-info>
12+
13+
<div v-show="this.baseColumnNames.length > 0">
14+
<textarea v-model="sql" class="textarea is-info" placeholder="select * from hoge"></textarea>
15+
<button class="button is-fullwidth is-info" @click="runQuery">Run Query</button>
16+
</div>
17+
18+
<div class="columns is-mobile is-centered">
19+
<div class="column is-half">
20+
<result-table :column-names="columnNames" :result="result"></result-table>
21+
</div>
22+
</div>
23+
</div>
24+
</template>
25+
26+
<script lang="ts">
27+
import Vue from 'vue';
28+
import { Component, Prop } from "vue-property-decorator";
29+
import { Database } from "../sql"
30+
import ResultTable from "~/components/ResultTable"
31+
import DbTableInfo from "~/components/DbTableInfo"
32+
33+
@Component({
34+
components: {
35+
ResultTable,
36+
DbTableInfo
37+
}
38+
})
39+
export default class TopPage extends Vue {
40+
result: string[] = [];
41+
columnNames: string[] = [];
42+
43+
baseColumnNames: string[] = [];
44+
db: any = new Database();
45+
sql: string = '';
46+
47+
createTable (values) {
48+
this.columnNames = values.map((_, i) => {
49+
return `c${i + 1}`;
50+
});
51+
this.baseColumnNames = this.columnNames
52+
const columnsString = this.columnNames.map((name) => {
53+
return `${name} char`;
54+
}).join(',');
55+
this.db.run(`drop table if exists hoge; create table hoge (${columnsString});`);
56+
}
57+
58+
onDrop (event) {
59+
this.columnNames = [];
60+
this.result = [];
61+
62+
const files = event.dataTransfer.files;
63+
const reader = new FileReader();
64+
reader.onload = (e) => {
65+
const rows = e.target.result.split('\n').map((line) => {
66+
return line.split(',');
67+
});
68+
this.createTable(rows[0]);
69+
const columnLength = rows[0].length;
70+
rows.forEach((row) => {
71+
if (row.length !== columnLength) return;
72+
73+
this.result.push(row);
74+
const sql = `insert into hoge values(${
75+
row.map(v => `"${v}"`).join(',')
76+
})`;
77+
this.db.run(sql);
78+
})
79+
this.loading = false
80+
};
81+
reader.readAsText(files[0]);
82+
}
83+
84+
runQuery () {
85+
try {
86+
const result = this.db.exec(this.sql)[0];
87+
this.columnNames = result.columns;
88+
this.result = result.values;
89+
} catch (e) {
90+
console.log(e);
91+
}
92+
}
93+
}
94+
</script>
95+
96+
<style lang="scss" scoped>
97+
.drop-area {
98+
display: block;
99+
border: 2px dashed #bbb;
100+
border-radius: 5px;
101+
color: #bbb;
102+
padding: 25px;
103+
text-align: center;
104+
margin: 10px auto 5px;
105+
font-size: 18px;
106+
font-weight: bold;
107+
-khtml-user-drag: element;
108+
margin: 5% auto;
109+
width: 80%;
110+
}
111+
</style>

‎src/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CSV</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="./index.ts"></script>
11+
</body>
12+
</html>

‎src/index.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import router from "./router";
4+
5+
import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
6+
import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
7+
import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
8+
import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
9+
10+
new Vue({
11+
router,
12+
render: h => h(App)
13+
}).$mount("#app");

‎src/router.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue';
2+
import Router from 'vue-router';
3+
4+
Vue.use(Router);
5+
6+
export default new Router({
7+
routes: [
8+
{
9+
path: '/',
10+
name: 'top',
11+
component: () => import('~/components/TopPage.vue')
12+
}
13+
]
14+
});

‎src/store.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue';
2+
import Vuex from 'vuex';
3+
4+
Vue.use(Vuex);
5+
6+
export default new Vuex.Store({
7+
state: {},
8+
mutations: {},
9+
actions: {}
10+
});

0 commit comments

Comments
 (0)