index.html

<link rel="stylesheet"
    href="./Boostrap5/bootstrap.min.css">

<script type="text/javascript" src="./Boostrap5/bootstrap.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>




<style>
    /* template.css */

    :root {
        --j3Blue: #0f5293;
        --SPFooter: #051C48;
    }

    .main {
        background: rgb(255, 255, 255);
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(218, 238, 255, 1) 100%);
    }

    .component-group {
        padding-bottom: 20px;
    }

    .component-title {
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: var(--j3Blue);
        color: white;
        font-size: 1.2rem;
        margin-left: 45px !important;

        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        border-bottom-right-radius: 0rem !important;
        border-bottom-left-radius: 1rem !important;
    }


    .title-group .main-title {
        font-size: 1.5rem;
    }

    .title-group hr {
        height: 3px;
    }

    .text-group .text-header {
        font-size: 1.2rem;
        font-weight: 500;
        padding-left: 13px
    }

    .director-text {
        background: rgba(218, 238, 255, 1);
        background: linear-gradient(72deg, rgba(218, 238, 255, 1) 0%, rgb(176 213 251) 100%);
        margin-left: 45px;
        min-height: 125px;
    }

    .director-group .director-image-circle {
        background-position: center;
        background-size: cover;
        border: 5px solid white;
        height: 125px;
        width: 125px;
        border-radius: 100%;
        padding: 10px;
        left: -60px;
    }

    .poc-card {
        display: inline-flex;
        padding: 5px 0px;
        width: 450px;
    }

    .poc-body {
        background-color: #b0d5fb;
    }

    .poc-card-title {
        padding: 15px 5px;
        margin: 5px;
        background-color: var(--j3Blue);
        color: white;
        width: 174px;
        text-align: center;
    }

    .buttons-group button {
        display: block;
        margin: 10px;
        width: 80%;
        margin: auto;
        margin-top: 10px;
        border: 2px solid white;
        background-color: var(--j3Blue);
        color: white;
    }

    .btn-custom {
        border: 2px solid white;
        color: white;
        background-color: var(--j3Blue);
    }

    .text-j3blue {
        color: var(--j3Blue) !important;
    }

    .bg-j3blue {
        background-color: var(--j3Blue) !important;
    }

    .text-SPFooter {
        color: var(--SPFooter) !important;
    }

    .bg-SPFooter {
        background-color: var(--SPFooter) !important;
    }

    svg.poc {
        color: var(--j3Blue) !important;
    }

    .bd-callout.poc {
        border-left-color: #007bff !important;
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        border: 1px solid #eee;
        border-left-width: 0.25rem;
        border-radius: 0.25rem;
    }

    .bd-callout {
        border-left-color: #5bc0de !important;
        padding: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        border: 1px solid #eee;
        border-left-width: 0.25rem;
        border-radius: 0.25rem;
    }

    .director-name,
    .director-email,
    .director-phone {
        padding-left: 8.25rem;
    }

    .f-12,
    .f12 {
        font-size: 12px !important;
    }

    .bold {
        font-weight: bold !important;
    }

    /* Handle long user email names */
    a#send-email-main {
        display: none;
    }

    a#send-email-sub {
        display: inline;
    }

    @media (min-width: 1256px) {
        a#send-email-main {
            display: inline;
        }

        a#send-email-sub {
            display: none;
        }
    }
</style>




