storkCore

Check-in [fe225ef48a]
Login

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.









































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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.



























































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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.











































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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~.





























>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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~.





































































































































































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<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.



































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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");
}