storkCore: Check-in [fe225ef48a]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview

Comment:	Some old storkCore examples
Timelines:	family \| ancestors \| descendants \| both \| trunk
Files:	files \| file ages \| folders
SHA1:	fe225ef48ad1a53f1146448252078ad8cdae0efa
User & Date:	setok@scred.com 2013-09-25 14:15:37

Context

2013-09-25
14:24		Merge branch 'master' into mistress Conflicts: storkCore.js check-in: 1472fc290a user: setok@scred.com tags: trunk
14:15		Some old storkCore examples check-in: fe225ef48a user: setok@scred.com tags: trunk
13:40		Added some utility things. But basically ignore this as we're bringing in the much updated storkCore. check-in: f2612cb6c8 user: setok@scred.com tags: trunk

Changes

Hide Diffs Unified Diffs Ignore Whitespace Patch

Added budgeter.js.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

var Controller = clone(Stork);

var nextElementID = 0;

var BudgetModel = clone(Stork);

BudgetModel.categories = [
    {
	name: "Accommodation",
	budgetTotal: "6500",
	lines: [
	    {
		title: "Hotel", 
		budget: "6500"
	    }
	]
    },
    {
	name: "Transport",
	budgetTotal: "2500",
	lines: [
	    {
		title: "Diesel",
		budget: "1500"
	    },
	    {
		title: "Ferries",
		budget: "1000"
	    }
	]
    }
];

var BudgetView = clone(StorkView);


BudgetView.model = BudgetModel;


BudgetView.connectDesign = function(elementID) {
    this.templateID = elementID;
    this.baseElement = document.getElementById(elementID);
    this.budgetTable = document.getElementById(elementID + "_budgetTable");
    categoryRowTemplate = document.getElementById(elementID  + 
					       "_categoryRowTemplate");
    this.categoryRowTemplate = categoryRowTemplate.cloneNode(true);

    // Make the budget row an orphan. We'll clone and use it later.
    this.budgetRowTemplate = document.getElementById(elementID + 
						     "_budgetRowTemplate");
    this.budgetRowTemplate.parentNode.removeChild(this.budgetRowTemplate);
    /*
    categoryTextTemplate = document.getElementByID(elementID +
						"_categoryTextTemplate");
    categoryTotalTemplate = document.getElementByID(elementID +
						    "_categoryTotalTemplate");
    */
}


BudgetView.update = function() {
    categories = this.model.categories;

    emptyElement(this.budgetTable);
    for (i=0; i < categories.length; i++) {
	category = categories[i];
	categoryRow = this.categoryRowTemplate.cloneNode(true);
	cells = categoryRow.getElementsByTagName("td");
	
	// Set the category title and total budgeted sum
	emptyElement(cells[0]);
	emptyElement(cells[cells.length - 1]);
	cells[0].appendChild(document.createTextNode(category.name));
	cells[cells.length - 1].appendChild(document.
					    createTextNode(category.
							   budgetTotal));
	this.budgetTable.appendChild(categoryRow);

	lines = category.lines;
	for (i=0; i < lines.length; i++) {
	    line = lines[i];
	    budgetRow = this.budgetRowTemplate.cloneNode(true);

	    // Add cloned template to document so we can look up the elements
	    // we want to change based on their IDs.
	    this.budgetTable.appendChild(budgetRow);
	    title = document.getElementById(this.templateID + 
					    "_budgetRowTitleTemplate");
	    emptyElement(title);
	    title.appendChild(document.createTextNode(line.title));
	    title.id = "_budgetRowTitle#" + nextElementID;
	    nextElementID++;

	    sum = document.getElementById(this.templateID + 
					  "_budgetRowSumTemplate");
	    sum.value = line.budget;
	    sum.id = "_budgetRowSum#" + nextElementID;
	}
    }
}

Added examples/budgeter.html.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>Test Budgeting</title>
</head>

