Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script type="text/javascript">
RED.nodes.registerType('apn-notification', {
category: 'push',
color: '#a6bbcf',
defaults: {
name: { value: "" },
title: { value: "" },
body: { value: "" },
action: { value: "" },
badge: { value: "" },
sound: { value: "" },
contentAvailable: { value: "" },
mutableContent: { value: "" },
urlArgs: { value: "" },
category: { value: "" },
expiry: { value: "* * 1 *" },
priority: { value: "10" },
payload: { value: "" }
},
inputs: 1,
outputs: 1,
icon: "apple_icon.png",
label: function () {
return this.name || "apn-notification";
},
oneditprepare: function () {
var that = this;
var usingAdvancedOptions = this.title || this.action ||
this.mutableContent || this.urlArgs || this.category
/**
* Advanced options
*/
function setupAdvancedOptions() {
// show/hide advanced options
var showadvanced = !usingAdvancedOptions;
var showall = function () {
showadvanced = !showadvanced;
if (showadvanced) {
$("#advanced-options").show();
$("#advanced").html('<label for="node-advanced" style="width:200px !important"><i class="fa fa-minus-square"></i> Advanced options</label>');
}
else {
$("#advanced-options").hide();
$("#advanced").html('<label for="node-advanced" style="width:200px !important"><i class="fa fa-plus-square"></i> Advanced options ...</label>');
}
};
showall();
$("#advanced").click(function () { showall(); });
}
setupAdvancedOptions();
/**
* Badge
*/
function setupBadge() {
// enable/disable badge
$("#badge-type-select").change(function () {
var id = $("#badge-type-select").val();
$(".badge-row").hide();
$("#badge-row-" + id).show();
})
// set spinner
$("#badge-count").spinner({
min: 0
});
// if we have a saved badge count
var badgeCount = $("#node-input-badge").val();
if (badgeCount.length > 0) {
// enable the badge field and set the counter
$("#badge-count").val(badgeCount);
$("#badge-type-select").val("enabled");
$("#badge-type-select").change();
}
}
setupBadge();
/**
* Expiry
*/
function setupExpiry() {
// populate the expiry list
function populateUnitField(unit, maxValue) {
for (var i = 1; i <= maxValue; i++) {
$("#expiry-" + unit + "-select").append($("<option>", {
value: i,
text: i
}))
}
}
populateUnitField("minutes", 60)
populateUnitField("hours", 24)
populateUnitField("days", 7)
populateUnitField("weeks", 4)
// show the selected unit field when selected
$("#expiry-unit-select").change(function () {
var units = $("#expiry-unit-select").val();
$(".expiry-unit").hide();
$("#expiry-" + units + "-select").show();
})
// the expiry value will be saved as a string with a cron like format
// minutes hours days weeks
// e.g. if we wanted 2 days expiration, the string would be
// * * 2 *
function setUnitValue(unit, value) {
if (value > 0) {
$("#expiry-unit-select").val(unit);
$("#expiry-" + unit + "-select").val(value);
}
}
var expiry = $("#node-input-expiry").val();
var units = expiry.split(" ").map(function (unit) {
return Number(unit)
})
setUnitValue("minutes", units[0])
setUnitValue("hours", units[1])
setUnitValue("days", units[2])
setUnitValue("weeks", units[3])
$("#expiry-unit-select").change();
}
setupExpiry();
/**
* URL args
*/
function setupURLArgs() {
// resizes the value field
function resizeURLArgsItem(item, index) {
var valueField = item.find(".node-input-urlArgs-value");
valueField.typedInput("width", Math.max(item.width(), 370) - 16)
}
// create the editable list
$("#node-input-urlArgs-container").css('min-height', '150px').editableList({
addItem: function (container, i, opt) {
if (!opt.hasOwnProperty("value")) {
opt.value = "";
}
// create row div
var row = $('<div/>').appendTo(container);
// create the value field
var valueField = $('<input/>', {
class: "node-input-urlArgs-value",
type: "text",
style: "margin-left: 5px;"
}).appendTo(row).typedInput({
default: 'str',
types: ['str']
});
// set the value
valueField.typedInput("value", opt.value);
// resize the field
resizeURLArgsItem(container)
},
resizeItem: resizeURLArgsItem,
sortable: true,
removable: true
})
// show/hide the url args editable list
function updateURLArgsOptions() {
if ($("#use-urlArgs").is(':checked')) {
$("#node-row-urlArgs").show();
} else {
$("#node-row-urlArgs").hide();
}
}
$("#use-urlArgs").prop("checked", that.urlArgs.length > 0);
updateURLArgsOptions();
// show/hide on checkbox click
$("#use-urlArgs").on("click", function () {
updateURLArgsOptions();
});
// add existing values
try {
var urlArgs = JSON.parse(that.urlArgs);
for (var i = 0; i < urlArgs.length; i++) {
var arg = urlArgs[i];
$("#node-input-urlArgs-container").editableList('addItem', { value: arg });
}
} catch (err) { }
} // -- setupURLArgs
setupURLArgs()
function setupPayload() {
// create the editable list
$("#node-input-payload-container").css('min-height', '150px').editableList({
addItem: function (container, i, opt) {
if (!opt.hasOwnProperty("key")) {
opt.key = "";
}
if (!opt.hasOwnProperty("value")) {
opt.value = "";
}
if (!opt.hasOwnProperty("type")) {
opt.type = "str";
}
// create row div
var row = $('<div/>').appendTo(container);
// create the key/value fields
var keyField = $('<input/>', {
class: "node-input-payload-key",
type: "text",
style: "margin-left: 5px; width: 30%"
}).appendTo(row).typedInput({
default: 'str',
types: ['str']
});
var valueField = $('<input/>', {
class: "node-input-payload-value",
type: "text",
style: "margin-left: 5px; width: 65%;"
}).appendTo(row).typedInput({
default: opt.type,
types: ['str', 'num', 'bool', 'json']
});
// set the value
keyField.typedInput("value", opt.key)
valueField.typedInput("value", opt.value)
},
sortable: true,
removable: true
})
// show/hide the payload editable list
function updatePayloadOptions() {
if ($("#use-payload").is(':checked')) {
$("#node-row-payload").show();
} else {
$("#node-row-payload").hide();
}
}
$("#use-payload").prop("checked", that.payload.length > 0);
updatePayloadOptions();
// show/hide on checkbox click
$("#use-payload").on("click", function () {
updatePayloadOptions();
});
// add existing values
try {
var payload = JSON.parse(that.payload);
for (var i = 0; i < payload.length; i++) {
var opt = payload[i];
$("#node-input-payload-container").editableList('addItem', opt);
}
} catch (err) { }
} // -- setupPayload
setupPayload()
},
oneditsave: function () {
// save the badge count
if ($("#badge-type-select").val() == "enabled") {
$("#node-input-badge").val($("#badge-count").val());
} else {
$("#node-input-badge").val(null);
}
// save the url args
var urlArgs = [];
if ($("#use-urlArgs").is(':checked')) {
var urlArgItems = $("#node-input-urlArgs-container").editableList('items');
urlArgItems.each(function (i) {
var value = $(this).find(".node-input-urlArgs-value").typedInput("value");
urlArgs.push(value);
})
}
if (urlArgs.length > 0) {
$("#node-input-urlArgs").val(JSON.stringify(urlArgs));
} else {
$("#node-input-urlArgs").val(null);
}
// save the payload
var payload = [];
if ($("#use-payload").is(':checked')) {
var payloadItems = $("#node-input-payload-container").editableList('items');
payloadItems.each(function (i) {
var key = $(this).find(".node-input-payload-key").typedInput("value");
var value = $(this).find(".node-input-payload-value").typedInput("value");
var type = $(this).find(".node-input-payload-value").typedInput("type");
var opt = {
key: key,
value: value,
type: type
}
payload.push(opt);
})
}
if (payload.length > 0) {
$("#node-input-payload").val(JSON.stringify(payload));
} else {
$("#node-input-payload").val(null);
}
// save the expiry
var expiry = "";
var units = $("#expiry-unit-select").val();
var value = $("#expiry-" + units + "-select").val();
if (units == "minutes") {
expiry = value + " * * *"
} else if (units == "hours") {
expiry = "* " + value + " * *"
} else if (units == "days") {
expiry = "* * " + value + " *"
} else if (units == "weeks") {
expiry = "* * * " + value
}
$("#node-input-expiry").val(expiry);
},
oneditresize: function (size) {
// just trigger the resize
$("#node-input-urlArgs-container").editableList('height', $("#node-input-urlArgs-container").height());
}
});
</script>
<script type="text/x-red" data-template-name="apn-notification">
<!--Message text-->
<div class="form-row">
<label for="node-input-body"><i class="fa fa-comment"></i> Text</label>
<input type="text" id="node-input-body">
</div>
<!--Sound-->
<div class="form-row">
<label for="node-input-sound"><i class="fa fa-volume-up"></i> Sound</label>
<select type="text" id="node-input-sound">
<option value="">Disabled</option>
<option value="default">Enabled</option>
</select>
</div>
<!--Badge-->
<div class="form-row">
<label for="badge-type-select"><i class="fa fa-certificate"></i> Badge</label>
<select id="badge-type-select">
<option value="disabled">Disabled</option>
<option value="enabled">Enabled</option>
</select>
<span id="badge-row-enabled" class="badge-row hidden"> Count <input id="badge-count" value="1"></span>
<input type="hidden" id="node-input-badge">
</div>
<!--Expiry-->
<div class="form-row">
<label for="node-input-expiry"><i class="fa fa-calendar"></i> Expires</label>
<select type="hidden" class="expiry-unit" id="expiry-minutes-select"></select>
<select type="hidden" class="expiry-unit" id="expiry-hours-select"></select>
<select type="hidden" class="expiry-unit" id="expiry-days-select"></select>
<select type="hidden" class="expiry-unit" id="expiry-weeks-select"></select>
<select type="text" id="expiry-unit-select">
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
</select>
<input type="hidden" id="node-input-expiry">
</div>
<!--Content available-->
<div class="form-row">
<label for="node-input-contentAvailable" class="checkbox-label"><i class="fa fa-cloud-download"></i> Content available </label>
<input type="checkbox" class="checkbox-input" id="node-input-contentAvailable">
</div>
<!--Payload-->
<div class="form-row">
<input type="checkbox" id="use-payload" class="checkbox-input">
<label for="use-payload" style="width: auto"> Payload</label>
<input type="hidden" id="node-input-payload">
<div id="node-row-payload" class="form-row node-input-payload-container-row hide">
<ol id="node-input-payload-container"></ol>
</div>
</div>
<!--Advanced options-->
<div class="form-row" id="advanced">
</div>
<div id="advanced-options">
<!--Title-->
<div class="form-row advanced-option">
<label for="node-input-title"><i class="fa fa-header"></i> Title</label>
<input type="text" id="node-input-title">
</div>
<!--Priority-->
<div class="form-row advanced-option">
<label for="node-input-priority"><i class="fa fa-exclamation"></i> Priority</label>
<select type="text" id="node-input-priority">
<option value="10">High</option>
<option value="5">Normal</option>
</select>
</div>
<!--Action-->
<div class="form-row advanced-option">
<label for="node-input-action"><i class="fa fa-arrow-right"></i> Action</label>
<input type="text" id="node-input-action">
</div>
<!--Category-->
<div class="form-row advanced-option">
<label for="node-input-category"><i class="fa fa-list"></i> Category</label>
<input type="text" id="node-input-category">
</div>
<!--Mutable content-->
<div class="form-row advanced-option">
<label for="node-input-mutableContent" class="checkbox-label"><i class="fa fa-pencil-square-o"></i> Mutable content </label>
<input type="checkbox" class="checkbox-input" id="node-input-mutableContent">
</div>
<!--URL Args-->
<div class="form-row advanced-option">
<input type="checkbox" id="use-urlArgs" class="checkbox-input">
<label for="use-urlArgs" style="width: auto"> Safari URL Args</label>
<input type="hidden" id="node-input-urlArgs">
<div id="node-row-urlArgs" class="form-row node-input-urlArgs-container-row hide">
<ol id="node-input-urlArgs-container"></ol>
</div>
</div>
</div>
<!--Name-->
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script>
<style>
#node-input-priority,
#node-input-sound,
#badge-type-select {
width: 100px;
}
#badge-count {
width: 30px;
display: inline-block;
}
.expiry-unit {
width: 60px
}
#expiry-unit-select {
width: 100px;
display: inline-block;
}
.checkbox-input {
display: inline-block !important;
width: auto !important;
vertical-align: top !important;
}
.checkbox-label {
width: auto !important;
}
.advanced-option {
margin-left: 16px;
}
</style>
<script type="text/x-red" data-help-name="apn-notification">
<p>A notification node which holds all the apn notification properties.</p>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment