Widget / Zipwhip Text

Send texts to user on events.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-elem-zipwhip" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar">
            <div class="btn-group"></div>
            <div class="btn-group">
                <div class="dropdown">
                    <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                </div>
            </div>
        </div> <span class="panel-title" data-toggle="popover">Zipwhip Texting</span>

    </div>
    <div id="com-chilipeppr-elem-zipwhip-body" class="panel-body">
        <div class="container-fluid">
            <p>Text alerts provided by <a href="http://zipwhip.com">Zipwhip</a> cloud texting.</p>
            <div class="form">
                <fieldset>
                    <!-- Form Name -->
                    <!-- <legend>Form Name</legend> -->
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label" for="textinput">Phone Number (US/Can Only)</label>
                        <div class="">
                                <input id="com-chilipeppr-elem-zipwhip-phone" name="textinput" type="text" placeholder="Phone number" class="form-control" value="3134147502"/>
                        </div>
                    </div>
                    <!-- Multiple Checkboxes -->
                    <div class="form-group">
                        <label class="control-label" for="checkboxes">Send Text </label>
                        <div class="">
                            <div class="checkbox" style="margin-top:0;">
                                <label...

CSS

#com-chilipeppr-elem-zipwhip-body .container-fluid {
    padding:0;
}

JavaScript

requirejs.config({
    paths: {
        zipwhipPhoneUtil: 'http://zipwhip.com/resources/js/util/phoneNumberUtil',
        zipwhipPhoneFormat: 'http://zipwhip.com/resources/js/libs/PhoneFormat',
        zipwhipApp: 'http://zipwhip.com/resources/js/App',
        
    },
    shim: {
        zipwhipPhoneFormat: ['zipwhipApp', 'zipwhipPhoneUtil']
    }
});
// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-elem-zipwhip"], function (zipwhip) {
    console.log("test running of " + zipwhip.id);
    zipwhip.init();
    
    function testOnDone() {
        console.log("setting up test publish /done");
        setTimeout(
            function() {
                chilipeppr.publish("/com-chilipeppr-widget-gcode/done", "Duration 00:00:06 Lines 31")
            },
            3000
        );
    }
    //testOnDone();
    
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-elem-zipwhip", ["chilipeppr_ready", /*"zipwhipPhoneFormat",*/ "jquerycookie"], function () {
    return {
        id: "com-chilipeppr-elem-zipwhip",
        url: "http://fiddle.jshell.net/chilipeppr/56X9G/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/56X9G/",
        name: "Element / Zipwhip",
        desc: "This element sends texts to the user upon certain events.",
        foreignSubscribe: {
            "/com-chilipeppr-widget-gcode/done" : "When we see this signal, we send the text indicating the job is done running.",
            "/com-chilipeppr-widget-gcode/onpause" : "When we see this signal, we check if it was from an M6 which comes in the 2nd parameter. If it is, we know to trigger a text to you to do a tool change."
        },
        settings: null,    // stores user settings from cookie
        locale: null,
        init: function () {
            //console.log("zipwhip:", Zw);
            this.formSetup();
            this.forkSetup();
            this.subscribeSetup();
            
            var that = this;
     ...