CodeProject Latest postings for Web Development

How to get an answer to your question

Chris Maunder — Sat, 04 Sep 2010 12:25:00 GMT

For those new to message boards please try to follow a few simple rules when posting your question.

Choose the correct forum for your message. Posting a VB.NET question in the C++ forum will end in tears.
Be specific! Don't ask "can someone send me the code to create an application that does 'X'. Pinpoint exactly what it is you need help with.
Keep the subject line brief, but descriptive. eg "File Serialization problem"
Keep the question as brief as possible. If you have to include code, include the smallest snippet of code you can.
Be careful when including code that you haven't made a typo. Typing mistakes can become the focal point instead of the actual question you asked.
Do not remove or empty a message if others have replied. Keep the thread intact and available for others to search and read. If your problem was answered then edit your message and add "[Solved]" to the subject line of the original post, and cast an approval vote to the one or several answers that really helped you.
If you are posting source code with your question, place it inside <pre></pre> tags. We advise you also check the "Encode "<" (and other HTML) characters when pasting" checkbox before pasting anything inside the PRE block, and make sure "Use HTML in this post" check box is checked.
Be courteous and DON'T SHOUT. Everyone here helps because they enjoy helping others, not because it's their job.
Please do not post links to your question into an unrelated forum such as the lounge. It will be deleted. Likewise, do not post the same question in more than one forum.
Do not be abusive, offensive, inappropriate or harass anyone on the boards. Doing so will get you kicked off and banned. Play nice.
If you have a school or university assignment, assume that your teacher or lecturer is also reading these forums.
No advertising or soliciting.
We reserve the right to move your posts to a more appropriate forum or to delete anything deemed inappropriate or illegal.

cheers,
Chris Maunder

The Code Project | Co-founder
Microsoft C++ MVP

HOW TO ANSWER A QUESTION

Chris Maunder — Mon, 13 Jul 2009 08:40:00 GMT

Apologies for the shouting but this is important.

When answering a question please:

Read the question carefully
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar
If a question is poorly phrased then either ask for clarification, ignore it, or mark it down. Insults are not welcome
If the question is inappropriate then click the 'vote to remove message' button

Insults, slap-downs and sarcasm aren't welcome. Let's work to help developers, not make them feel stupid.

cheers,
Chris Maunder

The Code Project Co-founder
Microsoft C++ MVP

Building a Web-based Code Editor

Steve Raw — Sat, 13 Jul 2024 21:31:00 GMT

I'm currently implementing a web-based code editor into my web project (Project Chromosphere.com). I think some of you might be interested. It's a work in progress, but you can see it here: https://chromosphere.com/chromosphere/scripts/js/ui/sandbox/vsCode/[^]

I considered creating a web-based code editor from scratch. Then, I realized the amount of time and effort to embark on such a thing would be ridiculous. I don't want to spend 1000 hours developing a web-based code editor. So, I'm going with a third-party solution.

Microsoft VS Code[^] offers a good solution. The VS Code code editors are powered by the Monaco Editor[^]. That's the code editor that you are actually embedding into your web page.

To implement this web-based code editor in its most basic form is easy.
See the HTML document source code below:

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple Example Code Editor</title>
</head>
<body>
    <div id="container" style="width: 100%; height: 95.5vh; border: 1px solid grey;"></div>
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs/loader.js"></script>
    <script type="text/javascript">
        require.config({
            paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs" }
        });
        require(["vs/editor/editor.main"], function () {
            var editor = monaco.editor.create(document.getElementById("container"), {
                value: 'function hello() {\n    alert(\'Hello World!\');\n}',
                language: 'javascript'
            });

            monaco.editor.defineTheme("jScriptTheme", {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', foreground: 'aaaaaa' },
                    { token: 'invalid', foreground: 'ff3333' },
                    { token: 'emphasis', fontStyle: 'italic' },
                    { token: 'strong', fontStyle: 'bold' },
                    { token: 'variable', foreground: 'bbbbbb' },
                    { token: 'variable.predefined', foreground: 'eeeeee' },
                    { token: 'constant', foreground: 'f08c36' },
                    { token: 'comment', foreground: '00bb00', fontStyle: 'italic' },
                    { token: 'number', foreground: 'f08c36' },
                    { token: 'number.hex', foreground: 'f08c36' },
                    { token: 'regexp', foreground: '4dbf99' },
                    { token: 'annotation', foreground: '41a6d9' },
                    { token: 'type', foreground: '41a6d9' },
                    { token: 'delimiter', foreground: 'cceeff' },
                    { token: 'delimiter.html', foreground: '5c6773' },
                    { token: 'delimiter.xml', foreground: '5c6773' },
                    { token: 'tag', foreground: 'e7c547' },
                    { token: 'tag.id.jade', foreground: 'e7c547' },
                    { token: 'tag.class.jade', foreground: 'e7c547' },
                    { token: 'meta.scss', foreground: 'e7c547' },
                    { token: 'metatag', foreground: 'e7c547' },
                    { token: 'metatag.content.html', foreground: '86b300' },
                    { token: 'metatag.html', foreground: 'e7c547' },
                    { token: 'metatag.xml', foreground: 'e7c547' },
                    { token: 'metatag.php', fontStyle: 'bold' },
                    { token: 'key', foreground: '41a6d9' },
                    { token: 'string.key.json', foreground: '41a6d9' },
                    { token: 'string.value.json', foreground: '86b300' },
                    { token: 'attribute.name', foreground: 'f08c36' },
                    { token: 'attribute.value', foreground: '0451A5' },
                    { token: 'attribute.value.number', foreground: 'abb0b6' },
                    { token: 'attribute.value.unit', foreground: '86b300' },
                    { token: 'attribute.value.html', foreground: '86b300' },
                    { token: 'attribute.value.xml', foreground: '86b300' },
                    { token: 'string', foreground: 'd88bfc' },
                    { token: 'string.html', foreground: 'd88bfc' },
                    { token: 'string.sql', foreground: 'd88bfc' },
                    { token: 'string.yaml', foreground: 'd88bfc' }
                ],
                colors: {
                    'editor.background': '#000025'
                }
            });
            monaco.editor.setTheme("jScriptTheme");
        });
    </script>
