I have a calendar, and outside of this I have a box where I put the event values (client, barber, service and I choose a color). After loading the values, an element is generated that I can select and drag to the calendar. The following happens to me:
When I create an event and drag it to the calendar, it is placed with the color that I configured. If I click the save button, it loads correctly into the database. A json is saved with the event information, for example:
{"id":2,"title":"Maria Marco","barbero":"Diego","servicio":"Corte","start":"2020-03-21T10:30:00","end":"2020-03-21T11:00:00","color":"rgb(0, 86, 179)"}
Suppose I don't have any items in the database, and I create 3 events and drag them to the calendar. If I click the save button, these 3 will be saved correctly as indicated above.
Now if I do a new event load, these new elements will load correctly, but in the previous elements the color property now disappears.
I appreciate if any find the error in this spaghetti of js
$(function() {
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
// initialize the external events
// -----------------------------------------------------------------
new FullCalendarInteraction.Draggable(containerEl, {
itemSelector: '.external-event',
eventData: function(eventEl) {
var barbero = $("#barbero").children(".opcion-barbero:selected").html()
var servicio = $("#servicio").val()
return {
title: eventEl.innerText,
extendedProps: { "barbero": barbero, "servicio": servicio, "color": eventEl.style.backgroundColor },
backgroundColor: eventEl.style.backgroundColor,
borderColor: eventEl.style.backgroundColor
};
}
});
view = 'timeGridDay';
header = {
left: 'prev,next timeGridDay,timeGridWeek,dayGridMonth',
center: '',
right: ''
};
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'local',
plugins: ['interaction', 'dayGrid', 'timeGrid'],
eventSources: [
// your event source
{
url: 'ajax/turnos2.ajax.php'
}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(info) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
});
calendar.render();
/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default
//Color chooser button
var colorChooser = $('#color-chooser-btn')
$('#color-chooser > li > a').click(function(e) {
e.preventDefault()
//Save color
currColor = $(this).css('color')
//Add color effect to button
$('#add-new-event').css({
'background-color': currColor,
'border-color': currColor
})
})
$('#add-new-event').click(function(e) {
e.preventDefault()
//Get value and make sure it is not null
var val = $('#new-event').val()
if (val.length == 0) {
return
}
//Create events
var event = $('<div />')
event.css({
'font-weight': 300,
'background-color': currColor,
'border-color': currColor,
'color': '#fff'
}).addClass('external-event')
event.html(val)
$('#external-events').prepend(event)
//Add draggable funtionality
ini_events(event)
//Remove event from text input
$('#new-event').val('')
})
/*==============================================
Apply changes to the events
==============================================*/
$(document).on("click", "span.guardarCalendario", function() {
var arrayEventos = new Array();
var eventos = calendar.getEvents();
// Contador para ID
var num = 1;
eventos.forEach(e => {
// Nombre del turno
title = (e._def["title"]);
barbero2 = (e._def.extendedProps["barbero"]);
servicio = (e._def.extendedProps["servicio"]);
color = (e._def.extendedProps["color"]);
id = num;
num = num + 1;
var evento = new Object();
evento["id"] = id;
evento["title"] = title;
evento["barbero"] = barbero2;
evento["servicio"] = servicio;
evento["start"] = start;
evento["end"] = end;
evento["color"] = (e._def.extendedProps["color"]);
arrayEventos.push(evento);
})
$("#turnos").val(JSON.stringify(arrayEventos))
var data = { 'data': JSON.stringify(arrayEventos) }
$.ajax({
type: 'POST',
url: 'ajax/turnos.ajax.php',
dataType: 'json',
data: data,
success: function(data, status, xhr) {
alert("response was " + data);
},
error: function(xhr, status, errorMessage) {
$("#debug").append("RESPONSE: " + xhr.responseText + ", error: " + errorMessage);
}
});
})
turnos.ajax.php
<?php
require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";
class AjaxTurnos{
public $data;
public function ajaxActualizarTurnos(){
$datos = ($this->data);
foreach(json_decode($datos) as $value){
$respuesta = ModeloTurnos::mdlActualizarTurnos(json_encode($value).PHP_EOL);
}
return $respuesta;
}
}
/*==============================
ACTUALIZAR TURNOS
==============================*/
if(isset($_POST["data"])){
ModeloTurnos::mdlTruncarTurnos();
$turnos = new AjaxTurnos();
$turnos -> data = $_POST["data"];
$turnos -> ajaxActualizarTurnos();
}
turnos2.ajax.php
<?php
require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";
$data = ControladorTurnos::ctrMostrarTurnos();
$data2 = [];
foreach($data as $key=>$value){
$data2[] = json_decode($value["datos"]);
}
//returns data as JSON format
echo (json_encode($data2));
Related
I am trying to use Angular UI Calendar:
http://angular-ui.github.io/ui-calendar/
I implemented all the steps, but my events info coming from API are not getting displayed on calendar.
following is my HTML:
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">Day</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">Week</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
</div>
</div>
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar" ng-click="alertOnEventClick();">
</div>
following is my controller code :
$scope.events=[];
$http.get("/ABC/ABC", {
params: {
"calenderView": 1
}
}).success(function(data, status, headers, config) {
//Declared Array for Data.
for(var i=0; i< data.eventCalender.length; i++){
$scope.events.push = {
title:data.eventCalender[i].title,
start:data.eventCalender[i].start,
end:data.eventCalender[i].end
}
}
}).
error(function(data, status, headers, config) {
SpinnerSvc.hide('globalSpinner');
});
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth();
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
/* alert on eventClick */
$scope.alertOnEventClick = function( date, jsEvent, view){
$scope.alertMessage = ($scope.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1);
canAdd = 1;
}
});
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ['openSesame']
});
};
/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view,calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalendar = function(calendar) {
$timeout(function() {
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
/* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title,
'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 480,
editable: true,
header:{
left: 'title',
center: '',
right: 'prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.changeLang = function() {
if($scope.changeTo === 'Hungarian'){
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
$scope.changeTo= 'English';
} else {
$scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
$scope.changeTo = 'Hungarian';
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
//}
You have a syntax error when you push new event to $scope.events array. Try this:
...
for(var i=0; i< data.eventCalender.length; i++){
$scope.events.push({
title:data.eventCalender[i].title,
start:data.eventCalender[i].start,
end:data.eventCalender[i].end
});
}
...
Right now you just re-assign array push function to your event object.
Hi i´m trying to show chessboardjs on a form view in odoo backend, I finally make the widget to show the board, but the pieces are hidden, I don´t know why because seems to work fine, except for the pieces. If I use dragable : true in the options and move a hidden piece then the board is rendered with all the pieces. do I´m missing something, on my code that the chessboard its not rendered well??
here is mi widget code:
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.YourWidgetClassName = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>'); // creating the board in the DOM
this.onBoard();
},
onBoard: function (position, orientation) {
if (!position) {
this.position = 'start'
} else {
this.position = position
}
if (!orientation) {
this.orientation = 'white'
} else {
this.orientation = orientation
}
this.el_board = this.$('#board');
this.cfg = {
position: this.position,
orientation: this.orientation,
draggable: false,
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
this.board = ChessBoard(this.el_board, this.cfg);
}
});
instance.web.form.custom_widgets.add('widget_tag_name', 'instance.chess_base.YourWidgetClassName');
}
})(openerp);
I don't know why but this solve the issue, if someone have an explanation to me please ...
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.ShowBoard = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
this.show_board();
},
show_board: function () {
var Game = new instance.web.Model("chess.game"),
record_id = this.field_manager.datarecord.id,
record_name = this.field_manager.datarecord.name,
self = this;
self.el_board = self.$('#board');
Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
console.log(data);
self.cfg = {
position: data[0].pgn,
orientation: 'white',
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
ChessBoard(self.el_board, self.cfg);
});
}
});
instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
}
})(openerp);
I am writing a greasemonkey script to manipulates the DOM, queries a server and displays the result on a separate jquery dialog.
I want to add following two functionalities to it:
Provide a search box which acts like a simple search on a browser (i.e. searches through the content of the jquery dialog only and highlights the text).
Provide a text-box, the content of which should be stored permanently for all future use of the userscript unless the user changes it specifically.
The problem I am facing is that I want to include both of these in the ui-dialog-buttonpane area of the dialog, to the left of the close button, but I am not able to figure out how to do that.
What I do know is that I can use window.find() (as used here http://www.javascripter.net/faq/searchin.htm) to enable the browser find functionality.
Can someone help me with this ? Following is the code for my existing greasemonkey script:
// ==UserScript==
// #name Query for each URL Asynchronously
// #namespace SupportScript
// #include *
// #require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// #require https://ajax.googleapis.com/ajax/libs/jquery/ui/1.11.0/jquery-ui.min.js
// #resource jqUI_CSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css
// #grant GM_addStyle
// #grant GM_getResourceText
// #grant GM_getResourceURL
// #run-at document-end
// allow pasting
// ==/UserScript==
var snapshotResults = document.evaluate('//a[contains(#href,"http")]/#href', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var windowWidth = $(window).width()-800;
var windowHeight = $(window).height();
var zNode = document.createElement ('input');
zNode.setAttribute ('id', 'SSButton');
zNode.setAttribute( 'type', 'image' );
zNode.setAttribute( 'src', 'http://www.veryicon.com/icon/64/System/Longhorn%20R2/Back%20Button.png');
//zNode.setAttribute( 'src', 'https://dperkins.org/2013/2013-07-24.Icon.2.png');
//zNode.setAttribute( 'src','http://i1043.photobucket.com/albums/b433/suzuki800/Button-Info-icon.png');
document.body.appendChild (zNode);
var batchSize = 10;
var urlsToUpsert = [];
var uniqueHostnameSet = new Set();
var uniqueURLArray = [];
uniqueHostnameSet.add(window.location.hostname);
var finalUrl = window.location.protocol + '//' + window.location.hostname;
uniqueURLArray.push(finalUrl);
for (var iterate = 0; iterate < snapshotResults.snapshotLength; iterate++)
{
var hrefContent = snapshotResults.snapshotItem(iterate).textContent;
var regex = /http.*/;
var href = regex.exec(hrefContent);
var a = document.createElement('a');
a.href = href;
if (!uniqueHostnameSet.has(a.hostname))
{
uniqueHostnameSet.add(a.hostname);
finalUrl = a.protocol + '//' + a.hostname;
uniqueURLArray.push(finalUrl);
}
}
var divMain = '<div id="SSOverlayDialog"></div>';
$('body').append(divMain);
$.Coral = function (options) {
$.extend(options, {
url: "my URL",
data: JSON.stringify(options.data),
dataType: 'json',
crossDomain: true,
type: 'POST',
contentType: 'application/json',
processData: false,
headers: {
'Content-Encoding': 'abc',
'X-Target': options.operation
},
dataFilter: function(data, type) {
return data || "{}";
}
});
return $.ajax(options);
};
$.GetOperation = function (options) {
$.extend(options, {
async: true,
success: function(data) {
handleData(data);
},
operation: 'opeartion1'
});
return $.Coral(options);
};
$.UpsertOperation = function (options) {
$.extend(options, {
async: true,
operation: 'Operation2'
});
return $.Coral(options);
};
for (var iterateUniqueURLArray=0; iterateUniqueURLArray<uniqueURLArray.length; iterateUniqueURLArray+=batchSize) {
var urlList = uniqueURLArray.slice(iterateUniqueURLArray,iterateUniqueURLArray+batchSize);
try {
var listOfURLs = {
storeUrlList: urlList
};
var dataGetAttributes = {data: listOfURLs};
$.GetOperation(dataGetAttributes);
} catch(e) {
console.log(e);
}
}
function handleData (data) {
var div = '<div id="SSOverlayDialog">';
var response = JSON.stringify(data);
var subString = "";
var startIndex = response.indexOf('{',1);
var endIndex = response.lastIndexOf('}');
var responseText = response.substring(startIndex,endIndex);
var subString = JSON.parse(responseText);
$.each( subString, function( key, value ) {
key = JSON.stringify(key);
div+='<b><i><a style="color:#0645AD" href="'+key.substring(1,key.length-1)+'"><u>' + key.substring(1,key.length-1) + '</u></a></i></b><br><br>';
if(JSON.stringify(value)==='{}') {
console.log("Value for URL "+key+" is null.");
div+='<p>This URL does not exist with Mobius.<span style="color:red" class="urlNotPresent" id ="'+key.substring(1,key.length-1)+'"><u>Click Here</u></span> to submit to Mobius.</p>';
}
$.each( value, function( ky, val ) {
ky = JSON.stringify(ky);
if (val==null) {
div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val+'</i></p>';
}
else{
val = JSON.stringify(val);
div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val.substring(1,val.length-1)+'</i></p>';
};
});
div+='<br>';
});
div += '</div>';
$('#SSOverlayDialog').append(div);
$(".urlNotPresent").off('click');
$(".urlNotPresent").one('click', urlNotPresentFn);
$(".urlNotPresent").hover(pointerToClick, pointerToDefault);
}
var urlNotPresentFn = function() {
var url = jQuery(this).attr("id");
if (urlsToUpsert.length == batchSize-1) {
urlsToUpsert.push(url);
var listOfURLs = {
storeUrlList: urlsToUpsert
};
var myOptions = {data: listOfURLs};
$.UpsertOperation(myOptions);
urlsToUpsert.length = 0;
} else {
urlsToUpsert.push(url);
};
console.log(urlsToUpsert);
}
var pointerToClick = function() {
$(".urlNotPresent").css("cursor", "pointer");
}
var pointerToDefault = function(){
$(".urlNotPresent").css("cursor", "default");
}
$(window).bind('beforeunload', function() {
if(urlsToUpsert.length>0) {
var listOfURLs = {
storeUrlList: urlsToUpsert
};
var myOptions = {data: listOfURLs};
$.UpsertOperation(myOptions);
urlsToUpsert.length = 0;
};
return ;
});
$('#SSOverlayDialog').dialog({
autoOpen: false,
modal: false,
title: 'Discovered URLs (press "Esc" button to close)',
position: {
at: 'right top'
},
resizable: false,
width: windowWidth,
height: windowHeight,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
zIndex: 11111111,
buttons: [
{
text: 'Close',
click: function () {
$(this).dialog('close');
}
}
]
});
$("#SSButton").click(function() {
($("#SSOverlayDialog").dialog("isOpen") == false) ? $("#SSOverlayDialog").dialog("open") : $("#SSOverlayDialog").dialog("close") ;
/* if ($("#SSOverlayDialog").dialog("isOpen") == false) {
$("#SSOverlayDialog").dialog("open"),
$('#SSButton').css({
'transform': 'rotate(180deg)',
'transform': 'translate(-windowWidth)'
});
} else{
$("#SSOverlayDialog").dialog("close"),
$('#SSButton').css({
'transform': 'initial'
});
};*/
});
var jqUI_CssSrc = GM_getResourceText('jqUI_CSS');
jqUI_CssSrc = jqUI_CssSrc.replace(/\.ui-front \{[\s]*z-index:\s100\;[\s]*\}/g,".ui-front \{\n z-index: 20000000 \; \n\}");
GM_addStyle(jqUI_CssSrc);
GM_addStyle ( multilineStr ( function () {/*!
#SSButton {
background: none repeat scroll 0% 0% ;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: auto auto;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 22222222;
width: 40px;
height: 40px;
}
*/} ) );
function multilineStr (multiLineStringFn) {
var str = multiLineStringFn.toString ();
str = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
.replace (/\s*\*\/\s*\}\s*$/, '') // Strip */ }
.replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
;
return str;
}
To include controls to the left of the "Close" button in a ui-dialog-buttonpane, you can use the .prepend() function on the .ui-dialog-buttonset class like this:
$('.ui-dialog .ui-dialog-buttonset').prepend('<input type="text"/><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Search</span></button>');
You'll most likely want to add a selector for the specific dialog you're using to avoid adding this control to any dialog on the page. Based on your example, it would be something like this:
$('div[aria-describedby=SSOverlayDialog]').find('.ui-dialog-buttonset').prepend('<input type="text"/><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Search</span></button>');
Hope that helps answer the main problem.
Best of luck!
I have two control panels; one is for the default draw features, the other for measure tools.
The problem is that since they are in different panels it is possible to run two controls simultaneously, one from each panel. (this didn't seem like much of a problem before, but I noticed that when the measure and default draw tools are activated together, they cancel out the line end function)
What I am trying to do is either place all controls in one panel and toggle them together or toggle the panels(e.g. when control from panel 1 is activated, deactivate all controls in panel 2)
Here is my code:
Default Controls Panel:
OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
initialize: function(options){
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
this.addControls([
new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true})
])
this.displayClass = 'olControlCustomNavToolbar'
},
draw: function(){
var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
this.defaultControl = this.controls[0];
return div;
}
});
var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
map.addControl(panel);
Measure Controls Panel:
allControls = {
line: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
persist: true,
handlerOptions: {
layerOptions: {
renderers: renderer,
styleMap: styleMap
}
},
textNodes: null,
callbacks:{
create:
function(){
this.textNodes = [];
// vlayer.destroyFeatures(vlayer.features);
mouseMovements = 0;
},
modify:
function(point, line){
if(mouseMovements++ < 5){
return;
}
var len = line.geometry.components.length;
var from = line.geometry.components[len -2];
var to = line.geometry.components[len -1];
var ls = new OpenLayers.Geometry.LineString([from, to]);
var dist = this.getBestLength(ls);
if(!dist[0]){
return;
}
var total = this.getBestLength(line.geometry);
var label = dist[0].toFixed(3) + " " + dist[1];
var textNode = this.textNodes[len -2] || null;
if(textNode && !textNode.layer){
this.textNodes.pop();
textNode = null;
}
if(!textNode){
var c = ls.getCentroid();
textNode = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(c.x, c.y), {}, {
label: "",
fontColor: "#800517",
fontSize: "13px",
fontFamily: "Tahoma",
fontWeight: "bold",
labelAlign: "cm"
});
this.textNodes.push(textNode);
vlayer.addFeatures([textNode]);
}
textNode.geometry.x = (from.x + to.x) / 2;
textNode.geometry.y = (from.y + to.y) / 2;
textNode.style.label = label;
textNode.layer.drawFeature(textNode);
this.events.triggerEvent("measuredynamic", {
measure: dist[0],
total: total[0],
units: dist[1],
order: 1,
geometry: ls
});
}
}
}),
polygon: new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, {
persist: true,
immediate: true,
handlerOptions: {
layerOptions: {
renderers: renderer,
styleMap: styleMap
}
}
}
)
};
var control;
for(var key in allControls) {
control = allControls[key];
control.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(control);
}
..and just for reference
function handleMeasurements(evt){
var geometry = evt.geometry;
var units = evt.units;
var order = evt.order;
var measure = evt.measure;
var element = document.getElementById('output');
var position = (map.getLonLatPxFromViewPortPx);
var out = "";
if(order == 1){
out += "Distance: " + measure.toFixed(3) + " " + units;
}
else{
out += "Area: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
function toggleControl(element){
vlayer.destroyFeatures(vlayer.features);
for(key in allControls){
var control = allControls[key];
if(element.value == key && element.click){
control.activate();
var label = document.getElementById('output');
var emptyOut = "";
label.innerHTML = emptyOut;
}
else{
control.deactivate();
}
}
}
Been looking for a way to do this and so far have not been able to find anything useful, if you could help me with some suggestions about how to go about this it would be very appreciated. Thanks
EDIT: I am not using GeoExt and am not considering using it. I'm looking for suggestions about how to go about this using only the OpenLayers 2.11 library. Thanks again.
Ok so Im working on a mobile app and I wanna make sure my structure is right so I can continue to add more complex things.
Basicaly I am asking if this is the best way to do this.
this is my controller:
app.controller.newItem = function(object) {
var item = app.view.newItem();
item.cancel.addEventListener("click", function(){
item.win.close();
});
item.save.addEventListener('click', function(e) {
if ( String(name.value).length > 0){
var lastInsert = app.model.addItem({
title: item.name.value,
todo: item.todo.value,
section: 1,
placement: 1,
matrix_id: object.id
});
Ti.App.fireEvent('item_updated', { title: item.name.value, todo: item.todo.value, id: lastInsert, section: '1' });
item.close();
}
});
}
then this is my view:
app.view.newItem = function() {
// create new item window
var win = Titanium.UI.createWindow({
title:'Add a New Item',
backgroundColor:'stripped',
navBarHidden: false
});
// navbar buttons
var cancel = Titanium.UI.createButton( {title:'Cancel'} );
var save = Titanium.UI.createButton( {title:'Save', style:Titanium.UI.iPhone.SystemButton.SAVE,} );
// labels and text areas
var name_label = app.ui.label({
text: "Item Name:",
top: 35,
left: 30
});
var name = app.ui.textArea({
height: name_label.height,
top: name_label.top + 35
});
var todo_label = app.ui.label({
text: "Todo:",
top: name.top + 40,
left: name_label.left
});
var todo = app.ui.textArea({
height: 70,
top: todo_label.top +35
});
//set items
var setItems = function() {
win.setLeftNavButton(cancel);
win.setRightNavButton(save);
win.add(name);
win.add(name_label);
win.add(todo);
win.add(todo_label);
win.open({modal: true, animation: true});
}();
return {
win: win,
cancel: cancel,
save: save
}
}
Should I be adding my event listener in my controller? I really don't want to use the
item = app.view.newItem(); then item.save.addEventListener().. sintax can't I just call them save.addEventListener instead of having the item in front. I can't cause that would make save a global variable right?
I generally put event listeners on buttons when I create the button. Especially when the functions they're executing pertain to information on the view.
app.view.newItem = function() {
// create new item window
var win = Titanium.UI.createWindow({
title:'Add a New Item',
backgroundColor:'stripped',
navBarHidden: false
});
// navbar buttons
var cancel = Titanium.UI.createButton({title:'Cancel'});
cancel.addEventListener('click', function(e) {
win.close();
});
var save = Titanium.UI.createButton({title:'Save', style:Titanium.UI.iPhone.SystemButton.SAVE});
save.addEventListener('click', function(e) {
if (String(name.value).length > 0){
var lastInsert = app.model.addItem({
title: item.name.value,
todo: item.todo.value,
section: 1,
placement: 1,
matrix_id: object.id
});
Ti.App.fireEvent('item_updated', { title: item.name.value, todo: item.todo.value, id: lastInsert, section: '1' });
win.close();
}
});
// labels and text areas
var name_label = app.ui.label({
text: "Item Name:",
top: 35,
left: 30
});
var name = app.ui.textArea({
height: name_label.height,
top: name_label.top + 35
});
var todo_label = app.ui.label({
text: "Todo:",
top: name.top + 40,
left: name_label.left
});
var todo = app.ui.textArea({
height: 70,
top: todo_label.top +35
});
//set items
var setItems = function() {
win.setLeftNavButton(cancel);
win.setRightNavButton(save);
win.add(name);
win.add(name_label);
win.add(todo);
win.add(todo_label);
win.open({modal: true, animation: true});
}();
return {
win: win,
cancel: cancel,
save: save
}
}