Архив метки: javascript

WEB

Диалоговые окна на boostrap5 + jquery

08.06.2022 Павел Грибов Оставить комментарий

Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.

Решение:

function UUID_V4() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function Dialog(title,message,buttons=Array(),callback=function(){}){
  var uuid=UUID_V4();  
       html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';
  html=html+' <div class="modal-dialog modal-lg">';
  html=html+'  <div class="modal-content">';
  html=html+'    <div class="modal-header">';
  html=html+'      <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';
  html=html+'      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
  html=html+'    </div>';
  html=html+'    <div class="modal-body">';
  html=html+'        <p>'+message+'</p>';
  html=html+'    </div>';
  html=html+'    <div class="modal-footer">';
  buttons.forEach(function(bt, index, array) {
    if (index==0){
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';  
    } else {
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';  
    };    
  });
  html=html+'    </div>';
  html=html+'  </div>';
  html=html+' </div>';
  html=html+'</div>';
  $("body").append(html);
  $("#"+uuid).modal("show");
  $("#"+uuid).on("hidden.bs.modal", function () {
    console.log("--закрыли окно");
    $("#"+uuid).remove();
  });
};
Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){
    console.log("!",result);
}

function UUID_V4() {

var S4 = function() {

return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

};

return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

}

function Dialog(title,message,buttons=Array(),callback=function(){}){

var uuid=UUID_V4();

html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';

html=html+' <div class="modal-dialog modal-lg">';

html=html+' <div class="modal-content">';

html=html+' <div class="modal-header">';

html=html+' <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';

html=html+' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';

html=html+' </div>';

html=html+' <div class="modal-body">';

html=html+' <p>'+message+'</p>';

html=html+' </div>';

html=html+' <div class="modal-footer">';

buttons.forEach(function(bt, index, array) {

if (index==0){

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';

} else {

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';

};

});

html=html+' </div>';

html=html+'</div>';

$("body").append(html);

$("#"+uuid).modal("show");

$("#"+uuid).on("hidden.bs.modal", function () {

console.log("--закрыли окно");

$("#"+uuid).remove();

});

};

Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){

console.log("!",result);

}

WEB

JavaScript: создаем и позволяем скачать csv файл

05.05.2022 Павел Грибов Оставить комментарий

Задача: из некого массива данных создать файл и предложить его к закачке пользователем, без участия серверной части.

Решение: Для создания файла воспользуемся функцией Blob, которая позволяет оперировать с бинарными данными. Далее создадим в DOM элемент <a>, поместим в href бинарные данные и сэмулируем нажатие на ссылку. Примерно так:

  //собираем csv файл
                      csv="OKPU;P1;P2;\n";
                      data.result.forEach(function(entry) {
                        csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";  
                      });
                        let a = document.createElement("a");
                        let file = new Blob([csv], {type: 'application/csv'});
                        a.href = URL.createObjectURL(file);
                        a.download = "sender_okpu_data.csv";
                        a.click();

//собираем csv файл

csv="OKPU;P1;P2;\n";

data.result.forEach(function(entry) {

csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";

});

let a = document.createElement("a");

let file = new Blob([csv], {type: 'application/csv'});

a.href = URL.createObjectURL(file);

a.download = "sender_okpu_data.csv";

a.click();

WEB

JavaScript: удаление html тэгов из стороки

11.04.2022 Павел Грибов Оставить комментарий

Задача: удалить из переменной все тэги вида <тэг>бла-бла</тэг>

Решение: воспользуемся регуляркой

txt="<a>Ссылка</a> А тут всё хорошо";
txt=txt.replace(/(<([^>]+)>)/ig, "");
console.log(txt)

txt="<a>Ссылка</a> А тут всё хорошо";

txt=txt.replace(/(<([^>]+)>)/ig, "");

console.log(txt)

Выведет в консоль только «А тут всё хорошо»

WEB

datatables.net: вынос кнопок экспорта в любое место

