Rental time control

Question

Rental time control

Navigation

#1 by (0 votes)

0

Friends, I have a problem with a code, I hope you can help me.

What it does is take the available cars from the database, then place an image of each one so that they can be rented. Once rented, you must mark the percentage of time elapsed according to the time they rented it.

The problem is that I can not make it mark the elapsed time of each of the rented cars, I only get one of the cars.

<div class="row">
    <div class="col-xs-12">
     <div>
        <ul class="ace-thumbnails clearfix">
          <?php
            $coches = ProductData::getAll(1);
          ?>

            <?php if (count($coches)>0): ?>
                <?php foreach($coches as $coche):?>
                  <?php $sell = SellData::getByCar($coche->id); ?>
                  <?php if ($coche->name == $coche->name): ?>
                    <li style="border: solid white;" !important>
                      <div>
                        <img width="200" height="200" alt="200x200" src="storage/products/<?php echo $coche->image;?>" />
                        <div class="text">
                          <div class="inner">
                            <span><?php echo $coche->name;?></span>

                            <br />
                            <!-- <a href="#table-Coche-Time?coche=<?php $coche->id; ?>" class="blue" data-toggle="modal"></a> -->
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#Coche-Time" onclick="DataForm(<?php echo $coche->id ?>);">
                            <!-- <a data-target="#table-Coche-Time" href="#" class="sepV_a"> -->
                              <i class="ace-icon fa fa-users"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                      <?php if (isset($sell)): ?>
                        <!-- datos del alquiler del coche -->
                        <?php
                            $fechaAlquiler = $sell->created_at;
                            // $tiempoAlquiler = ($sell->tAlquilado);
                            $tiempoAlquilermili = ($sell->tAlquilado)*60000;
                            // echo $fechaAlquiler;
                            // echo " - ".$tiempoAlquiler." - ".$tiempoAlquilermili;
                            $client = PersonData::getById($sell->person_id);
                         ?>
                        <div>
                          <div id="pbar_outerdiv" style="width: 200px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
                            <div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
                            <div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
                          </div>
                          <div id="NameClient"><span style="width=200px; height=auto;" !important><?php echo $client->name." ".$client->lastname; ?></span></div>
                          <div id="MinRent"><span style="width=200px; height=auto;" !important><?php echo $sell->tAlquiler." Minutos"; ?></span></div>
                          <div id="MinNow"><span style="width=200px; height=auto;" !important><?php echo "0 Minutos pasados"; ?></span></div>
                        </div>
                        <!-- Script para calcular el tiempo -->
                        <script type="text/javascript">
                            // var fechaAlquiler= '<?php echo strtotime($fechaAlquiler)*1000; ?>';
                            var start = new Date(<?php echo strtotime($fechaAlquiler)*1000;?>);
                            var maxTime = '<?php echo $tiempoAlquilermili; ?>';
                            var timeoutVal = Math.floor(maxTime/100);
                            animateUpdate();

                            function updateProgress(percentage) {
                                $('#pbar_innerdiv').css("width", percentage + "%");
                                $('#pbar_innertext').text(percentage + "%");
                            }

                            function animateUpdate() {
                                var now = new Date();
                                var timeDiff = now.getTime() - start.getTime();
                                var perc = Math.round((timeDiff/maxTime)*100);
                                console.log(perc);
                                  if (perc <= 100) {
                                   updateProgress(perc);
                                   setTimeout(animateUpdate, timeoutVal);
                                  }
                            }
                        </script>

                      <?php endif ?>
                    </li>
                  <?php endif ?>
                <?php endforeach; ?>
            <?php endif ?>

        </ul>
      </div>
    </div>
  </div>

javascript html php

asked by K Frei 31.01.2017 в 23:46

source

1 answer

Query dynamic? Can you compare conditionals in MySQL?

score 0 · Answer 1

You could do a function in JavaScript that calculates dates and for each car, call the function. You can even do it in real time by putting the logic in a interval . To simplify things, use the module moment .

Example

let time = document.querySelector('.time');
initRentClock(time, '2017-01-12 10:57:23');

/**
 * Crea un reloj que muestra en tiempo real
 * los meses, días y minutos de alquiler
 *
 * @param {el} Elemento en donde mostrar el reloj
 * @param {rentTime} fecha de alquiler en YYYY-MM-DD hh:mm:ss
 */
function initRentClock(el, rentTime) {
  setInterval(function () {
    let now = moment();
    let duration = moment.duration(now.diff(moment(rentTime)));
    let durationStr = '${duration.months()} meses, ${duration.days()} días';
    durationStr += ', ${duration.hours()} horas y ${duration.minutes()} minutos';
	el.textContent = durationStr;
  }, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<p>
  Tiempo alquilado: <span class="time"></span>
</p>

In your case, it is generated HTML code, you could execute this process as soon as the DOM is loaded.

document.addEventListener('DOMContentLoaded', function () {
  let autos = document.querySelectorAll('.auto');
  [].forEach.call(autos, function (auto) {
     // elemento en donde se mostrará el tiempo transcurrido
     let time = auto.querySelector('.time');
     // acá el contenido de time es por ejemplo: 2017-01-12 14:23:39
     initRentClock(time, time.textContent);
  });
});

In the above example, when the HTML is generated the .time elements will have the value of the rental date ( $sell->createdAt ) and, when the DOM is loaded, these are replaced for the elapsed rental time clocks.

When you use a frontend framework, this will be very simplified, as well as keeping the layers of your application separate, thus maintaining a low coupling.