</body>
</html>

Below is the HTML document source for my Configured JavaScript code editor[^].
See the HTML document source code below:

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Configured Example Code Editor</title>
</head>
<body>
    <div id="container" style="width: 100%; height: 95.5vh; border: 1px solid grey;"></div>
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs/loader.js"></script>
    <script type="text/javascript">
        require.config({
            paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs" }
        });
        require(["vs/editor/editor.main"], function () {
            var container = document.getElementById("container");
            if (container !== null) {
                container.style.width = "calc(100% - 2px)";
                container.style.height = ((window.innerHeight) - 4) + "px";
                container.style.overflowY = "hidden";
                container.style.margin = "0";
                container.style.padding = "0";
                document.body.style.margin = "0";
                document.body.style.padding = "0";
            }
            var editor = monaco.editor.create(document.getElementById("container"), {
                value: "function hello(){\nalert('Hello world!');}",
                language: "javascript",
                theme: "vs-dark",
                "autoIndent": true,
                "formatOnPaste": true,
                "formatOnType": true,
                keywords: [
                    "break", "case", "catch", "class", "continue", "const",
                    "constructor", "debugger", "default", "delete", "do", "else",
                    "export", "extends", "false", "finally", "for", "from", "function",
                    "get", "if", "import", "in", "instanceof", "let", "new", "null",
                    "return", "set", "super", "switch", "symbol", "this", "throw", "true",
                    "try", "typeof", "undefined", "var", "void", "while", "with", "yield",
                    "async", "await", "of"
                ],

                typeKeywords: [
                    "any", "boolean", "number", "object", "string", "undefined"
                ],

                operators: [
                    "<=", ">=", "==", "!=", "===", "!==", "=>", "+", "-", "**",
                    "*", "/", "%", "++", "--", "<<", "</", ">>", ">>>", "&",
                    "|", "^", "!", "~", "&&", "||", "?", ":", "=", "+=", "-=",
                    "*=", "**=", "/=", "%=", "<<=", ">>=", ">>>=", "&=", "|=",
                    "^=", "@",
                ]
            });

            setTimeout(function () {
                editor.getAction('editor.action.formatDocument').run();
                //HTTP_POST_function(editor.getValue());
            }, 200);

            monaco.editor.defineTheme('jScriptTheme', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', foreground: 'aaaaaa' },
                    { token: 'invalid', foreground: 'ff3333' },
                    { token: 'emphasis', fontStyle: 'italic' },
                    { token: 'strong', fontStyle: 'bold' },
                    { token: 'variable', foreground: 'bbbbbb' },
                    { token: 'variable.predefined', foreground: 'eeeeee' },
                    { token: 'constant', foreground: 'f08c36' },
                    { token: 'comment', foreground: '00bb00', fontStyle: 'italic' },
                    { token: 'number', foreground: 'f08c36' },
                    { token: 'number.hex', foreground: 'f08c36' },
                    { token: 'regexp', foreground: '4dbf99' },
                    { token: 'annotation', foreground: '41a6d9' },
                    { token: 'type', foreground: '41a6d9' },
                    { token: 'delimiter', foreground: 'cceeff' },
                    { token: 'delimiter.html', foreground: '5c6773' },
                    { token: 'delimiter.xml', foreground: '5c6773' },
                    { token: 'tag', foreground: 'e7c547' },
                    { token: 'tag.id.jade', foreground: 'e7c547' },
                    { token: 'tag.class.jade', foreground: 'e7c547' },
                    { token: 'meta.scss', foreground: 'e7c547' },
                    { token: 'metatag', foreground: 'e7c547' },
                    { token: 'metatag.content.html', foreground: '86b300' },
                    { token: 'metatag.html', foreground: 'e7c547' },
                    { token: 'metatag.xml', foreground: 'e7c547' },
                    { token: 'metatag.php', fontStyle: 'bold' },
                    { token: 'key', foreground: '41a6d9' },
                    { token: 'string.key.json', foreground: '41a6d9' },
                    { token: 'string.value.json', foreground: '86b300' },
                    { token: 'attribute.name', foreground: 'f08c36' },
                    { token: 'attribute.value', foreground: '0451A5' },
                    { token: 'attribute.value.number', foreground: 'abb0b6' },
                    { token: 'attribute.value.unit', foreground: '86b300' },
                    { token: 'attribute.value.html', foreground: '86b300' },
                    { token: 'attribute.value.xml', foreground: '86b300' },
                    { token: 'string', foreground: 'd88bfc' },
                    { token: 'string.html', foreground: 'd88bfc' },
                    { token: 'string.sql', foreground: 'd88bfc' },
                    { token: 'string.yaml', foreground: 'd88bfc' }
                    /*
                    { token: 'keyword', foreground: 'f2590c' },
                    { token: 'keyword.json', foreground: 'f2590c' },
                    { token: 'keyword.flow', foreground: 'f2590c' },
                    { token: 'keyword.flow.scss', foreground: 'f2590c' },
                    { token: 'operator.scss', foreground: '666666' },
                    { token: 'operator.sql', foreground: '778899' },
                    { token: 'operator.swift', foreground: '666666' },
                    { token: 'predefined.sql', foreground: 'FF00FF' },
                    */
                ],
                colors: {
                    'editor.background': '#000025',
                    /*
                    'editor.foreground': '#5c6773',
                    'editorIndentGuide.background': '#ecebec',
                    'editorIndentGuide.activeBackground': '#e0e0e0',
                    */
                }
            });
            monaco.editor.setTheme('jScriptTheme');
        }); 
    </script>  