07.02.2022 Павел Грибов Оставить комментарий

Задача: задать местоположение кнопок экспорта, назначить им собственный стиль

Решение:

var buttons = new $.fn.dataTable.Buttons(table, {
         buttons: [
        { text:"Excel",extend: 'excel', className: 'excel_export_style',
            init: function(api, node, config) {
             $(node).removeClass('btn btn-secondary')
            }
    },
        { text:"Print",extend: 'print', className: 'print_export_style',
            init: function(api, node, config) {
                $(node).removeClass('btn btn-secondary')            
            }
        }
      ]
    }).container().appendTo($('#export_buttons'));

var buttons = new $.fn.dataTable.Buttons(table, {

buttons: [

{ text:"Excel",extend: 'excel', className: 'excel_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

{ text:"Print",extend: 'print', className: 'print_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

]

}).container().appendTo($('#export_buttons'));

WEB

Отрисовка календаря на JavaScript

26.01.2022 Павел Грибов Оставить комментарий

Задача: нарисовать нечто подобное

Решение:

var days_week = [          
          'Жуть',  
          'Понедельник',
          'Вторник',
          'Среда',
          'Четверг',
          'Пятница',
          'Суббота',
          'Воскресенье',
        ];        
      var month_names=[
        "",  
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
      ];
    function GetDayWork(year,month,day){
        dayw=new Date(year, month-1, day).getDay();
        if (dayw==0) return 7;
        return dayw;
    };
    function ReturnToBookingPanel(){
      $(".DateTimePickerForBooking").hide();  
      $(".booking-now").show();
    };
    function GetLastNextCal(month,year,next){
        month=month+next;
        if (month==0){month=12;year--;}
        if (month==13){month=1;year++;}
        PaintBookingMonth(month,year);
    };
    function PaintBookingMonth(month,year){       
       cal_html='';
       cal_html=cal_html+'<div class="calendar_row calendar_row-head">';
       cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';
       cal_html=cal_html+'       <div class="calendar_row-head-arrows">';
       cal_html=cal_html+'            <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_l.svg">';
       cal_html=cal_html+'            </div>';
       cal_html=cal_html+'            <div class="arrow arrow-next"  onclick="GetLastNextCal('+month+','+year+',1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_r.svg">';
       cal_html=cal_html+'           </div>';
       cal_html=cal_html+'       </div>';
       cal_html=cal_html+'</div>'; 
       cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';
       cal_html=cal_html+'   <div class="item">Пн</div>';
       cal_html=cal_html+'   <div class="item">Вт</div>';
       cal_html=cal_html+'   <div class="item">Ср</div>';
       cal_html=cal_html+'   <div class="item">Чт</div>';
       cal_html=cal_html+'   <div class="item">Пт</div>';
       cal_html=cal_html+'   <div class="item">Сб</div>';
       cal_html=cal_html+'   <div class="item">Вс</div>';
       cal_html=cal_html+'</div>';

       days = new Date(year, month, 0).getDate() 
       console.log("Дней в месяце:",days);
       // рисуем, пока не кончатся дни
       day=1;
       while (day<=days) {
          cal_html=cal_html+'<div class="calendar_row">';  
          for(let dayw = 1; dayw <= 7; dayw++) {            
            if (GetDayWork(year, month, day)==dayw){               
                if (day>days){
                  console.log("- пропуск");  
                  cal_html=cal_html+'<div class="item"></div>';  
                } else {
                  console.log(day);  
                  available="available";
                  selected="";
                  if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий
                  if (month==(new Date().getMonth()+1)){
                      if (day<new Date().getDate()) available="";
                      if (day==new Date().getDate()) selected="selected today";
                  };
                  cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';
                };               
               day++;
            } else {
              console.log("- пропуск");  
              cal_html=cal_html+'<div class="item"></div>';  
            };          
          };  
          cal_html=cal_html+'</div>'; 
       };       
       cal_html=cal_html+'<div class="booking_date-current_date">';
       cal_html=cal_html+'   Пятница <span>21.01.2022 январь</span>';
       cal_html=cal_html+'</div>';
       $(".booking_date-wrapper").html(cal_html);
    };
    function ChangeDataForBooking(year,month,day){
       console.log("!ChangeDataForBooking",year,month,day); 
       if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){
         $(".item").removeClass("selected");   
         $('#day_'+year+'_'+month+'_'+day).addClass("selected");
       };
        
    };

100

101

102

103

104

105

106

var days_week = [

'Жуть',

'Понедельник',

'Вторник',

'Среда',

'Четверг',

'Пятница',

'Суббота',

'Воскресенье',

];

var month_names=[

"",

"Январь",

"Февраль",

"Март",

"Апрель",

"Май",

"Июнь",

"Июль",

"Август",

"Сентябрь",

"Октябрь",

"Ноябрь",

"Декабрь"

];

function GetDayWork(year,month,day){

dayw=new Date(year, month-1, day).getDay();

if (dayw==0) return 7;

return dayw;

};

function ReturnToBookingPanel(){

$(".DateTimePickerForBooking").hide();

$(".booking-now").show();

};

function GetLastNextCal(month,year,next){

month=month+next;

if (month==0){month=12;year--;}

if (month==13){month=1;year++;}

PaintBookingMonth(month,year);

};

function PaintBookingMonth(month,year){

cal_html='';

cal_html=cal_html+'<div class="calendar_row calendar_row-head">';

cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';

cal_html=cal_html+' <div class="calendar_row-head-arrows">';

cal_html=cal_html+' <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';

cal_html=cal_html+' <img src="/img/arr_cal_l.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+' <div class="arrow arrow-next" onclick="GetLastNextCal('+month+','+year+',1)">';

cal_html=cal_html+' <img src="/img/arr_cal_r.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+'</div>';

cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';

cal_html=cal_html+' <div class="item">Пн</div>';

cal_html=cal_html+' <div class="item">Вт</div>';

cal_html=cal_html+' <div class="item">Ср</div>';

cal_html=cal_html+' <div class="item">Чт</div>';

cal_html=cal_html+' <div class="item">Пт</div>';

cal_html=cal_html+' <div class="item">Сб</div>';

cal_html=cal_html+' <div class="item">Вс</div>';

cal_html=cal_html+'</div>';

days = new Date(year, month, 0).getDate()

console.log("Дней в месяце:",days);

// рисуем, пока не кончатся дни

day=1;

while (day<=days) {

cal_html=cal_html+'<div class="calendar_row">';

for(let dayw = 1; dayw <= 7; dayw++) {

if (GetDayWork(year, month, day)==dayw){

if (day>days){

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

} else {

console.log(day);

available="available";

selected="";

if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий

if (month==(new Date().getMonth()+1)){

if (day<new Date().getDate()) available="";

if (day==new Date().getDate()) selected="selected today";

};

cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';

};

day++;

} else {

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

};

cal_html=cal_html+'</div>';

};

cal_html=cal_html+'<div class="booking_date-current_date">';

cal_html=cal_html+' Пятница <span>21.01.2022 январь</span>';

cal_html=cal_html+'</div>';

$(".booking_date-wrapper").html(cal_html);

};

function ChangeDataForBooking(year,month,day){

console.log("!ChangeDataForBooking",year,month,day);

if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){

$(".item").removeClass("selected");

$('#day_'+year+'_'+month+'_'+day).addClass("selected");

};

ЖЗГ

Архив метки: javascript

Диалоговые окна на boostrap5 + jquery

JavaScript: создаем и позволяем скачать csv файл

JavaScript: удаление html тэгов из стороки

datatables.net: вынос кнопок экспорта в любое место

Отрисовка календаря на JavaScript

Жизнь замечательных грибов

Июнь 2022
Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30