JSFiddle - React, Tailwind, and code Playground
by Alexey Demin
HTML
<div class="container">
<p>
Initial Bemassungen
</p>
<div id="inititalBemassungen" class="bemassungen"></div>
</div>
<div class="container">
<p>
Bemassungen nach sortierung
</p>
<div id="sortierteBemassungen" class="bemassungen"></div>
</div>
CSS
#inititalBemassungen, #sortierteBemassungen {
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
}
.bemassungen div {
position: absolute;
width: 20px;
background: rgba(0,0,0,0.2);
}
.container{
float: left;
margin-right: 10px;
}
JavaScript
console.clear();
var bemassungen = [
[20, 65],
[45, 65],
[20, 100],
[0, 100],
[15, 35],
[0, 20],
[35, 80],
[0, 15],
[20, 35],
[15, 100]
],
sortBemassungen = [],
getMinElem = function(arr, layer){
for(var i = 0, res = [], minimum = Number.MAX_VALUE; i < arr.length; i++){
if(arr[i][layer] < minimum){
minimum = arr[i][layer];
res = [arr[i]];
} else if(arr[i][layer] == minimum){
res.push(arr[i]);
}
}
return res;
},
updateArray = function(arr, elemForRemove){
for(var i = 0, res = []; i < arr.length; i++){
if(arr[i][0] == elemForRemove[0][0] && arr[i][1] == elemForRemove[0][1]){
console.log("Found element for remove!");
} else if(arr[i][0] != elemForRemove[0] && arr[i][1] != elemForRemove[1]){
res.push(arr[i]);
}
}
return res;
},
writeBemassungen = function(arr, elemId){
for(var i = 0, len = arr.length; i < len; i++){
var id = elemId+"_"+i;
$("#"+elemId).append('<div id="'+id+'">'+(i+1)+'</div>');
$("#"+id).css({"top" : arr[i][0]+"px", "height":(arr[i][1]-arr[i][0])+"px","left" : (i*20)+"px"});
}
};
console.log("First %o",getMinElem(bemassungen, 0));
console.log("Second %o",getMinElem(getMinElem(bemassungen, 0),1));
writeBemassungen(bemassungen, "inititalBemassungen");
for(var i = 0, res = [], len = bemassungen.length; i < len; i++){
var elem = getMinElem(getMinElem(bemassungen, 0),1);
res.push(elem[0]);
bemassungen = updateArray(bemassungen, elem);
}
writeBemassungen(res, "sortierteBemassungen");
console.log(res);