Skip to content

Instantly share code, notes, and snippets.

@artemrogov

artemrogov/calculator.html

Last active April 2, 2019 18:18
Show Gist options
  • Save artemrogov/d7e97c7a716e06e6e2b1744e09360fd4 to your computer and use it in GitHub Desktop.
Save artemrogov/d7e97c7a716e06e6e2b1744e09360fd4 to your computer and use it in GitHub Desktop.
Download ZIP
calculator
Raw
calculator.html
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="{{asset('css/app.css')}}" >
<link rel="stylesheet" href="{{asset('css/aos.css')}}">
<title>Калькулятор Доставки Груза</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
body{
/* background: url(../img/map.png) no-repeat;*/
background-attachment: fixed;
background-size: cover;
background-color: rgba(50,200,222,0.7);
font-family: 'Oswald', sans-serif;
}
#app{
min-width: 100%;
min-height:100%;
}
.pannel-block {
border: 1px solid #ddd;
box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.07);
background: #fff;
border-radius: 4px;
padding:20px;
}
.bt-managers a {
color:darkred;
text-decoration-style: -moz-none;
border-bottom: 1px dotted #000;
}
.bt-managers a:hover {
text-decoration-style: -moz-none;
}
.del-place a {
color: darkred;
font-size: 1.5rem;
}
.comment-goods {
color:darkred;
text-decoration-style: -moz-none;
border-bottom: 1px dotted #000;
}
.card{
border-radius: 0px;
border: none;
}
.content-result {
background-color: #fafafa;
border:1px solid #ddd;
}
.order-delevery a{
color:darkred;
text-decoration-style: -moz-none;
border-bottom: 1px dotted #000;
}
.list-result {
padding-bottom: 15px;
line-height: 1.9;
}
.list-result li {
list-style: none;
list-style-image: url(img/accept.png);
}
.documents-item .ui-item{
max-width: 120px;
border: 1px solid #e9e9e9;
display: block;
padding: 20px 10px;
border-radius: 5px;
text-align: center;
background: #fff;
position: relative;
box-shadow: 3px 3px 0px 1px rgba(0,0,0,0.04);
margin: 20px auto;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}
div.stepper {
width: 70px;
}
.stepper {
border-radius: 3px;
margin: 0 0 10px 0;
overflow: hidden;
position: relative;
/* width: 300px; */
}
.stepper .stepper-input {
padding: 4px 10px 6px;
background: #fff;
}
.stepper .stepper-input {
background: #F9F9F9;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
font-size: 13px;
line-height: 1.2;
margin: 0;
overflow: hidden;
padding: 9px 10px 10px;
width: 100%;
z-index: 49;
-moz-appearance: textfield;
}
.stepper .stepper-arrow.up {
background-position: center top;
border-bottom: none;
top: 0;
}
.stepper .stepper-arrow {
background: #eee url(img/jquery.fs.stepper-arrows.png) no-repeat;
border: 1px solid #ccc;
cursor: pointer;
display: block;
height: 50%;
position: absolute;
right: 0;
text-indent: -99999px;
width: 20px;
z-index: 50;
}
.stepper .stepper-arrow.down {
background-position: center bottom;
bottom: 0;
}
</style>
</head>
<body>
<main id="app">
<menu-component name-brand="NG-Lab ИТ-решения для логистики" :menu="{{json_encode($menu)}}"></menu-component>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">ИТ-решения</a></li>
<li class="breadcrumb-item active" aria-current="page">Калькулятор расчета стоимости доставки</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<section class="col-lg-12 pannel-block accordion" id="accordionExample">
<h1 class="text-center display-7 mb-lg-3">Калькулятор расчета стоимости доставки</h1>
<form>
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#route-params" aria-expanded="true" aria-controls="route-params">
<i class="fas fa-map-marked-alt"></i> Параметры маршрута груза
</button>
</h2>
</div>
<div id="route-params" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div class="form-group">
<label for="depature_city">Город отправления</label>
<input type="text" class="form-control" id="depature_city" aria-describedby="dept-city" placeholder="например, Санкт-Петербург" >
</div>
<div class="form-group">
<label for="app-city">Город прибытия</label>
<input type="text" class="form-control" id="app-city" aria-describedby="app-city-desc" placeholder="например, Новоссибирск">
</div>
<div class="form-group">
<label for="type-transpr">Вид транспортировки</label>
<select class="form-control" id="type-transpr">
<option>Доставка самолётом</option>
<option>ЖД доставка</option>
<option>Автотранспортная доставка</option>
</select>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingResults">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#cargo-results" aria-expanded="false" aria-controls="cargo-results">
<i class="fas fa-pencil-ruler"></i> Результаты расчета
</button>
</h2>
</div>
<div id="cargo-results" class="collapse" aria-labelledby="headingResults" data-parent="#accordionExample">
<div class="card-body content-result">
<div class="alert alert-info" role="alert">
<p>Расчет сделан автоматически, реальная стоимость может отличаться на 10% от результатов работы калькулятора.</p>
</div>
<ul class="list-result">
<li>Стоимость доставки 2000 руб.</li>
<li>Сроки доставки груза от 2 до 3 рабочих дней</li>
<li>Доп. параметры: <a href="#" id="other-params">#Заполечивание груза</a> <a href="#">#Страховка груза</a></li>
<li>Параметры груза: <a href="#" id="param-cars">#Защитная транспортная упаковка</a> <a href="#">#Не габаритный груз</a></li>
<li>Тип доставки <a href="#" id="type-delevery">#Авиа доставка</a></li>
<li>Маршрут доставки <a href="#" id="edit-route">#Санкт-Петербург -> Краснодар</a></li>
</ul>
<hr>
<p class="order-delevery"><a href="#"><i class="fas fa-address-card"></i> Заказать доставку</a> <a data-toggle="collapse" href="#collapseResultGoods" role="button" aria-expanded="false" aria-controls="collapseResultGoods"><i class="fas fa-share-square"></i> Скачать резульаты расчета</a></p>
<div class="collapse" id="collapseResultGoods">
<div class="card card-body">
<div class="row">
<div class="col documents-item">
<!-- UI Item or File -->
<a href="ui-38.html#">
<!-- Icon -->
<i class="fas fa-file-excel" style="font-size:40px;"></i>
<!-- Format -->
<span>xls</span>
<!-- File name -->
<h4>some.xls</h4>
</a>
</div>
<div class="col documents-item">
<!-- UI Item or File -->
<a href="ui-38.html#">
<!-- Icon -->
<i class="fas fa-file-excel" style="font-size:40px;"></i>
<!-- Format -->
<span>xls</span>
<!-- File name -->
<h4>some.xls</h4>
</a>
</div>
<div class="col documents-item">
<!-- UI Item or File -->
<a href="ui-38.html#">
<!-- Icon -->
<i class="fas fa-file-excel" style="font-size:40px;"></i>
<!-- Format -->
<span>xls</span>
<!-- File name -->
<h4>some.xls</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapse show" type="button" data-toggle="collapse" data-target="#cargo-parameters" aria-expanded="false" aria-controls="cargo-parameters">
<i class="fas fa-clipboard-list"></i> Параметры груза
</button>
</h2>
</div>
<div id="cargo-parameters" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">*</th>
<th scope="col">Длина,м</th>
<th scope="col">Ширина,м</th>
<th scope="col">Высота,м</th>
<th scope="col">Объем,м3</th>
<th scope="col">Вес,кг</th>
<th scope="col">Кол-во мест</th>
</tr>
</thead>
<tbody>
<tr class="item-params">
<td>
<div class="form-group">
<p class="del-place"><a class="remove" id="remove-tr" href="#">x</a></p>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id ="length-input" placeholder="Длина,м">
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Требуется спец.упаковка</label>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="width-input" placeholder="Ширина,м">
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch2">
<label class="custom-control-label" for="switch2">Груз не габаритный</label>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id ="height-input" placeholder="Высота,м">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id ="v-input" placeholder="Объём,м3" value="0">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" placeholder="Вес,кг">
</div>
</td>
<td>
<div class="stepper">
<input type="number" min="1" value="1" class="stepper-input js-stepper">
<button type="button" class="stepper-arrow up" spinner-button="up" >Up</button>
<button type="button" class="stepper-arrow down" spinner-button="down" >Down</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<p class="bt-managers"><a class="add-more" id ="add-item-params" href="#">Добавить еще место</a></p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#other-parameters" aria-expanded="false" aria-controls="other-parameters">
<i class="fas fa-cogs"></i> Дополнительные параметры груза
</button>
</h2>
</div>
<div id="other-parameters" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<div class="form-inline">
<div class="custom-control custom-checkbox my-1 mr-sm-2 ">
<input type="checkbox" class="custom-control-input" id="strach" value="st-block">
<label class="custom-control-label" for="strach">Страховка для груза</label>
</div>
<div class="form-group st-block" style="display:none">
<label for="price_good">Объявленная стоимость
<input type="text" class=" form-control mx-sm-3" id="price_good" aria-describedby="goods-price-desc" > руб.</label>
</div>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="strach-goods" value="str-block">
<label class="custom-control-label" for="strach-goods">Запаллечивание груза</label>
</div>
<div class="form-group str-block" style="display:none">
<label for="strach-good-count" >Количество палет
<input type="text" class=" form-control mx-sm-3" id="strach-good-count" aria-describedby="strach-good-count">
шт.</label>
</div>
</div>
<div class="form-group">
<a class="comment-goods" data-toggle="collapse" href="#collapseCommentGoods" role="button" aria-expanded="false" aria-controls="collapseCommentGoods">
Есть пожелания к заказу? К заказу опишите
</a>
<div class="collapse" id="collapseCommentGoods">
<div class="card card-body">
<div class="form-group">
<textarea class="form-control " id="comment-goods" placeholder="Комментарий к грузоотправлению" rows="5"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<button class="btn btn-success" id="result-btn"><i class="fas fa-file-invoice"></i> Расчитать стоимость груза</button>
</div>
</form>
</section>
</div>
</div>
</main>
<script src="{{asset('js/app.js')}}"></script>
<script src="https://unpkg.com/[email protected]/dest/stepper.min.js"></script>
<script>
$(document).ready(function(){
let max_fields = 5;
var wrapper = $(".table");
var x = 1;
var input_v = $("#v-input");
/**
* Gjдсчет параметров
*
* пример выполнения как тут:
* https://old.pecom.ru/services-are/the-calculation-of-the-cost/#calc-main
* */
var length = $("#length-input").val();
var width = $("#width-input").val();
var height = $("#height-input").val();
var result = width.parseFloat * height.parseFloat * length.parseFloat;
$(input_v).on('focus',function(e){
e.preventDefault();
$("#v-input").val(result.parseFloat);
});
var fieldHTML = '<tr class="item-params">\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <p class="del-place"><button type ="button" class="remove" id="remove-tr" >x</button></p>\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <input type="text" class="form-control" placeholder="Длина,м">\n' +
' </div>\n' +
' <div class="custom-control custom-switch">\n' +
' <input type="checkbox" class="custom-control-input" id="switch1">\n' +
' <label class="custom-control-label" for="switch1">Требуется спец.упаковка</label>\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <input type="text" class="form-control" placeholder="Ширина,м">\n' +
' </div>\n' +
' <div class="custom-control custom-switch">\n' +
' <input type="checkbox" class="custom-control-input" id="switch2">\n' +
' <label class="custom-control-label" for="switch2">Груз не габаритный</label>\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <input type="text" class="form-control" placeholder="Высота,м">\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <input type="text" class="form-control" placeholder="Объём,м3">\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
' <div class="form-group">\n' +
' <input type="text" class="form-control" placeholder="Вес,кг">\n' +
' </div>\n' +
' </td>\n' +
' <td>\n' +
'\n' +
' <div class="stepper">\n' +
' <input type="number" min="1" value="1" class="stepper-input js-stepper">\n' +
' <button type="button" class="stepper-arrow up" spinner-button="up" >Up</button>\n' +
' <button type="button" class="stepper-arrow down" spinner-button="down" >Down</button>\n' +
' </div>\n' +
'\n' +
' </td>\n' +
' </tr>';
$('#headingResults').hide();
$("#result-btn").on('click',function (e) {
$('#headingResults').show();
$('#cargo-results').collapse('show');
});
$('#strach-goods').change(function (e) {
if($(this).is(':checked'))
$(".str-block").show();
else
$(".str-block").hide();
});
$("#strach").on("change",function (e) {
if($(this).is(':checked'))
$(".st-block").show();
else
$(".st-block").hide();
});
$("#other-params").on('click',function (e) {
e.preventDefault();
$('#headingThree').show();
$('#other-parameters').collapse('show');
});
$("#edit-route").on('click',function(e){
e.preventDefault();
$('#headingOne').show();
$('#route-params').collapse('show');
});
$("#type-delevery").on('click',function(e){
e.preventDefault();
$('#headingOne').show();
$('#route-params').collapse('show');
});
$("#param-cars").on('click',function(e){
e.preventDefault();
$('#headingTwo').show();
$('#cargo-parameters').collapse('show');
});
$("#add-item-params").on('click',function(e){
e.preventDefault();
if (x<max_fields){
x++;
$(".table").append(fieldHTML);
}
else {
$("#add-item-params").hide();
}
});
/**
* реализация удаления элементов формы "Параметров груза"
*/
$('.table').on('click','#remove-tr',function (e) {
e.preventDefault();
if (x>1){
$(this).parents('tr').fadeOut("slow",function(){
$(this).parents("tr").remove(); x--;
});
$("#add-item-params").show();
}
else{
alert('Нет элементов для удаления');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment