| 1 | /** |
|---|
| 2 | * Represents an incident. (Does not contain events. Event links itself to Incident.) |
|---|
| 3 | * @param time {Time} |
|---|
| 4 | * @param numbers {Number} |
|---|
| 5 | * @param title {String} |
|---|
| 6 | * @param summary {String} |
|---|
| 7 | */ |
|---|
| 8 | function Incident(time, number, title, summary) |
|---|
| 9 | { |
|---|
| 10 | //========== public read-only members ==========// |
|---|
| 11 | this.time = time; |
|---|
| 12 | this.number = number; |
|---|
| 13 | this.title = title; |
|---|
| 14 | this.summary = summary; |
|---|
| 15 | this.expanded = true; |
|---|
| 16 | |
|---|
| 17 | //========== public methods ==========// |
|---|
| 18 | this.html = html; |
|---|
| 19 | this.expandAction = expandAction; |
|---|
| 20 | |
|---|
| 21 | //========== private methods ==========// |
|---|
| 22 | this.formatHeader = formatHeader; |
|---|
| 23 | this.expandOption = expandOption; |
|---|
| 24 | this.expandOptionSymbol = expandOptionSymbol; |
|---|
| 25 | |
|---|
| 26 | /** |
|---|
| 27 | * @return The html representation of this incident; |
|---|
| 28 | */ |
|---|
| 29 | function html() |
|---|
| 30 | { |
|---|
| 31 | return "<table class='incident'>" + |
|---|
| 32 | "<tr>" + |
|---|
| 33 | "<td class='incidentHeader'>" + this.formatHeader() + "</td>" + |
|---|
| 34 | "</tr>" + |
|---|
| 35 | "<tr>" + |
|---|
| 36 | "<td class='incidentSummary' id='summary" + this.number + "'>" + |
|---|
| 37 | (this.expanded ? this.summary : "") + "</td>" + |
|---|
| 38 | "</tr>" + |
|---|
| 39 | "</table>"; |
|---|
| 40 | } |
|---|
| 41 | |
|---|
| 42 | |
|---|
| 43 | /** |
|---|
| 44 | * @return The html of the rectangle that contains the expand/collapse symbol, time, |
|---|
| 45 | * incident number |
|---|
| 46 | * and incident title. |
|---|
| 47 | */ |
|---|
| 48 | function formatHeader() |
|---|
| 49 | { |
|---|
| 50 | return "<table class='incidentHeader'>" + |
|---|
| 51 | "<tr class='incidentHeader'>" + |
|---|
| 52 | "<td class='incidentExpandOption'>" + this.expandOption() + "</td>" + |
|---|
| 53 | "<td class='incidentTime'>Time: " + this.time.format() + "</td>" + |
|---|
| 54 | "<td class='incidentNumber'>" + this.number + "</td>" + |
|---|
| 55 | "<td class='incidentTitle'>" + this.title + "</td>" + |
|---|
| 56 | "</tr>" + |
|---|
| 57 | "</table>"; |
|---|
| 58 | } |
|---|
| 59 | |
|---|
| 60 | /** |
|---|
| 61 | * @return The html that for the + or - symbol that expands or collapses the incident. |
|---|
| 62 | */ |
|---|
| 63 | function expandOption() |
|---|
| 64 | { |
|---|
| 65 | return "<button class='incidentExpandButton' " + |
|---|
| 66 | "id='expandOption" + this.number + "' onclick='incidents.get(" + |
|---|
| 67 | this.number + ").expandAction()'>" + this.expandOptionSymbol() + |
|---|
| 68 | "</button>"; |
|---|
| 69 | } |
|---|
| 70 | |
|---|
| 71 | /** |
|---|
| 72 | * Returns the symbol for the expand option. |
|---|
| 73 | * @return Either "+" or "-" depending on whether this incidents is collapsed or |
|---|
| 74 | * expanded. |
|---|
| 75 | */ |
|---|
| 76 | function expandOptionSymbol() |
|---|
| 77 | { |
|---|
| 78 | return this.expanded == true ? "–" : "+"; |
|---|
| 79 | } |
|---|
| 80 | |
|---|
| 81 | /** |
|---|
| 82 | * Performs the action of clicking on the + or - symbol that expands or collapses |
|---|
| 83 | * the incident. |
|---|
| 84 | */ |
|---|
| 85 | function expandAction() |
|---|
| 86 | { |
|---|
| 87 | if (this.expanded) |
|---|
| 88 | { |
|---|
| 89 | incidents.doc.getElementById("summary" + this.number).innerHTML = ""; |
|---|
| 90 | incidents.doc.getElementById("expandOption" + this.number).innerHTML = "+"; |
|---|
| 91 | } |
|---|
| 92 | else |
|---|
| 93 | { |
|---|
| 94 | incidents.doc.getElementById("summary" + this.number).innerHTML = |
|---|
| 95 | this.summary; |
|---|
| 96 | incidents.doc.getElementById("expandOption" + this.number).innerHTML = |
|---|
| 97 | "–"; |
|---|
| 98 | } |
|---|
| 99 | |
|---|
| 100 | this.expanded = !this.expanded; |
|---|
| 101 | |
|---|
| 102 | } |
|---|
| 103 | } |
|---|