</body>
</html>

Creating a Synthetic Mouse Event: Event Sequence?

Steve Raw — Sat, 13 Jul 2024 19:12:00 GMT

I wrote a function in JavaScript that creates synthetic events to simulate a full mouse event. What I mean by "full" is that I'm creating and dispatching the "mouseenter", "mouseover", "mousemove", "mousedown", "mouseup", "click", and "mouseout" events.

In what order do the "mouseenter", "mouseover", and "mousemove" events occur? I've tried looking this up, but I'm not getting anything.

fullcalendar with resourcetimeline laravel php

mohammed naseralla — Thu, 27 Jun 2024 10:43:00 GMT

how do you use Draggable events with read start and end dates from the event and fix them but choose resource?

<pre lang="text"><pre lang="Javascript">
<pre><script id="rendered-js">
        document.addEventListener('DOMContentLoaded', function () {

            var date = new Date()
            var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear()

            var Calendar = FullCalendar.Calendar;
            //var Draggable = FullCalendar.Draggable;

            var containerEl = document.getElementById('external-events');
            var checkbox = document.getElementById('drop-remove');

            var Draggable = FullCalendarInteraction.Draggable;

            new Draggable(containerEl, {
                itemSelector: '.external-event',
                eventData: function (eventEl) {
                    return {
                        id: eventEl.getAttribute('data-id'),
                        title: eventEl.getAttribute('data-title'),
                        start: eventEl.getAttribute('data-start'),
                        end: eventEl.getAttribute('data-end'),
                        resourceId: eventEl.getAttribute('data-resource-id'),
                        description: eventEl.getAttribute('data-description'),
                        backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                        borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                        textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color')
                    };
                }
            });


            let calendarEl = document.getElementById('calendar');
            let calendar;

            let start = '2024-05-01';
            let end = '2024-06-31';

            let resourcesurl = '/resources';//alert(resourcesurl);
            let zone = '{{$zone}}';
            let available = '{{$available}}';
            let resourcesIndex = 0;

            if (zone === '1') {
                resourcesIndex += 1;
                if (resourcesIndex === 1) {
                    resourcesurl += '?zone=on';
                } else {
                    resourcesurl += '&zone=on';
                }
            }
            if (available === '1') {
                resourcesIndex += 1;
                if (resourcesIndex === 1) {
                    resourcesurl += '?available=on';
                } else {
                    resourcesurl += '&available=on';
                }
            }

            u/foreach ($Branches as $key => $branch)
                @isset($data['BranchChoose'.$key])
                resourcesIndex += 1;
            if (resourcesIndex === 1) {
                resourcesurl += '?BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
            } else {
                resourcesurl += '&BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
            }
            @endisset
            @endforeach

            calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'resourceTimeline'],
                timeZone: 'UTC',
                defaultView: 'resourceTimelineDay',
                aspectRatio: 1.5,
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay'//,resourceTimelineWeek,resourceTimelineMonth
                },

                views: {
                    resourceTimelineDay: {
                        duration: {days: 10},
                        // type: 'timeline',
                        slotDuration: '{{$plus}}'
                    }
                },

                now: '{{$start_str_now}}',
                editable: true,
                droppable: true,
                resourceLabelText: '@lang("Car Plate Number")',
                resources: resourcesurl,//resourcesurl,//'/resources?zone=on&available=on',//resourcesurl,//'/resources',
                events: '/events?days=10&date={{$start_str_now}}',//?start=${start}&end=${end}

                eventRender: function (info) {

                    var eventObj = info.event;
                    var start = eventObj.start;
                    var end = eventObj.end;
                    var title = eventObj.title;

                    console.log('Event: ' + title + '\nStart: ' + start + '\nEnd: ' + end);

                    // // Fix the start and end dates here
                    // info.event.setStart('2024-06-23T00:00:00'); // Example fixed start date
                    // info.event.setEnd('2024-06-30T00:00:00');   // Example fixed end date

                    // Clear any existing icons
                    info.el.querySelectorAll('.custom-icon').forEach(function (icon) {
                        icon.remove();
                    });

                    let titleEl = '';

                    // Add custom icons before the title
                    if (info.event.extendedProps.icons) {
                         titleEl = info.el.querySelector('.fc-title');
                        info.event.extendedProps.icons.forEach(function (iconData) {
                            var icon = document.createElement('span');
                            icon.classList.add('custom-icon');
                            icon.innerHTML = iconData.html;
                            icon.setAttribute('title', iconData.tooltip); // Set tooltip for icon
                            // Insert icon before the title element
                            titleEl.parentNode.insertBefore(icon, titleEl);
                        });
                    }

                    // Set tooltip for the title
                    if (info.event.extendedProps.tooltip) {
                        info.el.querySelector('.fc-title').setAttribute('title', info.event.extendedProps.tooltip);
                    }


                    // info.event.start = 'Sun Jun 23 2024 03:00:00 GMT+0300 (GMT+03:00)';
                    // info.event.end = 'Sun Jun 30 2024 03:00:00 GMT+0300 (GMT+03:00)';
                    {{--console.log('Event id:',info.event.id);--}}
                    {{--$.ajax({--}}
                    {{--    url: '/calendar/ID',--}}
                    {{--    method: 'POST',--}}
                    {{--    data: {--}}
                    {{--        id: info.event.id,--}}
                    {{--        resourceId: info.event.id,--}}
                    {{--        // start: startDate,--}}
                    {{--        // end: endDate,--}}
                    {{--        _token: '{{ csrf_token() }}'--}}
                    {{--    },--}}
                    {{--    success: function(response) {--}}
                    {{--        // Assuming the response contains new start and end dates--}}
                    {{--        var newStart = response.start;--}}
                    {{--        var newEnd = response.end;--}}

                    {{--        info.event.setStart(newStart);--}}
                    {{--        info.event.setEnd(newEnd);--}}

                    {{--        console.log('Event newstart:',newStart);--}}
                    {{--        console.log('Event newend:',newEnd);--}}
                    {{--    },--}}
                    {{--    error: function (xhr) {--}}
                    {{--        info.revert();--}}
                    {{--    }--}}
                    {{--});--}}



                    // Calculate and display the duration
                    if (info.event.start && info.event.end) {
                        console.log('Event start:',info.event.start);
                        console.log('Event end:',info.event.end);

                        var duration = moment(info.event.end).diff(moment(info.event.start), 'hours');
                        var durationEl = document.createElement('span');
                        durationEl.classList.add('event-duration');
                        durationEl.innerText = `(${duration} hrs)`;

                         titleEl = info.el.querySelector('.fc-title');
                        if (titleEl) {
                            titleEl.appendChild(durationEl);
                        } else {
                            var timeEl = document.createElement('div');
                            timeEl.classList.add('fc-title');
                            timeEl.appendChild(durationEl);
                            info.el.appendChild(timeEl);
                        }
                    }

                    console.log('Event ID:', info.event.id);

                    console.log('Event ID:', 222222);
                },

                dateClick: function (info) {
                    var selectedDate = info.dateStr;
                    var elements = document.querySelectorAll('.fc-daygrid-day[data-date="' + selectedDate + '"]');
                    elements.forEach(function (element) {
                        element.style.backgroundColor = 'lightgreen';
                    });
                    console.log('Event ID:', 111111);
                },

                eventDidMount: function (info) {
                    // Change background on hover

                    // console.log('Event ID:', element.style.backgroundColor);

                    let element = info.el;
                    let originalBackground = element.style.backgroundColor;

                    // console.log('Event ID:', element.style.backgroundColor);

                    element.addEventListener('mouseover', function () {
                        // console.log('Event ID:', element.style.backgroundColor);
                        element.style.backgroundColor = 'lightgreen';
                    });

                    element.addEventListener('mouseout', function () {
                        // console.log('Event ID:', element.style.backgroundColor);
                        element.style.backgroundColor = originalBackground;
                    });
                },

                drop: function (info) {
                    if ($('#drop-remove').is(':checked')) {
                        info.draggedEl.parentNode.removeChild(info.draggedEl);
                    }
                },

                eventReceive: function(info) {
                    var event = info.event;

                    // Get start and end dates
                    // var startDate = event.start.toISOString();
                    // var endDate = event.end ? event.end.toISOString() : startDate;

                    console.log('Event ID:', event.id);
                    //console.log('Resource ID:', event.getResources()[0].id);
                    // console.log('Start Date:', startDate);
                    // console.log('End Date:', endDate);

                    $.ajax({
                        url: '/calendar/update',
                        method: 'POST',
                        data: {
                            id: event.id,
                            resourceId: event.getResources()[0].id,
                            // start: startDate,
                            // end: endDate,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            alert(response.success);
                            calendar.refetchEvents();
                        },
                        error: function (xhr) {
                            info.revert();
                        }
                    });
                },

                eventDrop: function (event, delta, revertFunc) {
                    //console.log('Event ID:', event.event.id);
                    //console.log('Event ID:', event.event._def.resourceIds[0]);
                    $.ajax({
                        url: '/calendar/update',
                        method: 'POST',
                        data: {
                            id: event.event.id,
                            resourceId: event.event._def.resourceIds[0],
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            alert(response.success);
                        },
                        error: function (xhr) {
                            revertFunc();
                        }
                    });
                },

            });
            calendar.render();



            $('.fc-event').mouseenter(function () {
                $(this).addClass('fc-event-hover');
            });
            $('.fc-event').mouseleave(function () {
                $(this).removeClass('fc-event-hover');
            });

            // // Initialize the external events
            // $('#external-events .external-event').each(function () {
            //     // Store data so the calendar knows to render an event upon drop
            //     $(this).data('event', {
            //         title: $.trim($(this).text()), // Use the element's text as the event title
            //         stick: true // Maintain the event on the calendar after it is dropped
            //     });
            //
            //     // Make the event draggable using jQuery UI
            //     $(this).draggable({
            //         zIndex: 999,
            //         revert: true, // Will cause the event to go back to its original position after the drag
            //         revertDuration: 0 // 0 means no animation
            //     });
            //
            // });

            // Initialize the external events
            $('#external-events .external-event').each(function () {
                // Make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true, // Will cause the event to go back to its original position after the drag
                    revertDuration: 0, // 0 means no animation
                    // Use the helper function to create a clone that represents the event
                    helper: function () {
                        var title = $(this).text().trim();
                        return $('<div class="fc-event">').text(title);
                    },
                    // Pass the event data to FullCalendar on drag start
                    start: function (event, ui) {
                        var eventData = {
                            id: $(this).attr('data-id'),
                            title: $(this).text().trim(),
                            start: $(this).attr('data-start'),
                            end: $(this).attr('data-end'),
                            resourceId: $(this).attr('data-resource-id'),
                            description: $(this).attr('data-description'),
                            backgroundColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
                            borderColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
                            textColor: window.getComputedStyle(this, null).getPropertyValue('color')
                        };
                        // Store the event data on the dragged element
                        $(this).data('eventData', eventData);
                    }
                });
            });



        });
        //# sourceURL=pen.js
    </script>

JavaScript

<pre lang="HTML">

<pre><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Draggable Events</h4>
                        </div>
                        <div class="card-body">
                            <div id="external-events">
                                <!-- PHP loop to generate draggable events -->
                                @foreach ($events as $event)
                                    <div class="external-event"
                                         id="event_{{ $event->id }}"
                                         data-id="{{ $event->id }}"
                                         data-title="{{ $event->title }}"
                                         data-start="{{ $event->start }}"
                                         data-end="{{ $event->end }}"
                                         data-resource-id="{{ $event->resourceId }}"
                                         data-description="{{ $event->description }}"
                                         style="background-color: {{ $event->color }}; color: white;">
                                        {{ $event->title }}
                                    </div>
                                @endforeach
                                <div class="checkbox">
                                    <label for="drop-remove">
                                        <input type="checkbox" checked="checked" readonly id="drop-remove">
                                        remove after drop
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>

Can you use ApiKey and JWT in the same web API

Mycroft Holmes — Tue, 25 Jun 2024 01:29:00 GMT

I have a web api that services both wpf and browser clients. WPF only requires and ApiKey built into the application while the web will require authentication and authorisation (using JWT bearer tokens).

If so does anyone have an example.

Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP

Do I need Open API when using Azure

Mycroft Holmes — Thu, 13 Jun 2024 02:06:00 GMT

I have a really simple API and see no need to implement open API except I want to host it on Azure (where my 2 table database is hosted). The overhead and learning curve for swagger is greater than the API learning curve.

So is it possible to host a non Open API on azure.

[edit]Search co pilot for "do I need open api to publish to azure" - the answer is no you do not need it. [/edit]

Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP

Opinions of WIX

DerekT-P — Tue, 11 Jun 2024 19:19:00 GMT

I'm a long-term web developer, used to building web-based applications in ASP.Net and using CSS, semantic markup, Javascript, AJAX and dynamically-generated content at the server. I'm happy hand-coding CSS and crafting HTML using classes, defining grids, floats etc. etc..

I've recently been "commandeered" by a charity I volunteer with to assist their overworked webmaster. Their website is primarily static pages, and end-users can add blog entries for specific categories. There's no server-side form processing involved. BUT the site is running on the WIX platform. It is possible to write page-specific CSS, but it won't do you much good as WIX generates its own HTML from your definitions of strips, sections, text etc - and doesn't let you add classnames or element IDs.

The webmaster reckons WIX is the bees-knees and claims that "Wix is probably the leading web platform around today. ... Wix is truly state of the art and the market leader." He also claims that it generates "responsive pages" - but the "responsiveness", such as it is, is done at the server. This means if you open a page on a mobile phone, then turn it into landscape, the page doesn't re-flow or re-structure; it just makes everything bigger to fill the width. This is NOT my understanding of "responsive design"...