<style>
    .component-title {
        padding: 0.5rem 1rem;
    }

    .announcement-header.component-title,
    .event-header.component-title {
        cursor:pointer;
        display: flex;
        justify-content: space-between;
        margin-left: 0px !important;
        border-bottom-left-radius: 1rem !important;
        border-bottom-right-radius: 1rem !important;
    }

    .announcement-header.component-title.active,
    .event-header.component-title:active {
        border-bottom-right-radius: 0rem !important;
        border-bottom-left-radius: 0rem !important;
    }

    .announcement-item {
        border-radius:0px !important;
        margin-bottom:0px !important;
    }
    .announcement-text-body,
    .event-text-body {
        background-color: white;
        padding: 10px;
        border-radius: 1rem;
        border-top-left-radius: 0rem;
        border-top-right-radius: 0rem;
    }

    .branchLinks-icon {
        background-color: #0f5293;
        padding: 15px;
        border-radius: 100%;
        color: white;
        width: 60px;
        height: 60px;
        margin: auto;
    }

    .branchLinks-text {
        text-align: center;
        font-size: 1.2rem;
        color: #0f5293;
        overflow-wrap: normal;
    }

    a.branchLink {
        width: min-content;
        padding: 20px;
    }
    .BranchLinks-group {
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .director-image-circle.float-start {
        left: 0px;
    }
    .director-title.component-title {
        padding-left: 80px;
        margin-left: 50px !important;
    }
    .director-text {
        margin: 0px 0px 10px 0px;
    }
    .body-text {
        margin: 0px 0px 10px 0px;
        background: linear-gradient(72deg, rgba(218, 238, 255, 1) 0%, rgb(176 213 251) 100%);
    }
    .component-title {
        margin-left: 0px !important;
    }
    .buttons-group a {
        max-width: max-content;
    }
    .row {
        --bs-gutter-x:0rem;
    }
</style>

<body class="w-100 p-2" style="position: absolute;">
    <div>
        <div class="card border-0 main">
            <div class="card-body row w-100 p-0">

                <!-- Left Group -->
                <div class="col-lg-7 p-2" data-side="left" id="left-group"></div>

                <!-- Right Group -->
                <div class="col-lg-5 p-2" data-side="right" id="right-group"></div>

            </div>
        </div>

        <!-- Footer Element -->

        <footer class="m-4 text-center f12">
            <p class="text-SPFooter">
                <svg class="bi bi-building" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z">
                    </path>
                    <path
                        d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z">
                    </path>
                </svg> Developed by <strong>DHA J-5 AED Knowledge Management</strong>
            </p>
            <p hidden="">© 2022 DHA J-5 AED Knowledge Management</p>
        </footer>
    </div>
</body>



<script>

    const appWebUrl = _spPageContextInfo.webAbsoluteUrl;


    getListItem("Layout", "?$orderby=WebpartOrder").then(webparts => {
        console.log("success", webparts);
        const leftGroup = document.getElementById("left-group")
        const rightGroup = document.getElementById("right-group")

        webparts.forEach(webpart => {
            let el = BuildWebPart(webpart.WebpartType);
            if (webpart.WebpartSide === "LeftSide") leftGroup.append(el);
            else rightGroup.append(el);
        })

    }).catch(e => {
        console.log("error", e)
    })


    function BuildWebPart(type) {

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

        getListItem(type).then(webpartData => {

            if (!webpartData.length) {
                console.log("no data found for " + type)
                return div
            }

            if (type === "WebpartContent") {
                console.log("Creating Title", webpartData)

                div.innerHTML =
                    `<div class="title-group component-group">
                        
                    </div>`
                webpartData.forEach(data => {

                    let {
                        ContentTitle,
                        SubTitle
                    } = data

                    let el = div.querySelector(".title-group")
                    el.innerHTML = el.innerHTML +
                        `<div class="main-title mt-3 bold">${ContentTitle}</div>
                        <div class="sub-title">${SubTitle}</div>
                        <hr>`
                })

            }

            else if (type === "Carousel") {
                console.log("Creating Carousel", webpartData)

                div.innerHTML =
                    `<style>
                        .carousel-control-next-icon,
                        .carousel-control-prev-icon {
                            width: 7rem;
                            height: 7rem;
                        }
                    </style>
                    <div class="carousel-group component-group">
                        <div id="myCarousel" class="carousel slide pointer-event" data-bs-ride="carousel">

                            <!-- carousel-indicators -->
                            <div class="carousel-indicators">
                            </div>

                            <!-- carousel-inner -->
                            <div class="carousel-inner">
                                
                                
                            </div>
                        </div>
                    </div>`

                webpartData.forEach((data, index) => {

                    let {
                        ImageURL,
                        LinkURL,
                        LinkText
                    } = data

                    //carousel indicators
                    if (index == 0) {
                        let indicator = div.querySelector(".carousel-indicators")
                        indicator.innerHTML = indicator.innerHTML + `<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" aria-label="Slide 1" class="active" aria-current="true"></button>`

                         //carousel slides
                        let carousel = div.querySelector(".carousel-inner")
                        carousel.innerHTML = carousel.innerHTML +
                            ` <div class="carousel-item active" data-bs-interval="4000">
                                <img src="${ImageURL}"
                                    width="100%" height="350">
                                <div class="container">
                                    ${LinkURL ? `<a href="${LinkURL}"><div class="carousel-caption text-start">${LinkText}</div> </a>` : `<div class="carousel-caption text-start">${LinkText}</div>`}
                                </div>
                            </div>`
                    }
                    else {
                        let indicator = div.querySelector(".carousel-indicators")
                        indicator.innerHTML = indicator.innerHTML + `<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="${index}" aria-label="Slide ${index + 1}"></button>`

                         //carousel slides
                         let carousel = div.querySelector(".carousel-inner")
                         carousel.innerHTML = carousel.innerHTML +
                                ` <div class="carousel-item" data-bs-interval="4000">
                                    <img src="${ImageURL}"
                                        width="100%" height="350">
                                    <div class="container">
                                        ${LinkURL ? `<a href="${LinkURL}"><div class="carousel-caption text-start">${LinkText}</div> </a>` : `<div class="carousel-caption text-start">${LinkText}</div>`}
                                    </div>
                                </div>`
                    }

                   
                })

                //add the buttons
                let el = div.querySelector(".carousel-inner")
                el.innerHTML = el.innerHTML +
                    `<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>`


                    var myCarousel = document.querySelector('#myCarousel')
                    var carousel = new bootstrap.Carousel(myCarousel)

                    new bootstrap.Carousel(document.querySelector("#myCarousel"), {
                        interval: 2000,
                        wrap: true,
                    });

            }

            else if (type === "ContentElement") {

                console.log("Creating Content", webpartData)

                div.innerHTML =
                    `<div class="text-group component-group">
                        
                    </div>`
                webpartData.forEach(data => {

                    let {
                        ContentCategory,
                        ContentTitle, //What is this?
                        Description,
                    } = data

                    let el = div.querySelector(".text-group")
                    el.innerHTML = el.innerHTML +
                        `<div class="text-header">${ContentCategory}</div>
                        <div class="text-body container">${Description}</div>`
                })

            }

            else if (type === "Staff") {

                //Leader
                console.log("Creating Staff", webpartData)

                let MainPOC = webpartData.filter(data => !!data.MainPOC)
                if (!!MainPOC.length) {

                    div.innerHTML = div.innerHTML +
                        `<div class="director-group component-group"><!-- Director -->
    
                        </div>`

                    MainPOC.forEach(data => {

                        let {
                            UserTitle,
                            UserEmail,
                            Phone,
                            JobTitle,
                            MainPOC,
                            SortOrder,
                            ImageURL,
                            ImageDescription,
                            LeadershipBioURL,
                            LeadershipBioDescription,
                        } = data

                        let el = div.querySelector(".director-group")
                        el.innerHTML = el.innerHTML +
                            `<div class="director-text" style="border-radius: 1rem!important;">
                                <div class="director-image">
                                    <div class="director-image-circle float-start" style="background-color: white;background-image: url('${ImageURL ? ImageURL : appWebUrl + "_layouts/images/O14_person_placeHolder_192.png"}')"></div>
                                </div>
                                <div class="director-title component-title">${JobTitle}</div>
                                <div class="director-name bold">${UserTitle}
                                <a class="badge rounded-pill text-bg-primary" style="margin-left: 8px;" href="${LeadershipBioURL}">View Bio</a>
                                </div>
                                <div class="director-phone">
                                    <span class="" style="padding: 3px !important;border-radius: 50% !important;display: inline-flex;margin-right: 6px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-outbound-fill poc" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5z"></path>
                                            </svg>
                                    </span>
                                    <span class="pb-1">${Phone}</span>
                                </div>
                                <div class="director-email">
                                    <span class="" style="padding: 3px !important;border-radius: 50% !important;display: inline-flex;margin-right: 6px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-plus poc" viewBox="0 0 16 16">
                                                <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"></path>
                                                <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1a.5.5 0 0 0-.5-.5Z"></path>
                                            </svg>
                                    </span>
                                    <a class="pb-1" id="send-email-main" href="mailto:${UserEmail}">${UserEmail}</a>
                                    <a class="pb-1" id="send-email-sub" href="mailto:${UserEmail}">Send Email</a>
                                </div>
                            </div>`
                    })
                }


                //Rest of Staff

                let Staff = webpartData.filter(data => !data.MainPOC)
                Staff.sort((a, b) => a.SortOrder - b.SortOrder)
                if (!!Staff.length) {

                    div.innerHTML = div.innerHTML +
                        `<div class="staff-group component-group"><!-- Director -->
                            <div class="poc-title component-title px-3" style="border-bottom-right-radius: 1rem !important;">Points of Contact</div>
                        </div>`



                    Staff.forEach(data => {

                        let {
                            UserTitle,
                            UserEmail,
                            Phone,
                            JobTitle,
                        } = data

                        let el = div.querySelector(".staff-group")
                        el.innerHTML = el.innerHTML +
                            `<div class="card card-body border-0 mb-1 text-left body-text" style="border-radius: 1.25rem!important;"><!-- Example POC -->
                                <!-- Title -->
                                <div class="text-j3blue text-start"><strong>${JobTitle}</strong></div>
                                <!-- User Title -->
                                <div class="bold">${UserTitle}</div>
                                <!-- User Phone -->
                                <div>
                                    <span class="" style="padding: 3px !important;border-radius: 50% !important;display: inline-flex;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-outbound-fill poc" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5z"></path>
                                        </svg>
                                    </span>
                                    <span class="pb-1">${Phone}</span>
                                </div>
                                <!-- User Email -->
                                <div>
                                    <span class="" style="padding: 3px !important;border-radius: 50% !important;display: inline-flex;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-plus poc" viewBox="0 0 16 16">
                                            <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"></path>
                                            <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1a.5.5 0 0 0-.5-.5Z"></path>
                                        </svg>
                                    </span>
                                    <a class="pb-1" href="mailto:${UserEmail}">${UserEmail}</a>
                                </div>
                            </div>`
                    })
                }
            }

            else if (type === "Announcements") {

                console.log("Creating Announcements", webpartData)

                div.innerHTML =
                    `<div class="announcement-group component-group">
                        <div class="announcement-title component-title">Operation Announcements</div>
                        <div class="announcement-body">

                            

                        </div>
                    </div>`
                webpartData.forEach(data => {

                    let {
                        AnnouncementTitle,
                        Body,
                        EventDate,
                        Expires,
                    } = data

                    if (new Date() <= new Date(Expires)) {
                        let el = div.querySelector(".announcement-body")
                        el.innerHTML = el.innerHTML +
                            `<div class="announcement-item card card-body border-0 text-left body-text">
                                <div class="announcement-header component-title" onclick=ShowBody(this,'.announcement-text-body')>
                                    <div class="announcement-title">${AnnouncementTitle}</div>
                                    <div class="announcement-text">${new Date(EventDate).toDateString()}</div>
                                </div>
                                <div class="announcement-text-body" style="display:none">${Body}</div>
                            </div>`

                    }

                })




            }

            else if (type === "Events") {

                console.log("Creating Events", webpartData)

                div.innerHTML =
                    `<div class="event-group component-group">
                        <div class="event-title component-title">Operation Events</div>
                        <div class="event-body">

                            

                        </div>
                    </div>`
                webpartData.forEach(data => {

                    let {
                        EventTitle,
                        Body,
                        EventDate,
                        Expires,
                    } = data

                    if (new Date() <= new Date(Expires)) {
                        let el = div.querySelector(".event-body")
                        el.innerHTML = el.innerHTML +
                            `<div class="event-item card card-body border-0 text-left body-text">
                                <div class="event-header component-title" onclick=ShowBody(this,'.event-text-body')>
                                    <div class="event-title">${EventTitle}</div>
                                    <div class="event-text">${new Date(EventDate).toDateString()}</div>
                                </div>
                                <div class="event-text-body" style="display:none">${Body}</div>
                            </div>`

                    }

                })

            }

            else if (type === "MainLinks") {

                console.log("Creating MainLinks", webpartData)

                div.innerHTML =
                    `<div class="buttons-group component-group mt-4 px-3 d-flex justify-content-center">
            
                    </div>`
                webpartData.forEach(data => {

                    let {
                        MainLinkTitle,
                        LinkURL,
                    } = data


                    let el = div.querySelector(".buttons-group")
                    el.innerHTML = el.innerHTML +
                        `<a class="btn btn-custom btn w-100" href="${LinkURL}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-link-45deg" viewBox="0 0 16 16">
                                <path
                                    d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                                </path>
                                <path
                                    d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                                </path>
                            </svg>
                            ${MainLinkTitle}
                        </a>`



                })


            }

            else if (type === "BranchLinks") {

                console.log("Creating BranchLinks", webpartData)


                div.innerHTML =
                    `<div class="BranchLinks-group component-group mt-4 px-3 d-flex">
            
                    </div>`
                webpartData.forEach(data => {

                    let {
                        BranchLinkTitle,
                        BranchIcon,
                        LinkURL,
                    } = data

                    let icon;
                    if (BranchIcon === "File")  icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
                                                        <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"></path>
                                                        <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"></path>
                                                    </svg>`
                    if (BranchIcon === "Folder") icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                                                            <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"></path>
                                                        </svg>`
                    if (BranchIcon === "MapMarker") icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                                                            <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                                                        </svg>`
                    if (BranchIcon === "Binoculars") icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-binoculars" viewBox="0 0 16 16">
                                                                <path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"></path>
                                                            </svg>`
                    if (BranchIcon === "OrgChart") icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-diagram-3" viewBox="0 0 16 16">
                                                            <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
                                                        </svg>`
                    if (BranchIcon === "ClipBoard") icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-clipboard2-check" viewBox="0 0 16 16">
                                                                <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z"></path>
                                                                <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z"></path>
                                                                <path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3Z"></path>
                                                            </svg>`
                    else icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
                                <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
                                </svg>`

                    let el = div.querySelector(".BranchLinks-group")
                    el.innerHTML = el.innerHTML +
                        `<a class="branchLink" class="" href="${LinkURL}">
                            <div class="branchLinks-icon">${icon}</div>
                            <div class="branchLinks-text">${BranchLinkTitle}</div>
                        </a>`

                })

            }

            else if (type === "ContactInfo") {

            }

        }).catch(e => {
            console.log("Error getting webpart list: \n", e)
        })

        return div

    }


    function getListItem(listName, filter) {
        return new Promise((resolve, reject) => {
            let reqExecutor = new SP.RequestExecutor(appWebUrl);
            let url = appWebUrl + `_api/web/lists/getByTitle('${listName}')/items` + (filter ? filter : "")
            reqExecutor.executeAsync({
                url: url,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose",
                },
                success: function (data) {
                    data = JSON.parse(data.body);
                    resolve(data.d.results)
                },
                error: function (data) {
                    reject(data);
                }
            });
        })
    }


    function ShowBody(el, selector) {
        let parent = el.parentElement
        let body = parent.querySelector(selector)
        if (body.style.display === "none") {
            body.style.display = "block";
            el.classList.add("active");
        } else {
            body.style.display = "none";
            el.classList.remove("active");
        }
    }

</script>