Related
I'm using the vue3 and element-ui-plus to build a project.
But when I tried to use the MessageBox in element-ui-plus, there was an error Uncaught ReferenceError: then is not defined coming out.
Other functions are good except MessageBox.
Here is my code. And Please refer to the handleDelete function.
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
const app ={
el: '#app',
data(){
return {
pagination: {
currentPage: 1,
pageSize: 10,
total: 0,
queryString: null
},
formData: {},
}
},
created() {
this.findPage();
},
methods: {
findPage() {
var param = {
currentPage: this.pagination.queryString == null ? this.pagination.currentPage : 1,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
axios.post("/checkitem/findPage.do",param).then(res => {
this.pagination.total = res.data.total;
this.dataList = res.data.rows;
});
},
resetForm() {
this.formData = {};
},
handleDelete(row) {
this.$confirm("Do you want to delete the record?","Warning",{
confirmButtonText: "Yes",
cancelButtonText: "No",
type: "warning"
}).then(() => {
console.log("delete record");
axios.get("/checkitem/delete.do?id="+row.id).then(res => {
});
}).catch(() => {
});
}
}
};
Vue.createApp(app).use(ElementPlus).mount("#app");
<script>
#Oliver you could try making your function async. See below
async handleDelete(row) {
try {
await this.$confirm("Do you want to delete the record?","Warning",{
confirmButtonText: "Yes",
cancelButtonText: "No",
type: "warning"
})
console.log("delete record")
axios.get("/checkitem/delete.do?id="+row.id)
} catch (error) {
// handle error
} finally {
// something else if you need
}
})
Question though, are you meant to be waiting for a user to confirm/cancel the click before you trigger execute the delete?
Please note that I was able to consume the geojson data and create a layer on leaflet map with ease. Also, tried using lib arcgis-to-geojson-utils but not able to get it working.
Here is my code.
Your help is greatly appreciated.
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(url,options)
.then(response => {
return response.json()
});
}
function createGraphics(schoolsGeoData) {
const geoData = JSON.parse(schoolsGeoData);
return geoData.features.map((school, i) => {
let schoolAttr = {
OBJECTID: school.properties["id"],
name: school.properties["name"]
}
return new Graphic({
// type: "point",
attributes: schoolAttr,
geometry: new Point({
x: school.geometry.coordinates[0],
y: school.geometry.coordinates[1]
}),
});
})
}
function createLayer(graphics) {
return new FeatureLayer({
source: graphics,
objectIdField: "OBJECTID",
fields: schoolFeilds(),
popupTemplate: schoolTemplate(),
renderer: myRenderer(),
geometryType: "point" ,
spatialReference: {
wkid: 4326
},
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
Your code have a reasonable logic, of course there are thing missing that I can not know it they are working. For example, I don't know what options you add to fetch operation, but by default it will get you the data correctly, and you do not have to convert to JSON because it realize that.
I was actually going to ask you for more code, or what exactly was your problem, but I decide to remind you that you actually have a specific layer to handle GeoJSON data, GeoJSONLayer.
ArcGIS API - GeoJSONLayer
ArcGIS Examples - GeoJSONLayer
But, anyway I will leave you here a running example of what you are trying to do, fetching the data and using FeatureLayer, using the data from the example I mention,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSON with FeatureLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic"
], function(Map, MapView, FeatureLayer, Graphic) {
const map = new Map({
basemap: "gray"
});
const view = new MapView({
center: [-80, 35],
zoom: 8,
map,
container: "viewDiv"
});
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
)
.then(response => {
return response.json()
});
}
function createGraphics(data) {
// const geoData = JSON.parse(data);
return data.features.map((feature, i) => {
return new Graphic({
attributes: {
OBJECTID: i,
title: feature.properties["title"],
mag: feature.properties["mag"],
type: feature.properties["type"],
place: feature.properties["place"],
time: feature.properties["time"]
},
geometry: {
type: "point",
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
},
});
})
}
function createLayer(graphics) {
const popupTemplate = {
title: "{title}",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
],
outFields: ["title", "mag", "type", "place", "time"]
}
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "10px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
return new FeatureLayer({
source: graphics,
fields: [{
name: "OBJECTID",
alias: "ObjectID",
type: "oid"
}, {
name: "title",
alias: "Title",
type: "string"
}
, {
name: "mag",
alias: "Magnitude",
type: "double"
}
, {
name: "type",
alias: "Type",
type: "string"
}, {
name: "place",
alias: "Place",
type: "string"
}, {
name: "time",
alias: "Time",
type: "date"
}],
objectIdField: "OBJECTID",
popupTemplate,
renderer
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
i'm development a application using express/socket.io/knockout.js, it's my first time using knockout.js, to be exact i'm using simpleGrid example from knockout live example, but, with the difference that I get JSON from a socket in server.js, i don't have problem with this, i get json from server into client app, but I'm can't refresh/update simple grid with json recived. Grid is populated first time throught ajax call, but no update using socket.io and I can log using console.log json data coming from server .emit.
Cheers,
SR109
Here my index2.html, app client:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title of the document</title>
<script type='text/javascript' src='js/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='js/knockout-3.4.2.js'></script>
<script type='text/javascript' src='js/knockout.simpleGrid.3.0.js'></script>
<script type='text/javascript' src="http://localhost:3000/socket.io/socket.io.js"></script>
<link rel="stylesheet" type="text/css" href="cs/sheetindex2.css">
</head>
<body>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
</div>
<script>
var registros = [];
var registros2 = [];
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
ko.applyBindings(new PagedGridModel(registros2));
},
error: function(req, err){
console.log('my message' + err);
}
})
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
console.log(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Fecha", rowText: "fecha" },
{ headerText: "Turno", rowText: "turno" },
{ headerText: "1", rowText: "h1" },
{ headerText: "2", rowText: "h2" },
{ headerText: "3", rowText: "h3" },
{ headerText: "4", rowText: "h4" },
{ headerText: "5", rowText: "h5" },
{ headerText: "6", rowText: "h6" },
{ headerText: "7", rowText: "h7" },
{ headerText: "8", rowText: "h8" }
],
pageSize: 30
});
};
var socket = io.connect('http://localhost:3000');
console.log('Un cliente se ha conectado');
socket.on('messages', function(data) {
console.log(data);
PagedGridModel.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
ko.applyBindings(new PagedGridModel(registros2));
}
});
</script>
</body>
</html>
And my server2.js (i don't have problems with this):
var express = require('express');
var mysql = require('mysql');
var path = require('path');
var connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'rootadmin',
database: 'mecanizado'
})
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
//app.use("/cs", express.static(__dirname + 'client' + '/css'));
//app.use("/js", express.static(__dirname + 'client' + '/js'));
app.use(express.static(__dirname));
app.use(express.static(__dirname + 'js'));
app.use(express.static(__dirname + 'cs'));
app.route('/aplicacion').get(function(req,res){
console.log(__dirname + '/index2.html');
res.sendFile(__dirname + '/index2.html');
});
app.route('/resultado').get(function(req,res){
res.send("resultado1");
res.end();
});
app.route('/usuario').get(function(req,res){
res.json({'results': 'parametro'});
res.end();
});
app.route('/json').get(function(req,res){
//connection.connect();
//connection.query('SELECT * FROM mecanizado.isla1', function(err,rows,fields){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
res.json(rows);
});
//connection.end();
});
var server = app.listen(3000, function() {
console.log('Server started on port');
});
var io = require('socket.io').listen(server);
io.on('connection', function (socket) {
//socket.emit('messages', { hello: 'world' });
//setInterval(()=>socket.emit('messages','mensaje'),1000);
setInterval(()=>consulta(socket), 1000);
/* socket.on('my other event', function (data) {
console.log('cliente conectado');
//setInterval(socket.send('${new Date()}'), 1000);
setInterval(socket.emit('messages','mensaje'),1000);
}); */
});
function consulta (socket){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
//res.json(rows);
console.log(rows);
socket.emit('messages',rows);
});
}
We need access to the actual instance that you used to apply bindings on the HTML. Only then can we modify the values. For this we need to save the instance in a variable. I have done that like this: window.vm = new PagedGridModel(registros2);
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
window.vm = new PagedGridModel(registros2);
ko.applyBindings(window.vm);
},
error: function(req, err){
console.log('my message' + err);
}
})
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
console.log(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Fecha", rowText: "fecha" },
{ headerText: "Turno", rowText: "turno" },
{ headerText: "1", rowText: "h1" },
{ headerText: "2", rowText: "h2" },
{ headerText: "3", rowText: "h3" },
{ headerText: "4", rowText: "h4" },
{ headerText: "5", rowText: "h5" },
{ headerText: "6", rowText: "h6" },
{ headerText: "7", rowText: "h7" },
{ headerText: "8", rowText: "h8" }
],
pageSize: 30
});
};
var socket = io.connect('http://localhost:3000');
console.log('Un cliente se ha conectado');
socket.on('messages', function(data) {
console.log(data);
window.vm.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
//ko.applyBindings(new PagedGridModel(registros2));
}
});
I am populating a grid dynamically as mentioned in the below link.
Dynamic Kendo Grid
Is there any feature out of the box to freeze the first column?
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
//example data received from remote source via jQuery ajax merthod
var data = [{
"Name": "daya",
"Role": "Developer",
"Dept": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "siva",
"Role": "Developer",
"Dept": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "sivadaya",
"Role": "Developer",
"Dept": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "dayasiva",
"Role": "Developer",
"Dept": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}];
//in the success handler of the ajax method call the function below with the received data:
var dateFields = [];
generateGrid(data)
function generateGrid(gridData) {
var model = generateModel(gridData[0]);
var parseFunction;
if (dateFields.length > 0) {
parseFunction = function (response) {
for (var i = 0; i < response.length; i++) {
for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {
var record = response[i];
record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);
}
}
return response;
};
}
var grid = $("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
model: model,
parse: parseFunction
}
},
toolbar: ["create", "save"],
columns: getenerateColumn(model),
editable: true,
sortable: true
});
}
function getenerateColumn(gridData) {
var datas = gridData;
var columnArray = [];
var IsFirstColumn = true;
for (var i in datas.fields) {
if (IsFirstColumn) {
columnArray.push({ field: i, sortable: false, title: i, locked: true, width: 150 });
IsFirstColumn = false;
}
else {
columnArray.push({ field: i, sortable: false, title: i, width: 500 });
}
}
return columnArray;
}
function generateModel(gridData) {
var model = {};
model.id = "ID";
var fields = {};
for (var property in gridData) {
var propType = typeof gridData[property];
if (propType == "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
} else if (propType == "boolean") {
fields[property] = {
type: "boolean",
validation: {
required: true
}
};
} else if (propType == "string") {
var parsedDate = kendo.parseDate(gridData[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
dateFields.push(property);
} else {
fields[property] = {
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
</script>
</body>
</html>
Let me know if any concern.
I am testing post create so I can set up class properties in postcreate rather than calling here
request("js/my/data/sample.json", {
handleAs: "json"
}).then(function (jsonResults) {
arrayUtil.forEach(jsonResults.LinksMap, function (List) {
arrayUtil.forEach(List.LinksMap.entry, function (Ientry) {
if ('information' === Ientry.linkType) Ientry.className = 'info';
else if ('news link' === Ientry.linkType) Ientry.className = 'news';
var widget = new support(Ientry).placeAt(authorContainer);
});
});
});
I tried
postCreate: function () {
this.inherited(arguments);
},
_setLinkClssAttr: function (iconClass) {
if (iconClass != "") {
if ('information' === linkType) LinkClss = 'info';
if ('news link' === Ientry.linkType) LinkClss = 'news';
this._set("LinkClss", iconClass);
this.LinkNode.class = iconClass;
}
}
my HTML template looks like this
<a class="${baseClass}LinkClss" href="${Link.url}" data-dojo-attach-point="LinkNode">${Link.title}</a>
Is this what you mean?
HTML code:
<div id="myWidget1"></div>
<div id="myWidget2"></div>
<div id="myWidget3"></div>
CSS:
.info {
color: red;
}
.news {
color: blue;
}
Code to create the Widget, passing in an entry object:
require([
"dojo/parser", "dojo/dom", "MyWidget", "dojo/domReady!"],
function (parser, dom, MyWidget) {
console.log(arguments);
parser.parse().then(function () {
var linkTypes = ['information', 'news link', 'other'];
linkTypes.forEach(function (linkType, i) {
var entry = {
link: 'hello' + (i + 1),
linkType: linkType,
linkHref: "https://www.google.co.uk/search?q=" + linkType
};
new MyWidget(entry, dom.byId("myWidget" + (i + 1)));
});
});
});
Code to define the widget:
define("MyWidget", [
"dojo/_base/declare", "dojo/dom-class", "dojo/dom-attr", "dojo/query",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/NodeList-dom"],
function (declare, domClass, domAttr, query, _WidgetBase, _TemplatedMixin) {
var template = [
'<div>',
'<a data-dojo-attach-point="linkNode"></a>',
'</div>'];
return declare("MyWidget", [_WidgetBase, _TemplatedMixin], {
templateString: template.join("\n"),
constructor: function (params, srcNodeRef) {
console.log("creating widget with params " + dojo.toJson(params) +
" on node " + srcNodeRef);
},
postCreate: function () {
console.log(arguments);
this.inherited(arguments);
this._setLinkClass();
},
// private methods
_setLinkClass: function () {
var linkClass = this._calculateLinkClass();
console.log(linkClass, this.linkNode);
if (linkClass != "") {
query(this.linkNode).addClass(linkClass);
}
},
_calculateLinkClass: function () {
var linkClass = "";
if ('information' === this.linkType) linkClass = 'info';
if ('news link' === this.linkType) linkClass = 'news';
return linkClass;
},
// Attributes
link: "empty",
_setLinkAttr: {
node: "linkNode",
type: "innerHTML"
},
linkHref: "#",
_setLinkHrefAttr: function (href) {
domAttr.set(this.linkNode, "href", href);
}
});
});
Result: