https://www.cbcdubai.cz/js/index-page/Staff.js

1const MAINDIVFORSTAFF = document.getElementById("AllStaff");
2
3window.addEventListener("DOMContentLoaded", async () => {
4  try {
5    await loadScript("https://code.jquery.com/jquery-3.6.0.min.js");
6    // تحميل Slick CSS و JS
7    await loadCSS(
8      "https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"
9    );
10    await loadCSS(
11      "https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"
12    );
13    await loadScript(
14      "https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"
15    );
16    return await DisplayAllOfStaff();
17  } catch (error) {
18    console.log(`Error From Loaded Staff Javascript page: ${error.message}`);
19    return false;
20  }
21});
22
23const FetchAllStaff = async () => {
24  try {
25    const data = await fetch(
26      "https://cbc-backend.vercel.app/Staff/GetAllStaff"
27    );
28    if (data) {
29      const result = await data.json();
30      localStorage.setItem("StaffCount", result.result.length);
31      return result.result;
32    }
33  } catch (error) {
34    console.log(`Error From Fetch All Staff Item:${error.message}`);
35    return false;
36  }
37};
38
39const CreateItem = async ({ email, image, job, name, MAINDIV }) => {
40  try {
41    // <div role="listitem" class="swiper-slide w-dyn-item">
42    //   <div
43    //     data-w-id="3829943a-a8e5-848a-0faf-4c22253391cd"
44    //     class="team-member-wrapper"
45    //   >
46    //     <div class="team-member-image custom-size"></div>
47    //     <div class="team-member-name font-size w-dyn-bind-empty"></div>
48    //     <div class="horizontal-line"></div>
49    //     <div class="team-member-job-role font-size w-dyn-bind-empty"></div>
50    //     <a href="#" class="team-member-email-link w-inline-block">
51    //       <div class="team-member-email w-dyn-bind-empty"></div>
52    //     </a>
53    //   </div>
54    // </div>;
55    //  PART ONE ---- CREATE MAIN DIV ------------------------------------------
56    const MainDiv = document.createElement("div");
57    MainDiv.setAttribute("role", "listitem");
58    MainDiv.setAttribute("class", "swiper-slide w-dyn-item");
59    //  PART TWO ---- CREATE CONTAINER -----------------------------------------
60    const Container = document.createElement("div");
61    Container.setAttribute("data-w-id", "3829943a-a8e5-848a-0faf-4c22253391cd");
62    Container.setAttribute("class", "team-member-wrapper");
63    //  PART THREE ---- CREATE DIV FOR IMAGE -----------------------------------
64    const ImageDiv = document.createElement("div");
65    ImageDiv.setAttribute("class", "team-member-image custom-size");
66    ImageDiv.style.backgroundImage = `url('${image}')`;
67    Container.append(ImageDiv);
68    //  PART FOUR ---- CREATE DIV FOR NAME -------------------------------------
69    if (name?.en) {
70      const NameDiv = document.createElement("div");
71      NameDiv.setAttribute("class", "team-member-name font-size");
72      NameDiv.textContent = name[lang] || name.en;
73      Container.append(NameDiv);
74    }
75    //  PART FIVE ---- CREATE HORIZONTAL LINE ----------------------------------
76    const HorizontalLine = document.createElement("div");
77    HorizontalLine.setAttribute("class", "horizontal-line");
78    Container.append(HorizontalLine);
79    //  PART SIX ---- CREATE DIV FOR ROLE JOB ----------------------------------
80    if (job?.en) {
81      const JobDiv = document.createElement("div");
82      JobDiv.setAttribute("class", "team-member-job-role font-size");
83      JobDiv.textContent = job[lang] || job.en;
84      Container.append(JobDiv);
85    }
86    //  PART SEVEN ---- CREATE LINK FOR EMAIL ----------------------------------
87    if (email) {
88      const EmailDivLink = document.createElement("a");
89      EmailDivLink.setAttribute(
90        "class",
91        "team-member-email-link w-inline-block"
92      );
93      EmailDivLink.href = `mailto:${email}`;
94      const EmailDiv = document.createElement("div");
95      EmailDiv.setAttribute("class", "team-member-email");
96      EmailDiv.textContent = email;
97      EmailDivLink.append(EmailDiv);
98      Container.append(EmailDivLink);
99    }
100    //  FINALLY ---- APPEND ALL OF THIS ----------------------------------------
101    MainDiv.append(Container);
102    MAINDIV.append(MainDiv);
103    //  FUNCTIONALITY ----------------------------------------------------------
104  } catch (error) {
105    console.log(`Error From Create Staff Item:${error.message}`);
106    return false;

107  }
108};
109
110const DisplayAllOfStaff = async () => {
111  try {
112    const data = await FetchAllStaff();
113    if (data) {
114      for (const item of data) {
115        CreateItem({
116          email: item.email,
117          image: item.thumbnail,
118          job: item.job,
119          name: item.name,
120          MAINDIV: MAINDIVFORSTAFF,
121        });
122      }
123      return $(MAINDIVFORSTAFF).slick({
124        infinite: true,
125        speed: 500,
126        slidesToShow: 4,
127        slidesToScroll: 1,
128        autoplay: true,
129        autoplaySpeed: 2000,
130        arrows: true,
131        responsive: [
132          {
133            breakpoint: 750, // عندما يكون العرض أقل من 750px
134            settings: {
135              slidesToShow: 1, // عرض شريحة واحدة فقط
136              slidesToScroll: 1,
137            },
138          },
139        ],
140      });
141    }
142  } catch (error) {
143    console.log(`Error From Display All Staff Item:${error.message}`);
144    return false;
145  }
146};