Source

inbounding / inbounding / dispatch / templates / mailchimp.html

Full commit
{% extends "site-template.html" %}

{% block title %}
Configure a MailChimp Action
{% endblock %}

{% block main %}
<h2 class="">MailChimp</h2>
<br>
<script>
$(document).ready( function () {
  $("#mcconfigform").validate({
  rules: {
    label: {
      required: true
    },
     mailchimpkey: {
      required: true,
      minlength: 36
    },
    mailchimplistid: {
      required: true,
      minlength: 5
    },
    url: {
      required: true,
      url: true
    }
  }
});

  $("#mc-apikey-modal .cancel-btn").click(function () {
      $("#mc-apikey-modal").modal("hide");
   });

  $("#referlistform").validate({
  rules: {
     referuri0: {
      required: true,
      message: "At least 1 refer domain is required."
      }
    }
  });

});
</script>

<div class="container">

  <div class="row">

    <div class="span12">
      <div class="span12">
	<ul class="tabs" data-tabs="tabs">
	  <li class="active"><a href="#mc-config">Configuration</a></li>
	  <!-- <li><a href="#refer-list">Referrer List</a></li> -->
	  <li><a href="#preview">Preview</a></li>
	</ul>
      </div>

      <div class="tab-content">
	<div class="active" id="mc-config">
	  <form method="POST" class="form-stacked" name="mc-config-form" id="mcconfigform">
	    <fieldset>
	      <legend>MailChimp Configuration</legend>
	      {% csrf_token %}
	      <div class="alert-message block-message error hide" data-alert>
		<a class="close" href="#">×</a>
		<p><strong>Oh snap! You got an error!</strong> Change this and that and <a href="#">try again</a>.</p>
		<ul>
		  <li>Duis mollis est non commodo luctus</li>
		  <li>Nisi erat porttitor ligula</li>
		  <li>Eget lacinia odio sem nec elit</li>
		</ul>
		<div class="alert-actions">
		  <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
		</div>
	      </div>

	  <div class="clearfix row">
	    <div class="span6">
	      <label for='label'>Label</label>
	      <div class="input">
		<input name='label' class="span6" type='text' placeholder="Action Label" autofocus="autofocus">
	      </div>
	    </div>
	    
	    <div class="span5">

	    </div>

	  </div><!-- END ROW -->


	  <div class="clearfix row">
	    <div class="span6">
	      <label for='mailchimp-key'>MailChimp API Key</label>
	      <div class="input">
		<input name='mailchimpkey' class="span6" type='text' placeholder="">
	      </div>
	    </div>
	    <div class="span5 helpboxes">
	      <a class="" data-controls-modal="mc-apikey-modal" data-backdrop="static">Get your API Key.</a>

	      <div id="mc-apikey-modal" class="modal hide">

		<div class="modal-header" data-show="false">
		  <a href="#" class="close">×</a>
		  <h3>MailChimp API Instructions</h3>
		</div>
		<div class="modal-body">
		  <p>
		    <ol>
		      <li>Go to MailChimp.com.</li>
		      <li>Select the Account menu.</li>
		      <li>Then Click on "API Keys & Authorized Apps."</li>
		      <li>Copy your API Key. If necessary 'add a key'.</li>
		    </ol>
		  </p>
		</div>
		<div class="modal-footer">
		  <a href="#" class="close btn large secondary">Cancel</a>
		  <a href="https://us2.admin.mailchimp.com/account/api/" target="_new_window" class="btn large primary">Go to MailChimp</a>
		</div>

	      </div>

	    </div>
	  </div>


	  <div class='clearfix row'>
	    <div class="span6">
	      <label for='mailchimp-listid'>MailChimp Unique List ID</label>
	      <div class="input">
		<input name='mailchimplistid' class="span6" type='text' placeholder="">
	      </div>
	    </div>

	    <div class="span5 helpboxes">
	      <a class="" data-controls-modal="mc-apikey-modal" data-backdrop="static">Get your List ID.</a>

	      <div id="mc-apikey-modal" class="modal hide">

		<div class="modal-header" data-show="false">
		  <a href="#" class="close">×</a>
		  <h3>MailChimp List ID Instructions</h3>
		</div>
		<div class="modal-body">
		  <p>
		    <ol>
		      <li>Go to MailChimp.com.</li>
		      <li>Select the Lists menu.</li>
		      <li>Find "settings" for your list. Click on "list settings and unique id."</li>
		      <li>Copy the "unique id" at the bottom of the page.</li>
		    </ol>
		  </p>
		</div>
		<div class="modal-footer">
		  <a href="#" class="close btn large secondary">Cancel</a>
		  <a href="https://us2.admin.mailchimp.com/lists/" target="_new_window" class="btn large primary">Go to MailChimp</a>
		</div>

	      </div>

	    </div>


	  </div>


	  <div class="clearfix row">
	    <div class="span6">
	      <label for='url'>Target URL</label>
	      <div class="input">
		<input name='url' type='text' class="span6" placeholder="What is the URL for this Action Box?">
	      </div>
	    </div>
	    <div class="span5 helpboxes">
	      <a href="#" rel="popover" data-content="Put the webpage URL that you would like to display the Action Box. Such as google.com/path/ which will match all urls with 'google.com/path/'." data-original-title="A URL to your content." data-placement="right">What is a Target URL?</a>
	    </div>
	  </div>

	  <div class='clearfix row'>
	    <div class="span6">
	      <label for='action-box'>What type of Action Box?</label>
	      <div class="input">
		<select name="action-box" class="span6">
		  <option value="2">Floated Action Box</option>
		  <option value="1">Embedded Action Box</option>
		</select>
	      </div>
	    </div>
	    <div class="span5 helpboxes">
	      <a href="#" rel="popover" data-content="A Floated box will is fixed in the bottom right corner of your website. Othewise, you chose the location with Embedded boxes." data-original-title="Floated vs. Embedded." data-placement="right">What is a Action Box?</a>
	    </div>
	  </div>
	</fieldset>

	<fieldset class="refer-fieldset">
	  <legend>Refer Domains</legend>
	  <div class="clearfix row">
	    <div class="span6">
	      <label for='referuri0'>Refer URI</label>
	      <div class="input">
		<input name='referuri0' type='text' class="span6" placeholder="google.com">
	      </div>
	    </div>
	    <div class="span5 helpboxes">
		<a href="#" rel="popover" data-content="Use the domain name of sites that are sending you visitors. Such as google.com or stumbleupon.com without any trailing information. Do not use google.com/path/." data-original-title="Refer's are domain names. " data-placement="right">What is the Refer?</a>
	    </div>
	  </div><!-- end row -->
	</fieldset>


	<div class="actions">
	  <input name='submit' id="mc_config_button" value="Save MailChimp" type="Submit" class="btn large primary">
	</div>
      </form>
      </div>

<!--
      <div id="refer-list">
      <form action="#" class="form-stacked" name="referlistform" id="referlistform">
	{% csrf_token %}
	<div class="actions">
	  <input name='submit' value="Save" type="Submit" class="btn large primary">
	</div>
      </form>
      </div>
-->
      <div id="preview" class="preview">
	<iframe src="http://127.0.0.1:8100/subscribe/" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:; height:;" allowTransparency="true"></iframe>
      </div>
      </div>


    </div>

    <div class="span4">
      <h2>Action Status</h2>

      <div class="onoff">
	<input id="check" name="1" type="checkbox" value="0" />
	<label for="check">Check-me</label>
      </div>

    </div>
    
  </div>

</div>

<script>
  $(function () {
  $("a[rel=popover]")
  .popover({
  offset: 10,
  delayOut: 500
  })
  .click(function(e) {
  e.preventDefault()
  })
  })
</script>

{% endblock %}