I'm curious as to others' opinion of Wix, and whether I'm missing something obvious, or am way behind the web design trend.

Telegraph marker posts ... nothing to do with IT
Phasmid email discussion group ... also nothing to do with IT
Beekeeping and honey site ... still nothing to do with IT

Configuration Error

Richard Andrew x64 — Wed, 15 May 2024 20:32:00 GMT

I configured my website in IIS to use Windows Authentication, and it works when I don't try to add Authorization Rules.

However, I added an Allow rule to allow only users in the Administrators group, and it gives the below error when attempting to load the page:

HTTP Error 500.19 - Internal Server Error

Quote:
Cannot add duplicate collection entry of type 'add' with combined key attributes 'users, roles, verbs' respectively set to ', Administrators, '

This is what my web config looks like:
<security>
<authorization>
<remove users="*" roles="" verbs="" />
<add accessType="Allow" users="" roles="Administrators" />
</authorization>
</security>

Can anyone see what I'm doing wrong?

The difficult we do right away...
...the impossible takes slightly longer.

Identity Management Recommendations

Richard Andrew x64 — Tue, 14 May 2024 13:45:00 GMT

My company wants to create an internal portal website as a gateway to our applications that is hosted in an on-premises web server.

I don't want to try to re-invent the identity management, login and authorization process.

Is there any third-party solution that can be integrated with a local website to perform login functionality and user management?

The difficult we do right away...
...the impossible takes slightly longer.

Gemfile.lock parsing/linting

James Curran — Wed, 08 May 2024 21:17:00 GMT

Every week I get a Dependabot alerts from github about my repositories, but when I go to have github build the needed PR to do the updates, it always fails with the error "/Gemfile.lock not parseable". The file looks good to me, but then I really have no idea what it's supposed to look like. IS there online service that will parse & lint a gemfile and tell me what's wrong with it?

Truth,

James

Swagger Generated URL Questtion

Kevin Marois — Fri, 26 Apr 2024 22:37:00 GMT

I have an Asp.Net MVC API with this controller :

namespace ApiDemo.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class UsersController : ControllerBase
    {
        [HttpGet("{id}/{name}/{birthDate}/{isAlive}/{presNo}")]
        public IActionResult Get(int id, string name, DateTime birthDate, bool isAlive, int presNo)
        {
            return StatusCode(200);
        }
    }
}

When I call this Swagger generates this Request URL:

https:// localhost:7062/api/Users/Get/12345/Rutherford%20Birchard%20Hayes%20/1822-10-04%205%3A13%3A22/false/19

I don't understand the instances of '%20B' or '%3A22'. They are not always the same. What are these? Where are they coming from?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

ASP.Net MVC Core API Question Revisited

Kevin Marois — Fri, 19 Apr 2024 05:44:00 GMT

I posted on this yesterday, but I haven't made any progress.

I'm just trying to set up a simplet test API. Here's my controller:

[Route("api/user")]
[ApiController]
public class UserController : _ControllerBase
{
    public UserController(IConfiguration configuration) :
        base(configuration)
    {
    }

    [HttpGet("getById/{id}")]
    public IActionResult GetById([FromQuery]int id)
    {
        try
        {
            var repo = new Repository(GetDataContext());

            var owner = repo.GetById(id);

            if (owner is null)
            {
                return NotFound();
            }
            else
            {
                return Ok(owner);
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, "Internal server error");
        }
    }

    [HttpGet]
    public IActionResult GetAll()
    {
        try
        {
            var repo = new Repository(GetDataContext());

            var owners = repo.GetAll();

            return Ok(owners);
        }
        catch (Exception ex)
        {
            return StatusCode(500, "Internal server error");
        }
    }

    [HttpPost]
    public IActionResult Test([FromBody]TestEntity testEntity)
    {
        return StatusCode(200);
    }
}

I can call the first two methods, GetAll and GetById like this:

https: //localhost:5001/api/User
and
https: //localhost:5001/api/User/GetById/1

and they both return data. But this gives me a Not Found error

[HttpPost]
public IActionResult Test([FromBody]TestEntity testEntity)
{
//...
}

called using Postman like this:

https: //localhost:5001/api/User/test/{"id": 10,"name": Someone Else}

Questions
First, I'm not even sure I have the controller methods set up right. I don't really understand when/why to use the various attributes such as [FromBody] & [FromQuery]. I'm slowly learning by I may have it wrong here.

If I'm passing an object, as opposed to say an int, what should the method signature look like? Do I use FromBody or FromQuery? My Google searches return many different results. What would the correct syntax look like?

Second, the way I'm passing params, seperated by '/' seems wrong. Shouldn't the call to the API look something like this?

https: //localhost:2001/api/User/GetById?id=123

Am I doing something wrong here?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

ASP.Net MVC Core API Question

Kevin Marois — Thu, 18 Apr 2024 06:06:00 GMT

I'm trying to learn ASP.Net MVC Core API. I think I'm doing the routing wronge.

I have a UserController:

namespace Falcon.API.Controllers
{
    [Route("api/user")]
    [ApiController]
    public class UserController : _ControllerBase
    {
        public UserController(IConfiguration configuration) :
            base(configuration)
        {
        }

        [HttpGet("getById/{id}")]
        public IActionResult GetById(int id)
        {
            try
            {
                var repo = new Repository(GetDataContext());

                var owner = repo.GetById(id);

                if (owner is null)
                {
                    return NotFound();
                }
                else
                {
                    return Ok(owner);
                }
            }
            catch (Exception ex)
            {
                return StatusCode(500, "Internal server error");
            }
        }

        [HttpGet]
        public IActionResult GetAll()
        {
            try
            {
                var repo = new Repository(GetDataContext());

                var owners = repo.GetAll();

                return Ok(owners);
            }
            catch (Exception ex)
            {
                return StatusCode(500, "Internal server error");
            }
        }

        [HttpGet("login/{username}/{password}")]
        public IActionResult Login(string userName, string password)
        {
            try
            {
                var repo = new UserRepository(GetDataContext());

                var owner = repo.Login(userName, password);

                if (owner is null)
                {
                    return NotFound();
                }
                else
                {
                    return Ok(owner);
                }
            }
            catch (Exception ex)
            {
                return StatusCode(500, "Internal server error");
            }
        }
    }
}

When I call it, I'm doing this:

public async Task Login(string userName, string password)
{
    UserEntity results = null;

    var url = $"https:// localhost:5001/api/User/Login/{userName}/{password}";

    using (var httpClient = new HttpClient())
    {
        using (var response = await httpClient.GetAsync(url))
        {
            string apiResponse = await response.Content.ReadAsStringAsync();
            results = JsonConvert.DeserializeObject(apiResponse);
        }
    }

    return results;
}

This works. It calls the GetAll

https: //localhost:5001/api/User

This works when calling GetById

https: //localhost:5001/api/User/GetById/1

This does NOT work. I get a not found

https: //localhost:5001/api/User/Login/jsmith/mypass

Can someone tell me what's wrong?

In theory, theory and practice are the same. But in practice, they never are.”
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.

What is generally the current best method for storing uploaded documents?

we5inelgr — Thu, 07 Mar 2024 02:06:00 GMT

Hi forum,

What is currently the best method, in terms of security as well as scalability and least complexity, to store user uploaded documents on a shared hosting platform?

Is it to store the uploaded documents in a secure folder(s) location with a reference pointer (file path) in the database?

Or store the documents in the database itself (blob datatype)?

Or use a nosql "document store" version of the database?

The documents uploaded will be:

