Skip to content

Instantly share code, notes, and snippets.

@Hateman31

Hateman31/app.js

Last active December 30, 2017 08:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Hateman31/8f3d274909210cbaa533ae4b25d1a32b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Hateman31/8f3d274909210cbaa533ae4b25d1a32b to your computer and use it in GitHub Desktop.
Download ZIP
Editable table
Raw
app.js
window.onload= function(){
var stringCell = function(field,value){
return {field:field,value:value,edit:false,type:'string'}
};
var binaryCell = function(field,value = 0){
return {field:field,value:value,edit:value == 0 ? true: false,type:'binary'}
}
var intervalCell = function(field,min,max,value = 1){
return {
min : min,
max : max,
field: field,
value: value,
type: 'interval',
edit: false
}
};
var selectPosition = function (field,selectedIndex = 0){
var options = [
{caption:'Driver',selected:false} ,
{caption:'Coocker',selected:false}
]
var position = {
options : options,
field:field,
value:options[selectedIndex].caption,
edit:false,
type:'selection'
}
position.options[selectedIndex].selected = true;
return position
};
Vue.component('app-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
},
setFocus: function (cell){
cell.edit = !cell.edit;
console.log(cell.type)
},
}
})
var app = new Vue({
el: '#app',
data: {
searchQuery: '',
gridColumns: ['name', 'position','test','gym'],
gridData: []
},
mounted(){
this.getDataGrid('http://127.0.0.1:5000/users')
},
methods: {
getDataGrid: function(url) {
//~ var app = this
axios.get(url).then(response => {
this.gridData = response.data
}).catch(error => {console.log(error)})
}
}
})
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div id="panel-menu">
<a>Show movements</a>
<a>Compute</a>
</div>
<app-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</app-grid>
</div>
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key | capitalize }}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in filteredData">
<td v-for="cell in row">
<a v-show="cell.edit==false" @click="cell.edit = true">{{cell.value}}</a>
<a v-show="cell.edit==true" @click="cell.edit = false">Pong!</a>
<!--
<div v-show="cell.type != 'binary' && cell.edit == false">
<label @click="setFocus(cell)">{{cell.value}}</label>
</div>
<div v-show="cell.type == 'binary'">
<input @blur="cell.edit = false" v-show="cell.edit == true" v-model="cell.value" type="checkbox">
<input v-show="cell.edit != true" disabled v-model="cell.value" type="checkbox">
</div>
<div v-show="cell.type == 'string' && cell.edit == true">
<input @blur="cell.edit = false" @keyup.enter="cell.edit = false" v-model="cell.value">
</div>
<div v-show="cell.type == 'interval' && cell.edit == true">
<input @blur="cell.edit = false" @keyup.enter="cell.edit = false" v-model="cell.value" type="number">
</div>
<div v-show="cell.type == 'selection' && cell.edit == true">
<select @blur="cell.edit = false" @keyup.enter="cell.edit = false" v-model="cell.value">
<option v-for="op in cell.options">{{op.caption}}</option>
</select>
</div>
-->
</td>
</tr>
</tbody>
</table>
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Raw
server.py
from flask import Flask
from flask import jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/users")
def hello():
data = [
[
{ 'value':'John', 'edit': False },
{'value': 0, 'edit': False },
{'value':2,'edit': False },
{'value':0,'edit': False },
]
]
return jsonify(data)
app.run()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment