diff --git a/src/constants/routes.js b/src/constants/routes.js index b2a8fd8..2efa00d 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -18,5 +18,7 @@ export const Routes = { logisticrental: "/services/logisticrental", zoomlicense: "/services/zoomLicense", publicitymanagement: "/services/publicitymanagement", + publicitymanagementone: "/services/publicitymanagement/page-1", + publicitymanagementtwo: "/services/publicitymanagement/page-2", joinus: "/joinus", }; diff --git a/src/pages/Footer/footer.module.css b/src/pages/Footer/footer.module.css index e38e6a2..2f272de 100644 --- a/src/pages/Footer/footer.module.css +++ b/src/pages/Footer/footer.module.css @@ -6,6 +6,7 @@ padding-left: 2.5vw; padding-right: 2.5vw; font-family: "Lora", serif; + margin-top: 30px; } .header { diff --git a/src/pages/Service/PublicityManagement/helper.jsx b/src/pages/Service/PublicityManagement/helper.jsx new file mode 100644 index 0000000..4b21b57 --- /dev/null +++ b/src/pages/Service/PublicityManagement/helper.jsx @@ -0,0 +1,168 @@ +const extractData = (data, match, isNotDupe = true) => { + let extracted = []; + let isMatch = false; + let isFairUse = false; + for (const item of data) { + if (isMatch && (isNotDupe || isFairUse) && item.type === "paragraph") { + let currParagraph = { + type: "paragraph", + content: "" + } + let currSentence = ""; + for (const subitem of item.content) { + currSentence += subitem.content; + } + currParagraph.content = currSentence; + extracted.push(currParagraph); + } else if (isMatch && (isNotDupe || isFairUse) && item.type === "quote") { + let currParagraph = { + type: "quote", + content: "" + } + let currSentence = ""; + for (const subitem of item.content) { + currSentence += subitem.content; + } + currParagraph.content = currSentence; + extracted.push(currParagraph); + } else if (isMatch && (isNotDupe || isFairUse) && item.type === "image") { + let currImage = { + type: "image", + content: item.content + } + extracted.push(currImage); + } else if (isMatch && (isNotDupe || isFairUse) && item.type === "file") { + let currFile = { + type: "file", + content: item.url + } + extracted.push(currFile); + } else if (isMatch && (isNotDupe || isFairUse) && item.type === "bulleted_list_item") { + let currBullet = { + type: "bullet", + content: "" + } + let currSentence = "" + for (const subitem of item.content) { + currSentence += subitem.content; + } + currBullet.content = currSentence + extracted.push(currBullet); + } else if (isMatch && (isNotDupe || isFairUse) && item.type === "numbered_list_item") { + let currNumber = { + type: "number", + content: "" + } + let currSentence = "" + for (const subitem of item.content) { + currSentence += subitem.content; + } + currNumber.content = currSentence + extracted.push(currNumber); + } else if (item.type === "heading" && (isNotDupe || isFairUse) && item.content === match) { + isMatch = true; + } else if (item.type === "heading" && item.content === "Fair Use") { + isFairUse = true; + } else if (isMatch === true) { + break; + } + } + return extracted; +} + +export const extractAnnouncements = (data) => { + return extractData(data, "Announcements"); +} + +export const extractProcess = (data) => { + return extractData(data, "Process for Publicity Requests"); +} + +export const extractNotes = (data) => { + return extractData(data, "Notes") +} + +export const extractElligibility = (data) => { + return extractData(data, "Eligibility to use Publicity Platforms") +} + +export const extractGeneral = (data) => { + return extractData(data, "General Guidelines on Publicity Materials") +} + +export const extractPublicityMaterials = (data) => { + return extractData(data, "Publicity Materials Required") +} + +export const extractMaterialsEDM = (data) => { + return extractData(data, "Electronic Digital Mailer (EDM)") +} + +export const extractMaterialsInstagram = (data) => { + return extractData(data, "Instagram") +} + +export const extractMaterialsTelegram = (data) => { + return extractData(data, "Telegram Channel") +} + +export const extractMaterialsNoticeboards = (data) => { + return extractData(data, "Noticeboards") +} + +export const extractFairUse = (data) => { + return extractData(data, "Fair Use") +} + +export const extractFairUseEDM = (data) => { + return extractData(data, "Electronic Digital Mailer (EDM)", false) +} + +export const extractFairUseTelegram = (data) => { + return extractData(data, "Telegram Channel", false) +} + +export const extractFairUseInstagram = (data) => { + return extractData(data, "Instagram Story or Post Sharing") +} + +export const extractPDP = (data) => { + return extractData(data, "Personal Data Protection") +} + +export const extractApproval = (data) => { + return extractData(data, "Approval of Publicity Materials") +} + +export const extractNUSSUOrganisations = (data) => { + return extractData(data, "NUSSU Constituent Clubs, Associate Bodies and other NUS-registered Organisations") +} + +export const extractCouncilProjects = (data) => { + return extractData(data, "Council, EXCO, Committees or Projects") +} + +export const extractDesignConsiderations = (data) => { + return extractData(data, "Design Considerations") +} + +export const extractUnionBrandingRequirements = (data) => { + return extractData(data, "Union branding requirements") +} + +export const extractDesign= (data) => { + return extractData(data, "Design") +} + +export const extractContent = (data) => { + return extractData(data, "Content") +} + +export const extractLinks= (data) => { + return extractData(data, "Links") +} + +export const extractDirectives = (data) => { + return extractData(data, "Directives") +} + diff --git a/src/pages/Service/PublicityManagement/index.jsx b/src/pages/Service/PublicityManagement/index.jsx index 370cf05..bf1ad0f 100644 --- a/src/pages/Service/PublicityManagement/index.jsx +++ b/src/pages/Service/PublicityManagement/index.jsx @@ -1,15 +1,289 @@ +import styles from './publicitymanagement.module.css' import React from "react"; import Navbar from "../../Navbar"; import Footer from "../../Footer"; import { useFetchData } from "../../../common/useFetchData"; import { Routes } from "../../../constants/routes"; -import Maintenance from "../../Maintenance"; +import { + extractAnnouncements, + extractApproval, + extractContent, + extractCouncilProjects, + extractDesign, + extractDesignConsiderations, + extractDirectives, + extractElligibility, + extractFairUse, + extractFairUseEDM, + extractFairUseInstagram, + extractFairUseTelegram, + extractGeneral, + extractLinks, + extractMaterialsEDM, + extractMaterialsInstagram, + extractMaterialsNoticeboards, + extractMaterialsTelegram, + extractNotes, + extractNUSSUOrganisations, + extractPDP, + extractProcess, + extractPublicityMaterials, + extractUnionBrandingRequirements, +} from './helper'; +import CIcon from '@coreui/icons-react'; +import { freeSet } from '@coreui/icons'; const PublicityManagement = () => { + const pageOne = Routes.backendRoot + Routes.publicitymanagementone; + const pageTwo = Routes.backendRoot + Routes.publicitymanagementtwo; + const [isLoadingOne, contentOne] = useFetchData(pageOne); + const [isLoadingTwo, contentTwo] = useFetchData(pageTwo); + + // Page One content + const announcements = extractAnnouncements(contentOne); + const process = extractProcess(contentOne); + const notes = extractNotes(contentOne); + const eligibility = extractElligibility(contentOne); + const general = extractGeneral(contentOne); + const publicityMaterials = extractPublicityMaterials(contentOne); + const materialEDM = extractMaterialsEDM(contentOne); + const materialInstagram = extractMaterialsInstagram(contentOne); + const materialTelegram = extractMaterialsTelegram(contentOne); + const materialNoticeboard = extractMaterialsNoticeboards(contentOne); + + // Page Two content + const fairUse = extractFairUse(contentTwo); + const fairUseEDM = extractFairUseEDM(contentTwo); + const fairUseTelegram = extractFairUseTelegram(contentTwo); + const fairUseInstagram = extractFairUseInstagram(contentTwo); + const PDP = extractPDP(contentTwo); + console.log(PDP) + const approval = extractApproval(contentTwo); + const NUSSUOrganisations = extractNUSSUOrganisations(contentTwo); + const councilProjects = extractCouncilProjects(contentTwo); + const designConsiderations = extractDesignConsiderations(contentTwo); + const unionBrandingRequirements = extractUnionBrandingRequirements(contentTwo); + const design = extractDesign(contentTwo); + const content = extractContent(contentTwo); + const links = extractLinks(contentTwo); + const directives = extractDirectives(contentTwo); + + const convert = (data) => { + return data.map((item) => { + if (item.type === 'paragraph') { + return ( +

{item.content}

+ ) + } else if (item.type === 'quote') { + return ( +

{item.content}

+ ) + } else if (item.type === 'image') { + return ( + + ) + } else if (item.type === 'file') { + return ( +
+ + + +
{`Directives`}
+
+ ) + } else if (item.type === 'bullet' || item.type === 'number') { + return ( +
  • {item.content}
  • + ) + } + }) + } + return (
    - +
    +

    Union Publicity Management

    + +
    +

    Announcements

    +
    + { + convert(announcements) + } +
    + +
    +

    Process for Publicity Requests

    +
    + { + convert(process) + } +
    + +
    +

    Notes

    +
      + { + convert(notes) + } +
    +
    + +
    +

    Eligibility

    + { + convert(eligibility) + } +
    + +
    +

    General Guidelines on Publicity Materials

    +
      + { + convert(general) + } +
    +
    + +
    +

    Publicity Materials Required

    + { + convert(publicityMaterials) + } +
    + +
    +

    {'Electronic Digital Mailer (EDM)'}

    + { + convert(materialEDM) + } +
    + +
    +

    {'Instagram'}

    + { + convert(materialInstagram) + } +
    + +
    +

    {'Telegram Channel'}

    + { + convert(materialTelegram) + } +
    + +
    +

    {'Noticeboards'}

    + { + convert(materialNoticeboard) + } +
    + +
    +

    {'Fair Use'}

    + { + convert(fairUse) + } +
    + +
    +

    {'Electronic Digital Mailer (EDM)'}

    + { + convert(fairUseEDM) + } +
    + +
    +

    {'Telegram Channel'}

    + { + convert(fairUseTelegram) + } +
    + +
    +

    {'Instagram Story or Post Sharing'}

    + { + convert(fairUseInstagram) + } +
    + +
    +

    {'Personal Data Protection'}

    + { + convert(PDP) + } +
    + +
    +

    {'Approval of Publicity Materials'}

    + { + convert(approval) + } +
    + +
    +

    {'NUSSU Constituent Clubs, Associate Bodies and other NUS-registered Organisations'}

    + { + convert(NUSSUOrganisations) + } +
    + +
    +

    {'Council, EXCO, Committees or Projects'}

    + { + convert(councilProjects) + } +
    + +
    +

    {'Design Considerations'}

    + { + convert(designConsiderations) + } +
    + +
    +

    {'Union branding requirements'}

    + { + convert(unionBrandingRequirements) + } +
    + +
    +

    {'Design'}

    + { + convert(design) + } +
    + +
    +

    {'Content'}

    + { + convert(content) + } +
    + +
    +

    {'Links'}

    + { + convert(links) + } +
    + +
    +

    {'Directives'}

    + { + convert(directives) + } +
    + +
    ) diff --git a/src/pages/Service/PublicityManagement/publicitymanagement.module.css b/src/pages/Service/PublicityManagement/publicitymanagement.module.css new file mode 100644 index 0000000..57fdede --- /dev/null +++ b/src/pages/Service/PublicityManagement/publicitymanagement.module.css @@ -0,0 +1,73 @@ +.header { + font-size: 32px; + font-family: 'Lora', serif; + margin-top: 6vh; + position: relative; + width: 600px; + text-align: left; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); + color: #3E3E3E; +} + +.subheader { + font-family: 'Lora', serif; + font-weight: 700; + color: #D9A129; + text-align: left; +} + +.content { + margin: 0vh 50px; + display: flex; + flex-direction: column; + align-items: center; +} + +.subcontent { + width: 600px; +} + +.text, .bullet, .quote { + font-size: 16px; + font-family: 'Lora', serif; + text-align: justify; + line-height: 1.5; + margin-bottom: 1.5vh; +} + +.quote { + padding-left: 10px; + border-left: 2px solid #444444; +} + +.horizontalLine { + max-width: 600px; + height: 0.2vh; + background-color: #000; + margin-top: 1vw; + margin-bottom: 1.5vh; + margin-left: 0vw; +} + +.image { + object-fit: contain; +} + +.icon { + margin: 0 20px; +} + +/* @media screen and (max-width: 1000px) { + + .container { + flex-direction: column; + } + + .eventsheader { + font-size: 40px; + } + .socialheader { + font-size: 35px; + padding-bottom: 0; + } +} */ \ No newline at end of file