mirror of
https://github.com/bcomsugi/dasaproject.git
synced 2026-01-09 15:12:37 +07:00
176 lines
15 KiB
HTML
176 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Search Website1</title>
|
|
<!-- Include Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
|
|
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> -->
|
|
<!-- Include table-resize CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/table-resize@0.5.0/dist/table-resize.min.css">
|
|
<!-- Include jQuery -->
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
|
<style>
|
|
body {
|
|
padding-top: 70px; /* Adjust this value as needed */
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- Include jquery-resizable-columns CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.1.4/dist/jquery-resizable-columns.min.css">
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top w-100">
|
|
<div class="container-fluid">
|
|
<form class="d-flex" action="/search/" method="get">
|
|
<input class="form-control me-2" type="search" name="item_name" placeholder="Item Name" value="{{ input_values.item_name | default('') }}">
|
|
<input class="form-control me-2" type="search" name="cust_id" placeholder="Customer ID" value="{{ input_values.cust_id | default('') }}">
|
|
<input class="form-control me-2" type="search" name="cust_name" placeholder="Customer Name" value="{{ input_values.cust_name | default('') }}">
|
|
<!-- <input class="form-control me-2" type="search" name="start_date" placeholder="Start Date" value="{{ input_values.start_date | default('') }}"> -->
|
|
<input class="form-control me-2" type="date" name="start_date" placeholder="Start Date" aria-label="Start Date" value="{{ input_values.start_date | default('') }}">
|
|
<input class="form-control me-2" type="date" name="end_date" placeholder="End Date" aria-label="End Date" value="{{ input_values.end_date | default('') }}">
|
|
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
<div class="container mt-4">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<!-- Include table-resize JavaScript -->
|
|
<script src="https://unpkg.com/table-resize@0.5.0/dist/table-resize.min.js"></script>
|
|
<script>
|
|
// Initialize table-resize for all tables with the 'table-resizable' class
|
|
window.onload = function() {
|
|
tableResize(document.querySelectorAll('.table-resizable'));
|
|
};
|
|
</script>
|
|
<!-- Include jquery-resizable-columns JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.1.4/dist/jquery-resizable-columns.min.js"></script>
|
|
|
|
<script>
|
|
// Initialize column resizing when the document is ready
|
|
$(document).ready(function() {
|
|
$('.table-resizable').resizableColumns();
|
|
});
|
|
</script>
|
|
<script>
|
|
$(function(){
|
|
$("table").resizableColumns({
|
|
store: window.store
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
/**
|
|
* jquery-resizable-columns - Resizable table columns for jQuery
|
|
* @date Sat May 16 2015 19:03:57 GMT+0100 (BST)
|
|
* @version v0.1.0
|
|
* @link http://dobtco.github.io/jquery-resizable-columns/
|
|
* @license MIT
|
|
*/
|
|
// !function t(e,i,n){function s(a,o){if(!i[a]){if(!e[a]){var h="function"==typeof require&&require;if(!o&&h)return h(a,!0);if(r)return r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var d=i[a]={exports:{}};e[a][0].call(d.exports,function(t){var i=e[a][1][t];return s(i?i:t)},d,d.exports,t,e,i,n)}return i[a].exports}for(var r="function"==typeof require&&require,a=0;a<n.length;a++)s(n[a]);return s}({1:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}var s=t("./class"),r=n(s),a=t("./constants");$.fn.resizableColumns=function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),n=1;e>n;n++)i[n-1]=arguments[n];return this.each(function(){var e=$(this),n=e.data(a.DATA_API);if(n){if("string"==typeof t)return n[t].apply(n,i)}else n=new r["default"](e,t),e.data(a.DATA_API,n)})},$.resizableColumns=r["default"]},{"./class":2,"./constants":3}],2:[function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(i,"__esModule",{value:!0});var s=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),r=t("./constants"),a=function(){function t(e,i){n(this,t),this.ns=".rc"+this.count++,this.options=$.extend({},t.defaults,i),this.$window=$(window),this.$ownerDocument=$(e[0].ownerDocument),this.$table=e,this.refreshHeaders(),this.restoreColumnWidths(),this.syncHandleWidths(),this.bindEvents(this.$window,"resize",this.syncHandleWidths.bind(this)),this.options.start&&this.bindEvents(this.$table,r.EVENT_RESIZE_START,this.options.start),this.options.resize&&this.bindEvents(this.$table,r.EVENT_RESIZE,this.options.resize),this.options.stop&&this.bindEvents(this.$table,r.EVENT_RESIZE_STOP,this.options.stop)}return s(t,[{key:"refreshHeaders",value:function(){var t=this.options.selector;"function"==typeof t&&(t=t.call(this,this.$table)),this.$tableHeaders=this.$table.find(t),this.assignPercentageWidths(),this.createHandles()}},{key:"createHandles",value:function(){var t=this,e=this.$handleContainer;null!=e&&e.remove(),this.$handleContainer=$("<div class='"+r.CLASS_HANDLE_CONTAINER+"' />"),this.$table.before(this.$handleContainer),this.$tableHeaders.each(function(e,i){var n=t.$tableHeaders.eq(e),s=t.$tableHeaders.eq(e+1);if(0!==s.length&&!n.is(r.SELECTOR_UNRESIZABLE)&&!s.is(r.SELECTOR_UNRESIZABLE)){$("<div class='"+r.CLASS_HANDLE+"' />").data(r.DATA_TH,$(i)).appendTo(t.$handleContainer)}}),this.bindEvents(this.$handleContainer,["mousedown","touchstart"],"."+r.CLASS_HANDLE,this.onPointerDown.bind(this))}},{key:"assignPercentageWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);t.setWidth(n[0],n.outerWidth()/t.$table.width()*100)})}},{key:"syncHandleWidths",value:function(){var t=this,e=this.$handleContainer;e.width(this.$table.width()),e.find("."+r.CLASS_HANDLE).each(function(e,i){var n=$(i),s=t.options.resizeFromBody?t.$table.height():t.$table.find("thead").height(),a=n.data(r.DATA_TH).outerWidth()+(n.data(r.DATA_TH).offset().left-t.$handleContainer.offset().left);n.css({left:a,height:s})})}},{key:"saveColumnWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);t.options.store&&!n.is(r.SELECTOR_UNRESIZABLE)&&t.options.store.set(t.generateColumnId(n),t.parseWidth(i))})}},{key:"restoreColumnWidths",value:function(){var t=this;this.$tableHeaders.each(function(e,i){var n=$(i);if(t.options.store&&!n.is(r.SELECTOR_UNRESIZABLE)){var s=t.options.store.get(t.generateColumnId(n));null!=s&&t.setWidth(i,s)}})}},{key:"onPointerDown",value:function(t){if(1===t.which){this.operation&&this.onPointerUp(t);var e=$(t.currentTarget);if(!e.is(r.SELECTOR_UNRESIZABLE)){var i=e.index(),n=this.$tableHeaders.eq(i).not(r.SELECTOR_UNRESIZABLE),s=this.$tableHeaders.eq(i+1).not(r.SELECTOR_UNRESIZABLE),a=this.parseWidth(n[0]),o=this.parseWidth(s[0]);this.operation={$leftColumn:n,$rightColumn:s,$currentGrip:e,startX:this.getPointerX(t),widths:{left:a,right:o},newWidths:{left:a,right:o}},this.bindEvents(this.$ownerDocument,["mousemove","touchmove"],this.onPointerMove.bind(this)),this.bindEvents(this.$ownerDocument,["mouseup","touchend"],this.onPointerUp.bind(this)),this.$handleContainer.add(this.$table).addClass(r.CLASS_TABLE_RESIZING),n.add(s).add(e).addClass(r.CLASS_COLUMN_RESIZING),this.triggerEvent(r.EVENT_RESIZE_START,[n,s,a,o],t),t.preventDefault()}}}},{key:"onPointerMove",value:function(t){var e=this.operation;if(this.operation){var i=(this.getPointerX(t)-e.startX)/this.$table.width()*100;if(0!==i){var n=e.$leftColumn[0],s=e.$rightColumn[0],a=void 0,o=void 0;return i>0?(a=this.constrainWidth(e.widths.left+(e.widths.right-e.newWidths.right)),o=this.constrainWidth(e.widths.right-i)):0>i&&(a=this.constrainWidth(e.widths.left+i),o=this.constrainWidth(e.widths.right+(e.widths.left-e.newWidths.left))),n&&this.setWidth(n,a),s&&this.setWidth(s,o),e.newWidths.left=a,e.newWidths.right=o,this.triggerEvent(r.EVENT_RESIZE,[e.$leftColumn,e.$rightColumn,a,o],t)}}}},{key:"onPointerUp",value:function(t){var e=this.operation;if(this.operation)return this.unbindEvents(this.$ownerDocument,["mouseup","touchend","mousemove","touchmove"]),this.$handleContainer.add(this.$table).removeClass(r.CLASS_TABLE_RESIZING),e.$leftColumn.add(e.$rightColumn).add(e.$currentGrip).removeClass(r.CLASS_COLUMN_RESIZING),this.syncHandleWidths(),this.saveColumnWidths(),this.operation=null,this.triggerEvent(r.EVENT_RESIZE_STOP,[e.$leftColumn,e.$rightColumn,e.newWidths.left,e.newWidths.right],t)}},{key:"destroy",value:function(){var t=this.$table,e=this.$handleContainer.find("."+r.CLASS_HANDLE);return this.unbindEvents(this.$window.add(this.$ownerDocument).add(this.$table).add(e)),e.removeData(r.DATA_TH),t.removeData(r.DATA_API),this.$handleContainer.remove(),this.$handleContainer=null,this.$tableHeaders=null,this.$table=null,t}},{key:"bindEvents",value:function(t,e,i,n){"string"==typeof e?e+=this.ns:e=e.join(this.ns+" ")+this.ns,arguments.length>3?t.on(e,i,n):t.on(e,i)}},{key:"unbindEvents",value:function(t,e){"string"==typeof e?e+=this.ns:e=null!=e?e.join(this.ns+" ")+this.ns:this.ns,t.off(e)}},{key:"triggerEvent",value:function(t,e,i){var n=$.Event(t);return n.originalEvent&&(n.originalEvent=$.extend({},i)),this.$table.trigger(n,[this].concat(e||[]))}},{key:"generateColumnId",value:function(t){return this.$table.data(r.DATA_COLUMNS_ID)+"-"+t.data(r.DATA_COLUMN_ID)}},{key:"parseWidth",value:function(t){return t?parseFloat(t.style.width.replace("%","")):0}},{key:"setWidth",value:function(t,e){e=e.toFixed(2),e=e>0?e:0,t.style.width=e+"%"}},{key:"constrainWidth",value:function(t){return void 0!=this.options.minWidth&&(t=Math.max(this.options.minWidth,t)),void 0!=this.options.maxWidth&&(t=Math.min(this.options.maxWidth,t)),t}},{key:"getPointerX",value:function(t){return 0===t.type.indexOf("touch")?(t.originalEvent.touches[0]||t.originalEvent.changedTouches[0]).pageX:t.pageX}}]),t}();i["default"]=a,a.defaults={selector:function(t){return t.find("thead").length?r.SELECTOR_TH:r.SELECTOR_TD},store:window.store,syncHandlers:!0,resizeFromBody:!0,maxWidth:null,minWidth:.01},a.count=0,e.exports=i["default"]},{"./constants":3}],3:[function(t,e,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var n="resizableColumns";i.DATA_API=n;var s="resizable-columns-id";i.DATA_COLUMNS_ID=s;var r="resizable-column-id";i.DATA_COLUMN_ID=r;var a="th";i.DATA_TH=a;var o="rc-table-resizing";i.CLASS_TABLE_RESIZING=o;var h="rc-column-resizing";i.CLASS_COLUMN_RESIZING=h;var l="rc-handle";i.CLASS_HANDLE=l;var d="rc-handle-container";i.CLASS_HANDLE_CONTAINER=d;var u="column:resize:start";i.EVENT_RESIZE_START=u;var c="column:resize";i.EVENT_RESIZE=c;var f="column:resize:stop";i.EVENT_RESIZE_STOP=f;var E="tr:first > th:visible";i.SELECTOR_TH=E;var v="tr:first > td:visible";i.SELECTOR_TD=v;var $="[data-noresize]";i.SELECTOR_UNRESIZABLE=$},{}],4:[function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(i,"__esModule",{value:!0});{var s=t("./class"),r=n(s),a=t("./adapter");n(a)}i["default"]=r["default"],e.exports=i["default"]},{"./adapter":1,"./class":2}]},{},[4]);
|
|
//# sourceMappingURL=jquery.resizableColumns.min.js.map
|
|
</script>
|
|
<script>
|
|
window.onload = function() {
|
|
(function(){
|
|
var col_element, next_element, cursorStart = 0, dragStart = false, width, height, th_width, next_width = undefined, next_height, resize, resize_left, table_wt, resizeCheck;
|
|
var container = document.getElementById("container"),
|
|
table = document.getElementById("table_resize"),
|
|
table_th = table.getElementsByTagName("th"),
|
|
bodyRect = document.body.getBoundingClientRect()
|
|
|
|
container.style.position = "relative";
|
|
|
|
function mouseDown(){
|
|
resize = this;
|
|
resizeCheck = resize.classList.contains("y_resize");
|
|
var col_index = parseInt(resize.getAttribute("data-resizecol"))-1;
|
|
col_element = table_th[col_index];
|
|
next_element = table_th[col_index+1];
|
|
dragStart = true;
|
|
cursorStart = (resizeCheck)?event.pageX:event.pageY;
|
|
var elm_bound = col_element.getBoundingClientRect();
|
|
width = elm_bound.width;
|
|
table_wt =table.offsetWidth;
|
|
if(next_element != undefined){
|
|
var next_bound = next_element.getBoundingClientRect();
|
|
next_width = next_bound.width;
|
|
}
|
|
resize_left = (this.getBoundingClientRect()).left - bodyRect.left;
|
|
}
|
|
function mouseMove(){
|
|
if(dragStart){
|
|
var cursorPosition = (resizeCheck)?event.pageX:event.pageY;
|
|
var mouseMoved = (cursorPosition - cursorStart);
|
|
var newLeft = resize_left + mouseMoved;
|
|
var newWidth = width + mouseMoved;
|
|
var new_nextWidth, new_nextHeight;
|
|
if(next_element != undefined){
|
|
new_nextWidth = next_width - mouseMoved;
|
|
}
|
|
if(newWidth > 30 && (new_nextWidth > 30 || next_element == undefined)){
|
|
col_element.style.cssText = "width: "+newWidth+"px;";
|
|
if(next_element != undefined){
|
|
next_element.style.cssText = "width: "+new_nextWidth+"px";
|
|
}
|
|
else{
|
|
table.style.width = (table_wt + mouseMoved)+"px";
|
|
}
|
|
resize.style.cssText = "left: "+newLeft+"px;";
|
|
}
|
|
}
|
|
}
|
|
function mouseUp(){
|
|
if(dragStart){
|
|
dragStart = false;
|
|
}
|
|
}
|
|
function initEvents(table_th){
|
|
var tb_resize = container.getElementsByClassName("tb_resize");
|
|
var th_length = table_th.length;
|
|
for(var i = 0; i<th_length; i++){
|
|
document.body.addEventListener("mousemove", mouseMove);
|
|
tb_resize[i].addEventListener("mousedown", mouseDown);
|
|
tb_resize[i].addEventListener("mouseup", mouseUp);
|
|
table_th[i].style.width = th_width+"px";
|
|
}
|
|
}
|
|
function setTdWidth(){
|
|
var elm_bound = table.getBoundingClientRect();
|
|
var table_wt = elm_bound.width;
|
|
var th_length = table_th.length;
|
|
th_width = table_wt/th_length;
|
|
}
|
|
function createResizeDiv(){
|
|
var cont = document.getElementById("container");
|
|
var th_length = table_th.length;
|
|
for(var i=1; i<=th_length; i++){
|
|
var yDiv = document.createElement("div");
|
|
yDiv.className = "y_resize tb_resize";
|
|
yDiv.setAttribute("data-resizecol",i);
|
|
var leftPos = (i*th_width)+0.5;
|
|
yDiv.style.cssText = "left: "+leftPos+"px;";
|
|
cont.append(yDiv);
|
|
}
|
|
}
|
|
|
|
|
|
setTdWidth(table);
|
|
createResizeDiv();
|
|
initEvents(table_th);
|
|
})();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|