Having an issue with adding zulu time and date to popCalendar.js - javascript

I have this application I am implementing the new version of popCalendar.js with and I have added the zulu time and date function. I am not sure what I have wrong here. I have been banging my head against a wall. The console gives me this:
Uncaught TypeError: Object # has no method 'popCalendar'
Now the pages are generated with a python templating library and this is the snippet that creates the calendar:
class DateField(TextField):
"""
A field with a date widget as the input (which provides a browseable way to select the date)
"""
properties = TextField.properties.copy()
Base.addChildProperties(properties, Display.Label, 'calendarTypeLabel')
properties['isZulu'] = {'action':'setIsZulu', 'type':'bool'}
properties['hideTypeLabel'] = {'action':'formatDisplay.call', 'name':'hide', 'type':'bool'}
properties['dateFormat'] = {'action':'classAttribute'}
def __init__(self, id, name=None, parent=None):
TextField.__init__(self, id, name, parent)
self.userInput.style['width'] = '7.5em'
self.dateFormat = "dd-mmm-yyyy"
layout = self.addChildElement(Layout.Horizontal())
layout.addClass("FieldDescription")
self.calendarLink = layout.addChildElement(Display.Image(id + "CalendarLink"))
self.calendarLink.addClass('Clickable')
self.calendarLink.addClass('hidePrint')
self.calendarLink.setValue('images/calendar_icon.gif')
self.calendarLink.addJavascriptEvent('onclick', CallBack(self, "jsOpenCalendar"))
self.calendarTypeLabel = layout.addChildElement(Display.Label())
self.calendarTypeLabel.style['margin-left'] = "4px;"
self.calendarTypeLabel.style['margin-right'] = "4px;"
self.calendarTypeLabel.style['display'] = "block;"
self.setIsZulu(False)
self.formatDisplay = layout.addChildElement(Display.Label())
self.connect('beforeToHtml', None, self, '__updateDisplay__')
def setIsZulu(self, isZulu):
"""
If set to true the calender will use the zulu date
"""
self.isZulu = isZulu
if isZulu:
self.calendarTypeLabel.setText("Z")
else:
self.calendarTypeLabel.setText("LCL")
def __updateDisplay__(self):
if not self.editable():
self.calendarLink.hide()
self.formatDisplay.setText(self.dateFormat)
def jsOpenCalendar(self):
"""
Returns the javascript that will open the calender clientside
"""
if self.isZulu:
calendarType = "zulu"
else:
calendarType = "lcl"
return ("%sCalendar.popCalendar(this, '%s', '%s')" %
(calendarType, self.userInput.fullId(), self.dateFormat))
Factory.addProduct(DateField)
Here is the popCalendar.js I have been working on:
http://snipt.org/AfNh5
Last here is a sample of the HTML that is in my application:
<img src="images/calendar_icon.gif" style="float:left;" name="dateCalendarLink" value="images/calendar_icon.gif" class="Clickable hidePrint WEBlock" onclick="zuluCalendar.popCalendar(this, 'date', 'dd-mmm-yyyy')" id="dateCalendarLink" />

I got it :) I just needed zuluCalendar.show() instead of zuluCalendar.popCalendar() like so:
<img src="images/calendar_icon.gif" style="float:left;" name="dateCalendarLink" value="images/calendar_icon.gif" class="Clickable hidePrint WEBlock" onclick="zuluCalendar.show(this, 'date', 'dd-mmm-yyyy')" id="dateCalendarLink" />

Related

How i get views.py variable to js file?

views.py
def somefunction(request):
var = True
return render(request, dasboard.html)
myfirst.js
function myFunction() {
}
How I get var from views.py into the myfirst.js function?
It isn't possible to give a 100% correct answer without knowing the templating engine you are using (DTL, Jinja2?). However, if var doesn't contain any sensitive/private data, the general solution is to pass var to your html template through the context parameter of the render function:
# views.py
views.py
def somefunction(request):
var = True
context = { "var": var }
return render(request, dasboard.html, context)
Then, expose var as a data-* attribute on a html element in your template (the exact implementation will change based on the templating engine you are using):
<!-- dashboard.html -->
<div id="info" data-var="{{ var }}" >
...
</div>
Finally, in your javascript file, you simply retrieve the same html element and access var through the special dataset property:
// myfirst.js
function myFunction() {
var infoElement = document.getElementById("info");
var varValue = infoElement.dataset.var;
}

How to change the display format on a P13nItem TimePicker/DatePicker?

I'm trying to change the display format on the DatePicker/TimePicker used by the sap.m.P13nItem when the selected column type is date/time.
I have tried changing the aggregation P13nItem from the P13nFilterPanel in order to include the property formatSettings, but it didn't work.
Here is a sample of my XML view code.
<P13nFilterPanel id="filterPanel" visible="true" type="filter" containerQuery="true" items="{
path: 'SchedulingFilter>/ColumnCollectionFilter'
}" filterItems="{
path: 'SchedulingFilter>/FilterItems'
}">
<P13nItem columnKey="{SchedulingFilter>columnKey}" text="{SchedulingFilter>label}" type="{SchedulingFilter>type}" maxLength="{SchedulingFilter>maxLength}" formatSettings="{SchedulingFilter>formatSettings>" />
<filterItems>
<P13nFilterItem columnKey="{SchedulingFilter>keyField}" operation="{SchedulingFilter>operation}" value1="{SchedulingFilter>value1}" value2="{SchedulingFilter>value2}" exclude="{SchedulingFilter>exclude}" />
</filterItems>
</P13nFilterPanel>
Here is an extract of how I'm filling the bound data.
$.each(columnsKeys, function (i, item) {
const columnData = {};
const columnDescriptionItem = columnDescription[item];
columnData.columnKey = item;
columnData.text = columnDescriptionItem.label;
columnData.type = columnDescriptionItem.type;
columnData.formatSettings = {
pattern: 'yyyy/MM/dd',
UTC: false
};
columnData.maxLength = columnDescriptionItem.maxLength;
columnData.visible = columnDescriptionItem.visible;
columnData.index = columnDescriptionItem.index;
columnData.isEditable = columnDescriptionItem.isEditable;
columnData.isFilter = columnDescriptionItem.isFilter;
columnData.isSorter = columnDescriptionItem.isSorter;
columnsData.push(columnData);
});
The default behavior of the control displays the time/date fields as:
https://ibb.co/JcJJZhJ.
Edit: I discovered that the default behavior is based on the user's locale. I'm not considering the user's locale to change the display format on the others parts of my application.
I want to achieve, for example, the display formats "yyyy/MM/dd" and "hh:mm:ss" on these fields.
I had to extend the P13nConditionPanel (this one is responsible for the time/date components instantiation) and the P13nFilterPanel (it creates the P13nConditionPanel) on version 1.44.6 of SAPUI5 in order to solve this problem. I only had to add the necessary parameters to the DatePicker and TimePicker constructors (as shown below).
case "date":
oConditionGrid.oFormatter = sap.ui.core.format.DateFormat.getDateInstance();
params.displayFormat = DateFormatter.displayFormat();
oControl = new sap.m.DatePicker(params);
break;
case "time":
oConditionGrid.oFormatter = sap.ui.core.format.DateFormat.getTimeInstance();
params.displayFormat = TimeFormatter.getDisplayFormat();
oControl = new sap.m.TimePicker(params);
I posted my customized extended components code on pastebin:
Customized P13nConditionPanel
Customized P13nFilterPanel
I will later open an enhancement request on openui5 Github.

Integrating typeahead.js with Django apps

I'm fairly new to Django and am trying to integrate typeahead.js to my Django app. I want to be able to search through the field 'name' in my local sql2lite DB which has around 15,000 entry. The table name is called 'institution'.
My html is able to find typeahead.js and have the following script to run it:
<script type="text/javascript" src="{% static 'js/typeahead/typeahead.jquery.js' %}">
$(document).ready(function() {
$("#InstitutionsSearch").typeahead({
name: 'Institutions',
remote: 'profile/account_names_autocomplete/?q=%QUERY'
What do I need to do with remote to set the search on a field in my DB? I read other threads but it isn't clear to me what remote actually do. Do I have to engage Bloodhound to make this work?
The query is reach my View printing hello0 but no more.
My view:
class UserAccountsUpdate(UpdateView):
context_object_name = 'variable_used_in `add_user_accounts.html`'
form_class = AddUserAccountsForm
template_name = 'add_user_accounts.html'
success_url = 'summary.html'
print "hello0"
def account_name_autocomplete(request):
print "hello1"
query = request.GET.get('q','')
if query:
print "hello2"
results = Insitutions.objects.filter(name__istartswith=query)
result_list = []
for item in results:
result_list.append(item.short)
else:
result_list = []
response_text = json.dumps(result_list, separators=(',',':'))
return HttpResponse(response_text, content_type="application/json")
#get object
def get_object(self, queryset=None):
return self.request.user
Thanks

EmberJS displaying a formatted date

I'm trying to display a formatted date in EmberJS, but it's outputting a blank string.
{{#each}}
{{formatedDrawDate}}
{{/each}}
Output
<script id="metamorph-9-start" type="text/x-placeholder"></script>
<script id="metamorph-9-end type="text/x-placeholder"></script>
CoffeeScript
App.GroupsController = Ember.ArrayController.extend
formatedDrawDate: (->
moment(#get 'drawDate').format 'MMM Do YY'
).property('drawDate')
The data:
App.GROUPS = [
{
id: 1
drawDate: new Date()
},
# ...
]
My Route:
App.GroupsRoute = Ember.Route.extend
model: ->
App.GROUPS
I can see a cleanly formatted date in the console under the controller. I'm not sure why it's not displaying, though.
You need to use an itemController and put your formattedDrawDateproperty on it. Your code as it is now simply adds a single property to your controller - not to each of it's content.
App.GroupsController = Ember.ArrayController.extend
itemController: 'group'
App.GroupController = Ember.ObjectController.extend
formatedDrawDate: (->
moment(#get 'drawDate').format 'MMM Do YY'
).property('drawDate')
The documentation has a bit more info.

Prevent datepicker values from being stripped from params

I'm using the bootstrap-datepicker.js (http://www.eyecon.ro/bootstrap-datepicker/) to set the date range for a table in a rails view.
calls.html.erb
<form class="form-horizontal daterange">
<input type="text" data-date-format="yyyymmdd" id="start-date" name="start">
<span class="add-on">-</span>
<input type="text" data-date-format="yyyymmdd" id="end-date" name="end">
<button type="submit" class="btn submit-date">Submit</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#start-date').datepicker({
format: 'yyyy-mm-dd'
});
$('#end-date').datepicker({
format: 'yyyy-mm-dd'
});
});
</script>
It passes params[:start] and params[:end] into the URL that I use to set the date range for Twilio API calls.
Ex. /twilio/calls/?start=2013-03-01&end=2014-01-06
Ever since I created the following routes to paginate the api calls:
routes.rb
match 'twilio/calls' => 'twilio#calls', :as => :twilio_page
match 'twilio/calls/:page_id' => 'twilio#calls', :as => :twilio_page
Whenever I advance to the next page of results, it strips out the date range values.
How do I preserve the :start/:end parameters?
twilio_controller.rb Update - added start/end data
if params[:start].nil?
#start_date = DateTime.parse((Date.today - 7).to_s).strftime("%Y-%m-%d")
#end_date = DateTime.parse((Date.today - 1).to_s).strftime("%Y-%m-%d")
else
#start_date = params[:start]
#end_date = params[:end]
end
#user = current_user
#account_sid = #user.twilio_account_sid
#auth_token = #user.twilio_auth_token
#page_size = 5
#page = params[:page_id] || 0
#sub_account_client = Twilio::REST::Client.new(#account_sid, #auth_token)
#subaccount = #sub_account_client.account
#recordings = #subaccount.recordings
#recordingslist = #recordings.list({:page_size => #page_size, :page => #page, :"date_created<" => #end_date, :"date_created>" => #start_date})
According to the canonical Rails guides:
The params will also include any parameters from the query string.
Therefore, you want to eliminate the first route, which doesn't allow for any parameters:
# config/routes.rb
match 'twilio/calls/:page_id' => 'twilio#calls', :as => :twilio_page
To illustrate, suppose you are trying to access /twilio/calls/1?start=2013-03-01&end=2014-01-06. The query string is actually parsed, such that you have access to not only the page_id parameter, but also start and end.
If you want to maintain a default route, e.g., twilio/calls, you can declare a route redirect as follows:
# config/routes.rb
get '/twilio/calls', to: redirect('/twilio/calls/1')
This will automatically reroute all requests for /twilio/calls to /twilio/calls/1.
UPDATE:
To clarify, URL query parameters are parameterized and fed to the corresponding controller action as members of the params hash. Therefore, given the path /twilio/calls/1?start=2013-03-01&end=2014-01-06, you'll have access to params[:page_id], params[:start], and params[:end]. You'll need to pass the latter two to your API call in your action:
#recordingslist = #recordings.list({:page_size => #page_size,
:page => #page,
:"date_created<" => params[:start],
:"date_created>" => params[:end]
})
UPDATE:
In order to persist the query parameters across page views, you can concatenate the argument passed to twilio_page_path with the query string:
twilio_page_path((#page.to_i + 1).to_s + "?start=" + params[:start] + "&end=" + params[:end]) %>

Categories