<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div style="width:50%">
<div style="float:left; width:50%">
<form method="post" action="position_circuit_breaker_engine.php">
<div class="row">
<div class="form-group col">
<label for="Slot">Beginning Slot</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Slot" name="Slot">
<option value="5">5</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<button type="submit" class="btn btn-outline-dark btn-lg btn-block"><span class="icon-ok"></span> Submit</button>
</div>
</div>
<input type="hidden" name="circuit_breaker_id" value="1">
<input type="hidden" name="old_x_coord" value="0">
<input type="hidden" name="old_y_coord" value="186">
<input type="hidden" name="x_coord" id="x_coord" value="">
<input type="hidden" name="y_coord" id="y_coord" value="">
<input type="hidden" name="power_panel_id" value="1">
</form>
</div>
<div style="float:right; width:50%">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 780" onload="makeDraggable(evt)">
<defs>
<script type="text/javascript"><![CDATA[
function makeDraggable(evt) {
var svg = evt.target;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
svg.addEventListener('touchstart', startDrag);
svg.addEventListener('touchmove', drag);
svg.addEventListener('touchend', endDrag);
svg.addEventListener('touchleave', endDrag);
svg.addEventListener('touchcancel', endDrag);
var selectedElement, offset, transform,
bbox, minX, maxX, minY, maxY, confined;
var boundaryX1 = 65;
var boundaryX2 = 465;
var boundaryY1 = 80;
var boundaryY2 = 730;
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
if (evt.touches) { evt = evt.touches[0]; }
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
// Make sure the first transform on the element is a translate transform
var transforms = selectedElement.transform.baseVal;
if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
// Create an transform that translates by (0, 0)
var translate = svg.createSVGTransform();
translate.setTranslate(0, 0);
selectedElement.transform.baseVal.insertItemBefore(translate, 0);
}
// Get initial translation
transform = transforms.getItem(0);
offset.x -= transform.matrix.e;
offset.y -= transform.matrix.f;
confined = evt.target.classList.contains('confine');
if (confined) {
bbox = selectedElement.getBBox();
minX = boundaryX1 - bbox.x;
maxX = boundaryX2 - bbox.x - bbox.width;
minY = boundaryY1 - bbox.y;
maxY = boundaryY2 - bbox.y - bbox.height;
}
}
}
function drag(evt) {
if (selectedElement) {
evt.preventDefault();
var coord = getMousePosition(evt);
var dx = coord.x - offset.x;
var dy = coord.y - offset.y;
if (confined) {
if (dx < minX) { dx = minX; }
else if (dx > maxX) { dx = maxX; }
if (dy < minY) { dy = minY; }
else if (dy > maxY) { dy = maxY; }
}
transform.setTranslate(dx, (dy / 92.857142857143) * 92.857142857143);
document.getElementById("x_coord").value = dx;
document.getElementById("y_coord").value = (Math.round(dy / 92.857142857143) * 92.857142857143);
var y_deviation = parseInt(parseInt(document.getElementById("y_coord").value) / parseInt(92.857142857143)) * 2;
console.log('x: '+document.getElementById("x_coord").value+' y: '+document.getElementById("y_coord").value);
console.log('Slot Height: '+92.857142857143);
if(dx < 100) {
var slot = y_deviation + 1;
console.log('Slot Number: '+ slot);
} else {
var slot = y_deviation + 2;
console.log('Slot Number: '+ slot);
}
document.getElementById("Slot").value = slot;
}
}
function endDrag(evt) {
selectedElement = false;
}
}
]]> </script>
<pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
<rect fill="#FA8072" x="0" y="0" width="20" height="10"></rect>
<rect fill="white" x="0" y="10" width="20" height="10"></rect>
</pattern>
<pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
<rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
<rect fill="white" x="0" y="10" width="20" height="10"></rect>
</pattern>
<filter id="color-overlay">
<feFlood flood-color="#d9d9d9"/>
<feComposite in2="SourceAlpha" operator="atop"/>
</filter>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<style>
rect, path {
fill:#eeeeee;
stroke:black;
stroke-width:2px;
}
text {
font-size:14pt;
font-family:Verdana;
}
rect.rack {
fill:whitesmoke;
stroke:black;
stroke-width:1px;
}
rect.asset {
stroke:#666;
stroke-width:.8px;
cursor:not-allowed;
fill:url(#pattern2);
}
rect.draggable {
stroke:#000;
fill:#d1ecf1;
stroke-width:.1;
opacity:.9;
filter:url(#shadow)
}
.draggable {
cursor: move;
}</style>
</defs>
<rect x="10" y="50" width="500" height="700" />
<path d="M10 50 20 30 530 30 510 50 Z"/>
<path d="M510 750 530 730 530 30 510 50 Z"/>
<rect x="65" y="80" width="175" height="650" class="rack" />
<rect x="290" y="80" width="175" height="650" class="rack" />
<text text-anchor='middle' x='35' y='126.42857142857'>1</text>
<text text-anchor='middle' x='487' y='126.42857142857'>2</text>
<text text-anchor='middle' x='35' y='219.28571428571'>3</text>
<text text-anchor='middle' x='487' y='219.28571428571'>4</text>
<text text-anchor='middle' x='35' y='312.14285714286'>5</text>
<text text-anchor='middle' x='487' y='312.14285714286'>6</text>
<text text-anchor='middle' x='35' y='405'>7</text>
<text text-anchor='middle' x='487' y='405'>8</text>
<text text-anchor='middle' x='35' y='497.85714285714'>9</text>
<text text-anchor='middle' x='487' y='497.85714285714'>10</text>
<text text-anchor='middle' x='35' y='590.71428571429'>11</text>
<text text-anchor='middle' x='487' y='590.71428571429'>12</text>
<text text-anchor='middle' x='35' y='683.57142857143'>13</text>
<text text-anchor='middle' x='487' y='683.57142857143'>14</text>
<rect x="65" y="266" width="175" height="185.71428571429" class="draggable confine" id="New_Circuit_Breaker"/></svg>
</div>
</div>
<script>
document.getElementById('Slot').addEventListener('change',moveSlot);
function moveSlot() {
var domElemnt = document.getElementById("New_Circuit_Breaker");
var selectSlotValue = document.getElementById("Slot").value;
var originalSlotValue = 5; var diff = selectSlotValue - originalSlotValue;
var orig_y = 186;
var y_adjustment = diff * (92.857142857143 / 2);
var x_adjustment = (selectSlotValue % 2 === 0) ? 225 : 0
document.getElementById("y_coord").value = y_adjustment;
console.log('Original value: 5, so its y is '+orig_y);
console.log('New value: '+selectSlotValue+', so its y is translated in the y direction by '+y_adjustment);
var transformAttr = ' translate('+x_adjustment+','+y_adjustment+')';
domElemnt.setAttribute('transform', transformAttr);
}
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.