Mix of sensitive information (ex. containing a living person's date of birth) as well as historical, non-sensitive information

Varying in size from 1 page or image to several dozen

Varying in document type, mainly from .pdf, image files (.png, .jpeg, etc), .doc or .txt text files (there will be no audio or video file types)

The number of documents stored in the first year is estimated between 100 and 500, with about 1000 to 1200 additional each of the next couple of years.

If/when the site outgrows a shared hosting environment, other hosted solutions will be explored.

Other info:

PHP version 8.3.2
MySQL version 8.3.0 (InnoDB type used)

Thanks in advance!

Looking for a working working sample google maps on blazor web app with loading markers from database

urx1941 — Thu, 25 Jan 2024 10:19:00 GMT

iam looking for a working sample google maps on blazor web app with loading markers from database.
Using C# and SQL Server Database.
Everything i found i written for example with syncfusion or telerik controls.
or with old asp.net
could anyone help me?

Setting a CORS header, and allowing my Javascript modules that are inlined

jkirkerx — Wed, 24 Jan 2024 21:30:00 GMT

I'm at the end of the project finally, and I'm putting the wraps on it.

I started programming headers in PHP for cache, and then it expanded into security as well. I built a system of ECMAScript modules, and my entry point module is being blocked by my CORS header. I can't figure this out, and could use some guidance on the subject.

Here is what I have.
/assets/scripts/core
/assets/scripts/core/coreExternal.module.js

coreExternal.module.js content

window.coreExternal {
  setCommissionStartDate,
  setCommissionStopDate, and so forth

On the WebPage, I use a script tag to load coreExternal
<script type="module" src="/pcad/assets/scripts/core/coreExternal.module.js"></script>
This call to the module, makes the window.coreExternal functions look like dangerous inlined script.

This is my PHP header for CORS

$nonce = base64_encode(random_bytes(16));
header("Content-Security-Policy: default-src 'self' *.fontawesome.com; script-src 'self' 'unsafe-inline' /pcad/assets/scripts/core/ https://kit.fontawesome.com/ 'nonce-".$nonce."' 'sha256-...'; style-src 'self'; img-src 'self' data:;");

From reading the documentation from Content Security Policy, I added 'unsafe-inline' which should sledge hammer out my modules, but they are still blocked.

Error Message:
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
Source: coreExternal.setCommissionStartDate(this… assignCommission.phtml

My Questions
I don't do CORS stuff everyday, just once every few years, and this is the first time I've done it in code, and not used the web server to program this. Perhaps I have the concept going but failed in execution, well I'm sure that's it.

Do I need the access-control headers?
Did I paint myself into a corner using modules the way I did?
Is one policy canceling another policy?

I still have issues with these error messages as well

Quote:
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).
Source: --bs-breadcrumb-divider: '>'; viewVendors.phtml

The manual style I added to the table element

Quote:
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).
Source: width: 100%; border: none; viewVendors.phtml

These are my headers in PHP. At this point, YES I am throwing darts at the wall on this, plus SMH and

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0");
header("Pragma: no-cache");
header("Strict-Transport-Security: max-age=31536000; includeSubDomains; preload");
header("X-Content-Type-Options: nosniff");
header("X-Frame-Options: DENY");
header("X-XSS-Protection: 1; mode=block");
header('Referrer-Policy: same-origin');

header("Access-Control-Allow-Origin: self");   // Replace * with the actual origin(s) you want to allow
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Expose-Headers: *");

// Best Version that works - 01/24/2024 jKirkerx - Warning: Content-Security-Policy: The page’s settings blocked the loading of a resource at https://kit.fontawesome.com/ea5e36f877.js ("script-src").
header("Content-Security-Policy: default-src 'self' *.fontawesome.com; script-src 'self' 'unsafe-inline' /pcad/assets/scripts/core/ https://kit.fontawesome.com/ 'nonce-".$nonce."' 'sha256-...'; style-src 'self'; img-src 'self' data:;");

If it ain't broke don't fix it
Discover my world at jkirkerx.com

JS Arrow functions this & setTimeout scope

Member 16183444 — Tue, 16 Jan 2024 12:46:00 GMT

I'm following this tut on js: Arrow Functions JavaScript Tutorial - What NOT to do!!! , and in the part where he explains why not to use setTimeout inside arrow functions, the justification is that they look for scope on the window. and not on the enclosed scope of arrowFunc method. But the tests i made, had the opposite results: the named functions had window, arrow function had the correct one. So:

JavaScript

const dude = {
  name: 'dude',
  namedFunc() {
    console.log('name 1: ', this.name); // Dude

    setTimeout(function() {
      console.log('this 1:', this);
      console.log('name 2:', this.name); // undefined
    }, 200);
  },
  arrowFunc() {
    // temos scope tb...
    console.log('name 3:', this.name); // Dude

    setTimeout(() => {
      console.log('this 2:', this); // {name: 'dude', nameWNamed: ƒ, nameWArrow: ƒ}
      console.log('name 4:', this.name); // Dude
    }, 300)
  }
}

console.log('namedFunc:', dude.namedFunc());
console.log('arrowFunc:', dude.arrowFunc());

Expected:

this 1: {name: 'dude', namedFunc: ƒ, arrowFunc: ƒ}
name 2: dude
this 2: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
name 4:

Actual result:

this 1: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
name 2: 
this 2: {name: 'dude', namedFunc: ƒ, arrowFunc: ƒ}
name 4: dude

WordPress for Windows

Richard Andrew x64 — Sun, 07 Jan 2024 15:24:00 GMT

Is there a server-side web framework like WordPress but built on Microsoft technologies?

The difficult we do right away...
...the impossible takes slightly longer.

how PHP works

mike7411 — Tue, 26 Dec 2023 21:24:00 GMT

Can someone help me understand whether PHP is compiled or interpreted?

I googled it and was left very confused.

It sounds like PHP is compiled to some type of bytecode. But, I have never seen another file created (an executable).

I can't imagine PHP would re-compile each script.php every time it is used, but I don't see any .exe files getting created.

Anyone know how PHP really works? It seems like almost no one knows.

Thanks.