7173 |
17 May 23 |
nicklas |
// Inpsired from plate.js, but with support for multiple boxes on |
7173 |
17 May 23 |
nicklas |
// one page but otherwise a lot simpler |
7173 |
17 May 23 |
nicklas |
function StorageBox(boxId, rows, columns, painter) |
7173 |
17 May 23 |
nicklas |
4 |
{ |
7173 |
17 May 23 |
nicklas |
this.id = boxId; |
7173 |
17 May 23 |
nicklas |
this.rows = rows; |
7173 |
17 May 23 |
nicklas |
this.columns = columns; |
7173 |
17 May 23 |
nicklas |
this.painter = painter; |
7173 |
17 May 23 |
nicklas |
this.tag = document.getElementById(boxId); |
7173 |
17 May 23 |
nicklas |
10 |
|
7173 |
17 May 23 |
nicklas |
this.wells = []; |
7173 |
17 May 23 |
nicklas |
// Wells are ordered by row instead of by column |
7173 |
17 May 23 |
nicklas |
for (var r = 0; r < rows; r++) |
7173 |
17 May 23 |
nicklas |
14 |
{ |
7173 |
17 May 23 |
nicklas |
for (var c = 0; c < columns; c++) |
7173 |
17 May 23 |
nicklas |
16 |
{ |
7173 |
17 May 23 |
nicklas |
this.wells[this.wells.length] = new Well(this, r, c); |
7173 |
17 May 23 |
nicklas |
18 |
} |
7173 |
17 May 23 |
nicklas |
19 |
} |
7173 |
17 May 23 |
nicklas |
20 |
} |
7173 |
17 May 23 |
nicklas |
21 |
|
7173 |
17 May 23 |
nicklas |
22 |
|
7173 |
17 May 23 |
nicklas |
23 |
/** |
7173 |
17 May 23 |
nicklas |
Get the number of rows in the storage box. |
7173 |
17 May 23 |
nicklas |
25 |
*/ |
7173 |
17 May 23 |
nicklas |
StorageBox.prototype.getRows = function() |
7173 |
17 May 23 |
nicklas |
27 |
{ |
7173 |
17 May 23 |
nicklas |
return this.rows; |
7173 |
17 May 23 |
nicklas |
29 |
} |
7173 |
17 May 23 |
nicklas |
30 |
|
7173 |
17 May 23 |
nicklas |
31 |
/** |
7173 |
17 May 23 |
nicklas |
Get the number of columns in the storage box. |
7173 |
17 May 23 |
nicklas |
33 |
*/ |
7173 |
17 May 23 |
nicklas |
StorageBox.prototype.getColumns = function() |
7173 |
17 May 23 |
nicklas |
35 |
{ |
7173 |
17 May 23 |
nicklas |
return this.columns; |
7173 |
17 May 23 |
nicklas |
37 |
} |
7173 |
17 May 23 |
nicklas |
38 |
|
7173 |
17 May 23 |
nicklas |
39 |
|
7173 |
17 May 23 |
nicklas |
40 |
/** |
7173 |
17 May 23 |
nicklas |
Get all wells in the storage box. |
7173 |
17 May 23 |
nicklas |
42 |
*/ |
7173 |
17 May 23 |
nicklas |
StorageBox.prototype.getWells = function() |
7173 |
17 May 23 |
nicklas |
44 |
{ |
7173 |
17 May 23 |
nicklas |
return this.wells; |
7173 |
17 May 23 |
nicklas |
46 |
} |
7173 |
17 May 23 |
nicklas |
47 |
|
7173 |
17 May 23 |
nicklas |
48 |
|
7173 |
17 May 23 |
nicklas |
49 |
/** |
7173 |
17 May 23 |
nicklas |
Get the well at the given coordinate. |
7173 |
17 May 23 |
nicklas |
51 |
*/ |
7173 |
17 May 23 |
nicklas |
StorageBox.prototype.getWell = function(row, column) |
7173 |
17 May 23 |
nicklas |
53 |
{ |
7173 |
17 May 23 |
nicklas |
return this.wells[row * this.columns + column]; |
7173 |
17 May 23 |
nicklas |
55 |
} |
7173 |
17 May 23 |
nicklas |
56 |
|
7173 |
17 May 23 |
nicklas |
57 |
|
7173 |
17 May 23 |
nicklas |
58 |
/** |
7173 |
17 May 23 |
nicklas |
Paint the given wells. |
7173 |
17 May 23 |
nicklas |
60 |
*/ |
7173 |
17 May 23 |
nicklas |
StorageBox.prototype.paint = function(wells) |
7173 |
17 May 23 |
nicklas |
62 |
{ |
7173 |
17 May 23 |
nicklas |
for (var i = 0; i < wells.length; i++) |
7173 |
17 May 23 |
nicklas |
64 |
{ |
7173 |
17 May 23 |
nicklas |
wells[i].paint(this.painter); |
7173 |
17 May 23 |
nicklas |
66 |
} |
7173 |
17 May 23 |
nicklas |
67 |
} |
7173 |
17 May 23 |
nicklas |
68 |
|
7173 |
17 May 23 |
nicklas |
69 |
|
7173 |
17 May 23 |
nicklas |
70 |
/** |
7173 |
17 May 23 |
nicklas |
Represents a well on the plate. Each well is created when |
7173 |
17 May 23 |
nicklas |
the page is loaded and is initially empty. |
7173 |
17 May 23 |
nicklas |
73 |
*/ |
7173 |
17 May 23 |
nicklas |
function Well(box, row, column) |
7173 |
17 May 23 |
nicklas |
75 |
{ |
7173 |
17 May 23 |
nicklas |
this.box = box; |
7173 |
17 May 23 |
nicklas |
this.row = row; |
7173 |
17 May 23 |
nicklas |
this.column = column; |
7173 |
17 May 23 |
nicklas |
this.selected = false; |
7173 |
17 May 23 |
nicklas |
this.highlighClass = null; |
7173 |
17 May 23 |
nicklas |
this.sample = null; |
7173 |
17 May 23 |
nicklas |
this.locked = false; |
7173 |
17 May 23 |
nicklas |
83 |
|
7173 |
17 May 23 |
nicklas |
this.tag = document.getElementById(box.id+'.well.'+row+'.'+column); |
7173 |
17 May 23 |
nicklas |
85 |
} |
7173 |
17 May 23 |
nicklas |
86 |
|
7173 |
17 May 23 |
nicklas |
87 |
/** |
7173 |
17 May 23 |
nicklas |
Set the samples item that is put into this well. Use |
7173 |
17 May 23 |
nicklas |
'null' to clear the well. The sample should always |
7173 |
17 May 23 |
nicklas |
have a 'name' property, and an 'id' property if it |
7173 |
17 May 23 |
nicklas |
exists in the database. |
7173 |
17 May 23 |
nicklas |
92 |
*/ |
7173 |
17 May 23 |
nicklas |
Well.prototype.setSample = function(sample) |
7173 |
17 May 23 |
nicklas |
94 |
{ |
7173 |
17 May 23 |
nicklas |
this.sample = sample; |
7173 |
17 May 23 |
nicklas |
96 |
} |
7173 |
17 May 23 |
nicklas |
97 |
|
7173 |
17 May 23 |
nicklas |
Well.prototype.setLocked = function(locked) |
7173 |
17 May 23 |
nicklas |
99 |
{ |
7173 |
17 May 23 |
nicklas |
this.locked = locked; |
7173 |
17 May 23 |
nicklas |
101 |
} |
7173 |
17 May 23 |
nicklas |
102 |
|
7173 |
17 May 23 |
nicklas |
Well.prototype.getClassName = function(painter) |
7173 |
17 May 23 |
nicklas |
104 |
{ |
7173 |
17 May 23 |
nicklas |
var c = this.column; |
7173 |
17 May 23 |
nicklas |
var cls = 'well col-'+c; |
7173 |
17 May 23 |
nicklas |
107 |
|
7173 |
17 May 23 |
nicklas |
if (painter) |
7173 |
17 May 23 |
nicklas |
109 |
{ |
7173 |
17 May 23 |
nicklas |
cls += ' ' + painter.getClassNameForWell(this); |
7173 |
17 May 23 |
nicklas |
111 |
} |
7173 |
17 May 23 |
nicklas |
return cls; |
7173 |
17 May 23 |
nicklas |
113 |
} |
7173 |
17 May 23 |
nicklas |
114 |
|
7173 |
17 May 23 |
nicklas |
Well.prototype.getText = function(painter) |
7173 |
17 May 23 |
nicklas |
116 |
{ |
7173 |
17 May 23 |
nicklas |
var text = ''; |
7173 |
17 May 23 |
nicklas |
if (painter) |
7173 |
17 May 23 |
nicklas |
119 |
{ |
7173 |
17 May 23 |
nicklas |
text = painter.getWellText(this); |
7173 |
17 May 23 |
nicklas |
121 |
} |
7173 |
17 May 23 |
nicklas |
else |
7173 |
17 May 23 |
nicklas |
123 |
{ |
7173 |
17 May 23 |
nicklas |
if (this.sample) |
7173 |
17 May 23 |
nicklas |
125 |
{ |
7173 |
17 May 23 |
nicklas |
text += '<div class="name">'+Strings.encodeTags(this.sample.name)+'</div>' |
7173 |
17 May 23 |
nicklas |
127 |
} |
7173 |
17 May 23 |
nicklas |
128 |
} |
7173 |
17 May 23 |
nicklas |
return text; |
7173 |
17 May 23 |
nicklas |
130 |
} |
7173 |
17 May 23 |
nicklas |
131 |
|
7173 |
17 May 23 |
nicklas |
Well.prototype.paint = function(painter) |
7173 |
17 May 23 |
nicklas |
133 |
{ |
7173 |
17 May 23 |
nicklas |
this.tag.innerHTML = this.getText(painter); |
7173 |
17 May 23 |
nicklas |
this.tag.className = this.getClassName(painter); |
7173 |
17 May 23 |
nicklas |
136 |
} |