Javascript change position depending on number
When people fill out a form, all data is sent and stored in the database. For example:
People are now filling in the axis distances (on the next page) and the axis distances are updated. They do the same for the trolley table (not rigidly with the distances, but with the trolley numbers)
After that everything is filled in, the DB looks like this:
Travel information:
axis: 
retractable: 
Now with the following information, he forms the shape of the train.
Now I make this shape by choosing the number of axes and rotating them in a circle. I am setting the distances by selecting the axis table and using margin-left.
Now. The actual things to add have axial distances of 1000-4000 each. So when I add this, the train will be huge if it takes shape.
So I thought (but don't know if this is possible) instead of setting the distance of the end result to the axis distance. But with trolley numbers.
So axle 1 and 2 have bogie number 1. And I want bogie number 1 to be on the left.
axes 3 and 4 have cart number 2. And I would like to have such as 200px next to number 1.
Axes 5 and 6 have cart number 3. And I would like to have these 200px next to number 2. Etc. Etc.
This is how end_results renders the form:
<div id="axle_position2">
<?php
foreach($show_axle as $axlefigure){ ?>
<div style="margin-left:<?php echo $axlefigure['distance'];?>px;">
<?php echo $axlefigure['axle'] ?>
</div>
<?php
}
?>
</div>
The function it performs is simple: SELECT * FROM axle where train_id = train_id
EDIT:
Here's an example:
source to share
There are many ways to solve this. Here's one possible solution:
Since the distance between the axles is no longer important (pointed out in the comments), focus on carts. Select the bogies and their axles as follows:
SELECT bogie_nr, GROUP_CONCAT(axle_id) AS axles
FROM `bogie`
WHERE train_id = 17
GROUP BY bogie_nr
This selection will return the cart number and a comma separated list of axles in that particular cart. The only thing left for you to do is execute the results as you do and break the line with a axles
comma.
Finally, to display the results, wrap the axles in the cart and style accordingly. Something like this: ( $bogies
would be the result set from the query above)
<?php foreach($bogies as $bogie) { ?>
<div class="bogie" id="bogie<?php echo $bogie["bogie_nr"]; ?>">
<?php
$axles = explode(",", $bogie["axles"]);
foreach($axles as $axle) {
?>
<div class="axle"><?php echo $axle; ?></div>
<?php } ?>
</div>
<?php } ?>
I didn't add the styling to make it clearer, but the idea would be that the class .bogie
would have 200px of margin-left
(to separate it from the next cart) and the class .axle
is whatever margin-left
you want to add.
source to share