<body>
<script type="text/javascript" src="../storkCore.js"></script>
<script type="text/javascript" src="../budgeter.js"></script>
<div id="test">
<table id="test_budgetTable">
  <tr style="font-weight: bold;" id="test_categoryRowTemplate">
    <td>Category</td>
    <td>242</td>
  </tr>
  <tr id="test_budgetRowTemplate">
    <td id="test_budgetRowTitleTemplate">Sub-Category</td>
    <td><input type="text" id="test_budgetRowSumTemplate" value="242"></td>
  </tr>
</table>

<script>
BudgetView.connectDesign("test");
BudgetView.update();
</script>

<hr>
<address></address>
<!-- hhmts start --> Last modified: Tue Jan 11 20:54:15 EET 2011 <!-- hhmts end -->
</body> </html>

Added examples/fieldRepeater.html.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>Test Repeater</title>
</head>

<body>
<script type="text/javascript" src="../storkCore.js"></script>
<script type="text/javascript" src="../repeater.js"></script>

<ul>
  <li id="testfield">Foobar</li>
</ul>

<span id="testadd">Add</span>

<script>
EditableListView.connectDesign("testfield", "testadd");
</script>

</body>
</html>

Added examples/fieldRepeater.html~.

>
>
>
>
>
>
>
>
>
>
>
>
>
>

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>Test Repeater</title>
</head>

<body>
<script type="text/javascript" src="../storkCore.js"></script>
<script type="text/javascript" src="../repeater.js"></script>

<ul>
  <li>Foobar</li>
</ul>
</body>
</html>

Added examples/tabbedForm.html~.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

<html>
<body>
<script type="text/javascript">
var StorkCoreRoot = "../"
</script>

<script type="text/javascript" src="../storkCore.js"></script>

<div style="text-align: left; margin-left: 3em; display: inline-block;">

  <h3>Overview</h3>

  <p>
    {% if balance.is_zero %}
    {{ pool.name }} does not owe 
    <a href="{% url user claimant.username %}">
      {{ claimant.displayname }}</a>
    anything.      
    {% else %}
    {% if balance.is_positive %}      
    <a href="{% url user claimant.username %}">
      {{ claimant.displayname }}</a>
    owes the group {{ account.balance_balance }}.
    {% else %}
    {{ pool.name }} owes {{ balance.negate }} to 
    <a href="{% url user claimant.username %}">
      {{ claimant.displayname }}</a>.
    {% endif %}
    {% endif %}
  </p>

  {# Only show form if group owes user something #}
  {% if balance.is_zero %}
  <div class="multi_form_select" id="reimbursementDialog" 
       style="display: none;">
  </div>
  {% endif %}
  {% if balance.is_positive %}
  <div class="multi_form_select" id="reimbursementDialog" 
       style="display: none;">
  </div>
  {% else %}
  <div class="multi_form_select" id="reimbursementDialog" 
       style="display: inline-block; text-align: left; margin-left: 2.5em;">
    <div class="content" style="text-align: center;">
      <p>
	Loading
      </p>
      <img src="{{ MEDIA_URL }}/images/loading.gif">
    </div>
  </div>
  {% endif %}

  <!-- Container div for forms to be showed in 'reimbursementDialog' by
       storkCore tabbed view -->
  <div style="display:none;">
    <form method="post" id="paypalForm"
	  action="{% url expense-claims-manage-pay pool.name account.code %}">
    <div class="form_content" style="min-width: 25em; min-height: 11em;">
      <center>
	    <div class="info_layout">
	      <div class="info">
		Reimburse by direct PayPal payment!
	      </div>
	    </div>

      <table style="margin-top: 1.5em;">
      {% with paypal_form as form %}
      {% include "form_snippet.html" %}
      {% endwith %}
      </table>
      </center>
    </div>  <!-- form_content -->
    <div class="form_buttons">
	  <input type="hidden" name="form" value="paypal">
	  <input type="submit" name="paypal" value="Pay">
    </div>
    </form>

    <form method="post" id="elsewhereForm"
	  action="{% url expense-claims-manage-pay pool.name account.code %}">
      <div class="form_content" style="min-width: 25em; min-height: 11em;">
	<center>
	    <div class="info_layout">
	      <div class="info">
		Use this form if reimbursed outside Scred
	      </div>
	    </div>

      <table>
	{% with payment_form as form %}
	{% include "form_snippet.html" %}
	{% endwith %}
	</table>
      </center>
      </div>  <!-- form_content -->
      <div class="form_buttons">
	    <input type="hidden" name="form" value="payment">
	    <input type="submit" name="payment" value="Record Payment">
      </div>
    </form>
  </div>

    <!-- Storkcore tab selection -->
    <script type="text/javascript">

    // This is called once document has loaded.
    loadedCallback = function() {
	// Controller for the view selection
        formSelectController = clone(ViewSelectController);  
        formSelectController.viewOptions = [
	    {text: "Pay with PayPal", value: "paypal"},
	    {text: "Paid Elsewhere", value: "elsewhere"}]
	formSelectController.selectedView = "paypal";
      
	formSelectController.setViewElement("paypal", "paypalForm");
	formSelectController.setViewElement("elsewhere", "elsewhereForm");

	// View for the view selection
        formSelect = clone(ClickViewSelect);
        formSelect.parentElement = 
	    document.getElementById("reimbursementDialog");
        formSelect.delegate = formSelectController;
        formSelect.render();
     }

     window.onload = loadedCallback;
     </script>

    <table class="list_report" style="margin-top: 2em;" width="70%" border="0">
      <caption>Logged Expense Claims &amp; Reimbursements</caption>
      <tr>
	<th>Date</th>
	<th>Type</th>
	<th>Sum</th>
	<th>Description</th>
	<th></th>
	<th></th>
      </tr>

      {% for t in transfers %}
      <tr>
	<td>
	  <span style="white-space: nowrap;">
	    {{ t.date|date:"M j," }}
	  </span>
	  {{ t.date|date:"Y" }}
	</td>
	<td>
	  {# FIXME: We should derive this from the transaction type. #}
	  {% if t.value_as_money.is_positive %}
	  Reimbursement
	  {% else %}
	  Expense claim
	  {% endif %}
	</td>
	<td>
	  <span class="sum">
	    {# FIXME: This should also happen using the transaction type. #}
	    {% if t.value_as_money.is_positive %}
	    {{ t.value_as_money }}
	    {% else %}
	    {{ t.value_as_money.negate }}
	    {% endif %}
	  </span>
	</td>
	<td>
	  {{ t.transaction.description }}
	</td>
	<td valign="center">
	  <div style="white-space: nowrap; vertical-alignment: middle;">
	    {% if t.transaction.get_attachments %}
	    <a href="{% url mcng-transaction pool.name t.transaction.code %}">
	      <img src="{{ MEDIA_URL }}/images/Paperclip4-black-24.png" 
		   style="border: solid black 0px; vertical-align: middle;"
		   alt="Attachments">
	    </a>
	    <span style="vertical-align: middle;">
	      {{ t.transaction.get_attachments|length }}
	    </span>
	  </div>
	  {% endif %}
	<td style="white-space: nowrap;">	  
	  <a class="small_button" 
	     href="{% url mcng-transaction pool.name t.transaction.code %}">
	    View
	  </a>
	  &nbsp;
      </tr>
      {% endfor %}
    </table>

</div>

Added repeater.js.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

var EditableListView = clone(StorkView);

EditableListView.connectDesign = function(repeatedID, addButtonID) {
    var me = this;
    
    this.templateID = repeatedID;
    this.baseElement = document.getElementById(repeatedID);
    this.parent = this.baseElement.parentNode;
    
    // Make the budget row an orphan. We'll clone and
    use it later.
    this.parent.removeChild(this.baseElement);
    
    this.addButton = document.getElementById(addButtonID);
    this.addButton.onclick = function(event) {
        return me.handleAdd(event);
    }
}
    
			
EditableListView.updateIDs(element) {
    id = element.id;
    
}
				
				
EditableListView.handleAdd = function() {
    var newElement = this.baseElement.cloneNode(true);
    this.updateIDs(newElement);
    this.parent.appendChild(newElement);
    //alert("add");
}