stations_detail.html

{% extends "layouts/base.html" %}
{% load static %}
{% block title %} Dashboard {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
{% load bootstrap %}




<div class="col-md-12">
  <div class="card  card-plain" align="right" dir="rtl">
    <div class="card-header">
      <h4 class="card-title" dir="rtl" align="center"> ایستگاه {{ station.name }} </h4>

      <div class="row">
        <div class="col-md-6" align="right">
          <button style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:8px;padding:10px;font-size:16px;border:none;"> کد:&nbsp;{{ station.code }} </button>
        </div>
        <div class="col-md-6" align="left">
          <button style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:8px;padding:10px;font-size:16px;border:none;"> {{ station.position }} </button>
        </div>
      </div>

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


{% if station.inventory <= station.min_inventory %}
  <p align="right" dir="rtl" style="color:red;"> موجودی از حداقل کمتر است </p>
{% endif %}



<div class="row">
  <div class="col-md-12">
    <div class="card card-user">
      <div class="card-body">
        <div align="right" dir="rtl" class="card-description">
          <p class="category"> {{ station.description|linebreaks }} </p>
        </div>
      </div>
    </div>
  </div>
</div>






<div class="row" dir="rtl" align="right" style="font-size:11px; color:black;">

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center"> موجودی  </h6>
      </div>
      <div class="card-body">
          {{ station.inventory.normalize }}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center"> حداقل موجودی  </h6>
      </div>
      <div class="card-body">
          {{ station.min_inventory.normalize }}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center"> ظرفیت تولید در روز   </h6>
      </div>
      <div class="card-body">
          {{ station.pro_cap_day }}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center"> درصد خطا  </h6>
      </div>
      <div class="card-body">
         {{ station.percent_error.normalize }}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center">  ایستگاه مادر </h6>
      </div>
      <div class="card-body">
         {{ station.mother_station|default:'ندارد' }}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    <div class="card ">
      <div class="card-header">
        <h6 class="card-title" align="center"> مسئول  </h6>
      </div>
      <div class="card-body">
         {{ station.manager }}
      </div>
    </div>
  </div>

</div>





<div class="row" align="center" dir="rtl">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
         <h4> قطعات ورودی :</h4>
      </div>
      <div class="card-body">
        <table class="table tablesorter " id="">
          <thead class=" text-primary">
            <tr>
              <th>
                نام
              </th>
              <th>
                موجودی
              </th>
              <th>
                ضریب مصرف
              </th>
              <th class="text-center">
                تصویر
              </th>
            </tr>
          </thead>
          <tbody>
          {% for input_material in station.input_material.all %}
            <tr>
              <td>  <a href="{{ input_material.material.get_absolute_url }}"> {{ input_material.material }} </a></td>
              <td> {{ input_material.material.inventory.normalize }} {{ input_material.material.unit }} </td>
              <td> {{ input_material.inventory.normalize }} </td>
              <td class="text-center">
                <div class="photo">
                  <img src="{{ input_material.material.image.url }}" alt="Profile Photo">
                </div>
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card ">
      <div class="card-header">
         <h4> محصولات استفاده کننده:</h4>
      </div>
      <div class="card-body">
        {% for Tree in products %}
          <a href="{{ Tree.relatedProduct.get_absolute_url }}"> {{ Tree.relatedProduct }} </a>
          <img width="30px" src="{{ Tree.relatedProduct.synch_to.image.url }}" alt="Profile Photo">
          <br>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card ">
      <div class="card-header">
         <h4> قطعه خروج: </h4>
      </div>
      <div class="card-body">
        {% for Tree in products %}
          <a href="{{ station.output_material.get_absolute_url }}"> {{ station.output_material }} </a>
          <img width="30px" src="{{ station.output_material.image.url }}" alt="Profile Photo">
          <br>
        {% endfor %}
      </div>
    </div>
  </div>

</div>





{% if request.user == station.manager %}
  <div class="row" align="center" dir="rtl">

    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
           <h4>  افزایش موجودی </h4>
        </div>
        <div class="card-body">

          <form action="#" method="post" align="right" dir="rtl">
            {% csrf_token %}
            <div class="row">
              <div class="col-md-3">
                <div class="form-group">
                  <label for="exampleInputEmail1"> افزودن موجودی  {{ station.output_material }} به تعداد: </label>
                  <input name="inventory_field" type="text" class="form-control">
                </div>
              </div>
              <div class="col-md-9">
                <div class="form-group">
                  <label for="exampleInputEmail1"> توضیحات </label>
                  <input name="inventory_description_field" type="text" class="form-control">
                </div>
              </div>
            </div>
           <div class="card-footer">
             <button type="submit" class="btn btn-fill btn-primary"> ذخیره </button>
           </div>
         </form>

        </div>


        <div id='history' class="card-body" align="right" dir="rtl">
          <table class="table tablesorter">
            <thead class=" text-primary">
              <tr>
                <th class="text-center">
                  قطعه
                </th>
                <th class="text-center">
                  تعداد
                </th>
                <th class="text-center">
                  توضیحات
                </th>
                <th class="text-center">
                  تاریخ
                </th>
              </tr>
            </thead>
            <tbody>
            {% for Inventory_history in inventory_history %}
              <tr>
                <td class="text-center"> {{ Inventory_history.material }} </td>
                <td class="text-center"> {{ Inventory_history.quantity }} </td>
                <td class="text-center"> {{ Inventory_history.description }} </td>
                <td class="text-center"> {{ Inventory_history.j_time }} </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          <button id="hide" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;"> مخفی سازی </button>
        </div>
        <button id="show" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;">  مشاهده تاریخچه  </button>

      </div>
    </div>

    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
           <h4>  خروج قطعه  </h4>
        </div>
        <div class="card-body">

          <form action="#" method="post" align="right" dir="rtl">
            {% csrf_token %}
            <div class="row">

              <div class="col-md-2 pr-md-1">
                <div class="form-group">
                  <label for="exampleInputEmail1"> خروج قطعه {{ station.output_material }} به تعداد: </label>
                  <input name="exit_station_field" type="text" class="form-control">
                </div>
              </div>

              <div class="col-md-3 px-md-1">
                <div class="form-group">
                  <label>برای سفارش با کد:  </label>
                  <input name="order_code" type="text" class="form-control">
                </div>
              </div>

              <div class="col-md-7 pr-md-1">
                <div class="form-group">
                  <label for="exampleInputEmail1"> توضیحات </label>
                  <input name="exit_station_description_field" type="text" class="form-control">
                </div>
              </div>


            </div>
           <div class="card-footer">
             <button type="submit" class="btn btn-fill btn-primary"> ذخیره </button>
           </div>
         </form>

        </div>

        <div id='exit_history' class="card-body" align="right" dir="rtl">
          <table class="table tablesorter">
            <thead class=" text-primary">
              <tr>
                <th class="text-center">
                  قطعه
                </th>
                <th class="text-center">
                  تعداد
                </th>
                <th class="text-center">
                  کد سفارش مربوطه
                </th>
                <th class="text-center">
                  توضیحات
                </th>
                <th class="text-center">
                  تاریخ
                </th>
              </tr>
            </thead>
            <tbody>
            {% for Inventory_history in station_exit_history %}
              <tr>
                <td class="text-center">
                  <div class="photo">
                    <img src="{{ Inventory_history.material.image.url }}" alt="Profile Photo">
                  </div>
                </td>
                <td class="text-center"> {{ Inventory_history.material }} </td>
                <td class="text-center"> {{ Inventory_history.quantity }} </td>
                <td class="text-center"> {{ Inventory_history.order_code }} </td>
                <td class="text-center"> {{ Inventory_history.description }} </td>
                <td class="text-center"> {{ Inventory_history.j_time }} </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          <button id="exit_hide" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;"> مخفی سازی </button>
        </div>
        <button id="exit_show" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;">  مشاهده تاریخچه  </button>


      </div>
    </div>

  </div>
{% endif %}









<br>
<div class="row" dir="rtl" align="right">

  <div class="col-md-12">
    <div class="card card-user">
      <div class="card-header">
        <h4 class="card-title"> سفارشات تایید شده  <i style="color:green;" class="tim-icons icon-check-2"></i> </h4>
      </div>
      <div class="card-body">
        <table class="table tablesorter " id="">
          <thead class=" text-primary">
            <tr>
              <th>
                نام
              </th>
              <th class="text-center">
                کد
              </th>
              <th class="text-center">
                زمان شروع
              </th>
              <th class="text-center">
                 زمان پایان
              </th>
              <th class="text-center">
                تیراژ
              </th>
              <th class="text-center">
                تولید شده
              </th>
              <th class="text-center">
                تصویر
              </th>
            </tr>
          </thead>
          <tbody>
            {% for Order in orders %}
              {% for Tree in input %}
               {% if Tree.relatedProduct == Order.product %}
               {% if Order.completed == False %}
               {% if Order.confirmed %}
                <tr>
                  <td><a href="{{ Order.get_absolute_url }}"> {{ Tree.relatedProduct }} </a></td>
                  <td class="text-center"> {{ Order.code }} </td>
                  <td class="text-center">
                    {{ Order.j_time }}
                  </td>
                  <td class="text-center">
                    {% widthratio Order.circulation station.pro_cap_day 1 %} روز بعد
                  </td>
                  <td class="text-center"> {{ Order.circulation.normalize }} </td>
                  <td class="text-center">
                    <p id="{{Order.code}}"></p>
                  </td>
                  <td class="text-center">
                    <div class="photo">
                      <img src="{{ Order.product.synch_to.image.url }}" alt="Profile Photo">
                    </div>
                  </td>
                </tr>
             {% endif %}
             {% endif %}
             {% endif %}
            {% endfor %}
           {% endfor %}
          </tbody>
        </table>
        <br>
          مجموع سفارشات:  <small id="totalorderq"></small>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <div class="card card-user">
      <div class="card-header">
        <h4 class="card-title"> سفارشات تایید نشده  <i style="color:red;" class="tim-icons icon-simple-remove"></i> </h4>
      </div>
      <div class="card-body">
        <table class="table tablesorter " id="">
          <thead class=" text-primary">
            <tr>
              <th>
                نام
              </th>
              <th>
                کد
              </th>
              <th>
                تیراژ
              </th>
              <th class="text-center">
               تایید شده
              </th>
              <th class="text-center">
               تکمیل شده
              </th>
              <th class="text-center">
                تصویر
              </th>
            </tr>
          </thead>
          <tbody>
            {% for Order in orders %}
              {% for Tree in input %}
               {% if Tree.relatedProduct == Order.product %}
               {% if Order.completed == False %}
               {% if Order.confirmed == False %}
                <tr>
                  <td><a href="{{ Order.get_absolute_url }}"> {{ Tree.relatedProduct }} </a></td>
                  <td> {{ Order.code }} </td>
                  <td> {{ Order.circulation.normalize }} </td>
                  <td class="text-center">
                    {% if Order.confirmed %}
                      <i style="color:green;" class="tim-icons icon-check-2"></i>
                    {% else %}
                      <i style="color:red;" class="tim-icons icon-simple-remove"></i>
                    {% endif %}
                   </td>
                  <td class="text-center">
                    {% if Order.completed %}
                      <i style="color:green;" class="tim-icons icon-check-2"></i>
                    {% else %}
                      <i style="color:red;" class="tim-icons icon-simple-remove"></i>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    <div class="photo">
                      <img src="{{ Order.product.synch_to.image.url }}" alt="Profile Photo">
                    </div>
                  </td>
                </tr>
             {% endif %}
             {% endif %}
             {% endif %}
            {% endfor %}
           {% endfor %}
          </tbody>
        </table>
      </div>


      <div id='order_confirm_box' class="card">
        <hr>


          <div class="row" dir="rtl" align="center">

            <div class="col-md-10">
              <div class="card card-user">
                <div class="card-header" dir="rtl" align="right">
                  <h4 class="card-title"> تاییده سفارشات تایید نشده </h4>
                </div>
                <div class="card">
                      <form method="post">
                         {% csrf_token %}
                         {{ order_confirmation_form|bootstrap }}
                         <button type="submit" class="btn btn-fill btn-primary">  تایید </button>
                      </form>
                </div>
                <div id='order_confirm' class="card">
                  <hr>
                  {% for Order_confirmation in order_confirmation_history %}
                       <p> <small>  سفارش {{ Order_confirmation.order }}  توسط {{ station.manager }} تایید شده </small> </p>
                  {% endfor %}
                  <hr>
                  <div>
                    <button id="confirm_hide" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;"> مخفی سازی </button>
                  </div>
                </div>
                <div>
                  <button id="confirm_show" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;">  مشاهده تاریخچه  </button>
                </div>
              </div>
            </div>

          </div>





        <hr>
        <div>
          <button id="confirm_hide_box" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;"> مخفی سازی </button>
        </div>
      </div>

        <button id="confirm_show_box" style="background-color:#0c5ba9bd;color:white;text-align:center;border-radius:10px;padding:8px;font-size:13px;border:none;"> تایید سفارش </button>







    </div>
  </div>

</div>





<br>
<h5 dir="rtl" align="right">نمودار  سفارشات تایید شده </h5> <hr>

<div class="chart-area">
  <div id="chartdiv"></div>
</div>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <script>




    // each Order total exit history

   var exitorders =[
   {% for Order in orders %}
     {% for Tree in input %}
      {% if Tree.relatedProduct == Order.product %}
      {% if Order.completed == False %}
      {% if Order.confirmed %}
        {% for Station_exit_history in station_exit_history %}
          {% if Station_exit_history.order_code == Order.code %}
              { "code":"{{Station_exit_history.order_code}}", "tot":{{Station_exit_history.quantity}} },
          {% endif %}
        {% endfor %}
      {% endif %}
      {% endif %}
      {% endif %}
     {% endfor %}
    {% endfor %}
    ];

    var totexitorders = exitorders.reduce(function (agg, obj) {
      var objForCode = agg.filter(function (codeObj) { return codeObj.code === obj.code})[0]

      if (objForCode) {
        objForCode.total += obj.tot;
      } else {
        agg.push({
          code: obj.code,
          total: obj.tot
        })
      }
      return agg;
    }, [])


    for(var i=0; i < totexitorders.length; i++){
      document.getElementById(totexitorders[i].code).innerHTML = totexitorders[i].total;
    }


  // ------------------------------------------------------





   // Order and Chart code

   var input_data = [
       {% for Order in orders %}
       {% for Tree in input %}
       {% if Tree.relatedProduct == Order.product %}
       {% if Order.completed == False %}
       {% if Order.confirmed %}
                { "a": "{{ Tree.relatedProduct }} {{ Order.code }}", "b": {{ Order.circulation }} },
       {% endif %}
       {% endif %}
       {% endif %}
       {% endfor %}
       {% endfor %}
    ];




  am4core.ready(function() {
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end
  // Create chart instance
  var chart = am4core.create("chartdiv", am4charts.PieChart);

  // Add data
  chart.data = input_data;

  // Add and configure Series
  var pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = "b";
  pieSeries.dataFields.category = "a";
  pieSeries.slices.template.stroke = am4core.color("#fff");
  pieSeries.slices.template.strokeWidth = 2;
  pieSeries.slices.template.strokeOpacity = 1;

  // This creates initial animation
  pieSeries.hiddenState.properties.opacity = 1;
  pieSeries.hiddenState.properties.endAngle = -90;
  pieSeries.hiddenState.properties.startAngle = -90;

  }); // end am4core.ready()


  var totalorderq = 0;
  for(var i=0; i < input_data.length; i++){
      totalorderq += input_data[i].b;
  }

  document.getElementById("totalorderq").innerHTML = totalorderq;







//-----------------------------------------------------

    $(document.getElementById('history')).hide();
    $(document).ready(function(){
      $("#hide").click(function(){
        $(document.getElementById('history')).hide();
      });
      $("#show").click(function(){
        $(document.getElementById('history')).show();
      });
    });


    $(document.getElementById('exit_history')).hide();
    $(document).ready(function(){
      $("#exit_hide").click(function(){
        $(document.getElementById('exit_history')).hide();
      });
      $("#exit_show").click(function(){
        $(document.getElementById('exit_history')).show();
      });
    });



    $(document.getElementById('order_confirm')).hide();
    $(document).ready(function(){
      $("#confirm_hide").click(function(){
        $(document.getElementById('order_confirm')).hide();
      });
      $("#confirm_show").click(function(){
        $(document.getElementById('order_confirm')).show();
      });
    });



    $(document.getElementById('order_confirm_box')).hide();
    $(document).ready(function(){
      $("#confirm_hide_box").click(function(){
        $(document.getElementById('order_confirm_box')).hide();
      });
      $("#confirm_show_box").click(function(){
        $(document.getElementById('order_confirm_box')).show();
      });
    });






    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
      demo.initDashboardPageCharts();
    });



  </script>

{% endblock javascripts %}