How to put modal-pop form inside timeline graph?

Question

0.00/5 (No votes)

See more:

Hi Team

I have a working code, but i want to try if it can be possible i use bootstrap modal popup inside my timeline graph. The code works there are no bugs at all. Want to find a way to put my bootsrap modal popup form be place inside timeline graph(javascript library .ie visjs)

What I have tried:

// Bootstrap front end.
<!--Bootstrap modal popup-->
<body>
    <div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">POC</button>
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">POC Document</h4>
                    </div>
                    <div class="modal-body">

                        <embed src="~/Content/Time-Line Application_POC.pdf"
                               frameborder="0" width="100%" height="400px">

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

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

// visjs timeline javascript for graph

HTML

<h2>TimeLine</h2>


    <title>Timeline

JavaScript

<body>
    @section scripts{

        <script type="text/javascript">

            $(document).ready(function () {
                const businessTime = {
                    start: '8:00',
                    end: '16:00'
                }

                $.ajax({
                    type: "GET",
                    url: "/checklist.json",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: ChartVis,
                    error: OnError
                });

                function ChartVis(response) {
                    // get timestamp from string:
                    function getTime(timeStr) {
                        const parsed = timeStr.match(/\/Date\((\d+)\)\//);
                        return Number(parsed[1]);
                    }

                    // get minutes from time related to start of day:
                    function getMinutes(timeStamp) {
                        dat = new Date(timeStamp);
                        return dat.getHours() * 60 + dat.getMinutes();
                    }

                    // calculate diff in days according to
                    // https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript
                    const _MS_PER_DAY = 1000 * 60 * 60 * 24;
                    // a and b are javascript Date objects
                    function dateDiffInDays(a, b) {
                        // Discard the time and time-zone information.
                        const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
                        const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

                        return Math.floor((utc2 - utc1) / _MS_PER_DAY);
                    }

                    // get minutes for business times:
                    for (key in businessTime) {
                        const splitted = businessTime[key].split(':');
                        businessTime[key + 'Minutes'] = parseInt(splitted[0]) * 60 + parseInt(splitted[1]);
                    }
                    businessTime.minutesOneDay = businessTime.endMinutes - businessTime.startMinutes;
                    console.log(businessTime);

                    // calculate amount of time
                    const data = response.map((item) => {
                        const
                            startTimestamp = getTime(item.Start_Date),
                            endTimestamp = getTime(item.Timestamp);
                        // from here we are using minutes related to the start of the day
                        let
                            startMinutes = getMinutes(startTimestamp),
                            endMinutes = getMinutes(endTimestamp);
                        if (startMinutes < businessTime.startMinutes) {
                            startMinutes = businessTime.startMinutes;
                        }
                        if (endMinutes > businessTime.endMinutes) {
                            endMinutes = businessTime.endMinutes;
                        }

                        // calculate total time the task took
                        const
                            // calculate amount on first day:
                            amountFirstDay = businessTime.endMinutes - startMinutes,
                            // calculate amount on last day:
                            amountLastDay = endMinutes - businessTime.startMinutes;
                        // get difference in days between first and last day:
                        diffDays = dateDiffInDays(new Date(startTimestamp), new Date(endTimestamp));
                        let totalMinutes;
                        // did the task take more than one day?
                        if (diffDays > 0) {
                            totalMinutes = amountFirstDay + diffDays * businessTime.minutesOneDay + amountLastDay;
                        } else {
                            // task took one day only:
                            totalMinutes = endMinutes - startMinutes;
                        }
                        console.log(totalMinutes);

                        // convert amount of time to hours:minutes
                        let min = totalMinutes % 60;
                        if (min < 10) min = '0' + min;
                        const hours = Math.floor(totalMinutes / 60),
                            totalHours = '' + hours + ':' + min;
                        console.log(totalHours);

                        // return record in format being required by timeline
                        return {
                            id: item.Incident,
                            start: startTimestamp,
                            end: endTimestamp,
                            content: item.Description + '<br>Took ' + totalHours + ' hours'
                        };
                    });
                    console.log(data);
                    // DOM element where the Timeline will be attached
                    var container = document.getElementById('visualization');

                    // Create a DataSet (allows two way data-binding)
                    var items = new vis.DataSet(data);

                    // // Configuration for the Timeline
                    var options = {};

                    // // Create a Timeline
                    var timeline = new vis.Timeline(container, items, options);
                }
                function OnError(response) {
                    alert("Error !");
                }

            })

        </script>

    }
    <div id="visualization"></div>
</body>

Posted 25-Oct-21 23:05pm

Tgcobza Mkontwana

Updated 26-Oct-21 1:13am

CHill60

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

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 edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)