diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css index c8414521e..975ef7a81 100644 --- a/public/css/components/dashboard/news.css +++ b/public/css/components/dashboard/news.css @@ -158,32 +158,17 @@ .carousel-control-prev, .carousel-control-next { - opacity: 0; - transition: opacity 0.3s ease; + top: 0.5rem !important; + bottom: auto !important; + opacity: 1 !important; } -/* Show the buttons when the carousel is hovered */ -.carousel:hover .carousel-control-prev, -.carousel:hover .carousel-control-next { - opacity: 1; +.fhc-news-items-lg .row:hover{ + background-color: var(--fhc-primary); + color: var(--fhc-light); + cursor: pointer; } -.fhc-news-text{ - font-size: 0.75em; -} +.fhc-news-items-sm{ -.fhc-news-xs { - font-size: 0.6em; -} - -.fhc-news-sm { - font-size: 0.7em; -} - -.fhc-news-md { - font-size: 1.1em; -} - -.fhc-news-lg { - font-size: 1.4em; } diff --git a/public/js/components/Cis/Cms/Content.js b/public/js/components/Cis/Cms/Content.js index 0fd08078a..470a0fa62 100644 --- a/public/js/components/Cis/Cms/Content.js +++ b/public/js/components/Cis/Cms/Content.js @@ -1,7 +1,7 @@ import raum_contentmittitel from './Content_types/Raum_contentmittitel.js' import general from './Content_types/General.js' import BsConfirm from "../../Bootstrap/Confirm.js"; - +import news_content from './Content_types/News_content.js'; import ApiCms from '../../../api/factory/cms.js'; export default { @@ -22,6 +22,7 @@ export default { }, components: { raum_contentmittitel, + news_content, general, }, data() { @@ -80,6 +81,8 @@ export default { switch (this.content_type) { case "raum_contentmittitel": return "raum_contentmittitel"; + case "news": + return "news_content"; default: return "general"; }; diff --git a/public/js/components/Cis/Cms/Content_types/News_content.js b/public/js/components/Cis/Cms/Content_types/News_content.js new file mode 100644 index 000000000..a4eacd332 --- /dev/null +++ b/public/js/components/Cis/Cms/Content_types/News_content.js @@ -0,0 +1,142 @@ +import { replaceRelativeLegacyLink } from "../../../../helpers/LegacyLinkReplaceHelper.js" +export default { + name: "GeneralComponent", + props:{ + content:{ + type:String, + required:true, + }, + }, + methods: { + sanitizeLegacyTables(table) { + + // find nested tables and replace with p element + const tt = table.querySelectorAll('table') + tt.forEach(t => { + const textContent = t.textContent.trim(); + const pElement = document.createElement('p'); + pElement.textContent = textContent; + t.parentNode.replaceChild(pElement, t); + }) + + // find unordered lists, traverse li childs and replace with p element -> more readable than 1 p tag for ul + const ul = table.querySelectorAll('ul') + ul.forEach(u => { + Array.from(u.children).forEach(li => { + const p = document.createElement('p'); + p.textContent = li.textContent + u.parentNode.appendChild(p) + }) + u.parentNode.removeChild(u) + + }) + + // find bare text nodes and put into p element + const td = Array.from(table.querySelectorAll('td')).filter(el => el.scrollWidth > 100) + td.forEach(element => { + if (element.firstChild?.nodeType === Node.TEXT_NODE && element.firstChild.length > 10) { + const p = document.createElement('p'); + p.appendChild(element.firstChild) + element.appendChild(p); + } + }); + + // flatten nested th elements + const ths = Array.from(table.querySelectorAll('th')) + ths.forEach(th => { + + if(th.children.length > 1) { + th.innerHTML = Array.from(th.childNodes).find(cn => cn.textContent).textContent + } + }) + + // let p elements wrap on overflow + const p = table.querySelectorAll('p') + p.forEach(p => { + p.style.setProperty('word-wrap', 'break-word'); + p.style.setProperty('white-space', 'normal'); + p.style.setProperty('max-width', '400px'); + }) + } + }, + mounted(){ + // replaces the tablesorter with the tabulator + let tables = Array.from(document.getElementsByClassName("tablesorter")); + + tables.forEach((table, index) => { + this.sanitizeLegacyTables(table) + + new Tabulator(table, { + index: index, + layout: "fitDataFill", + + columnDefaults: { + formatter: "html", + resizable: true, + minWidth: "100px" + } + }) + }) + + document.querySelectorAll("#cms [data-confirm]").forEach((el) => { + el.addEventListener("click", (evt) => { + evt.preventDefault(); + BsConfirm.popup(el.dataset.confirm) + .then(() => { + Axios.get(el.href) + .then((res) => { + // TODO(chris): check for success then show message and/or reload + location = location; + }) + .catch((err) => console.error("ERROR:", err)); + }) + .catch(() => {}); + }); + }); + document.querySelectorAll("#cms [data-href]").forEach((el) => { + el.href = el.dataset.href.replace( + /^ROOT\//, + FHC_JS_DATA_STORAGE_OBJECT.app_root + ); + }); + + document.querySelectorAll("[href]").forEach((element) => { + let orignal_href = element.getAttribute("href"); + let new_href = replaceRelativeLegacyLink(orignal_href); + element.href = new_href; + }); + + document.querySelectorAll("[style*=background-color]").forEach((element) => { + if (element.style.backgroundColor == "rgb(255, 255, 255)"){ + element.style.backgroundColor = "var(--fhc-background)"; + } + if(element.querySelector("*[style*=background-color]")){ + element.style.backgroundColor = "var(--fhc-tertiary)"; + } + }); + + Vue.nextTick(() => { + document.querySelectorAll(".card-header").forEach((el) => { + el.classList.add("fhc-primary"); + }); + document.querySelectorAll(".row").forEach((el) => { + el.classList.add("w-100"); + el.classList.add("align-items-center"); + + }); + document.querySelectorAll(".row h2").forEach((el) => { + el.classList.add("mb-0"); + }); + + }) + + }, + template: /*html*/ ` + +
+
+
+

Content was not found

+ `, + }; + \ No newline at end of file diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js index e1a03e2f3..c9598ce16 100644 --- a/public/js/components/Dashboard/Item.js +++ b/public/js/components/Dashboard/Item.js @@ -164,7 +164,7 @@ export default { {{ widget.setup.name }} diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js index c423fc11f..a683e0f72 100644 --- a/public/js/components/DashboardWidget/News.js +++ b/public/js/components/DashboardWidget/News.js @@ -36,7 +36,12 @@ export default { quantity = this.height === 1 ? 4 : MAX_LOADED_NEWS; } - return this.allNewsList.slice(0, quantity); + let slicedNews= this.allNewsList.slice(0, quantity); + slicedNews.sort((a,b)=>{ + return new Date(b.insertamum) - new Date(a.insertamum); + }); + + return slicedNews; }, carouselItems() { return this.allNewsList.reduce((acc, cur) => { @@ -47,6 +52,14 @@ export default { } }, methods: { + formatDate: function (dateTime) { + const dt = new Date(dateTime); + return dt.getDate() + '.' + (dt.getMonth() + 1) + '.' + dt.getFullYear(); + }, + formatTime: function (dateTime) { + const dt = new Date(dateTime); + return dt.getHours() + ':' + dt.getMinutes(); + }, isString(value){ return Object.prototype.toString.call(value) === '[object String]'; }, @@ -141,6 +154,25 @@ export default { this.allNewsList = Array.from(Object.values(news)); this.selected = this.allNewsList.length ? this.allNewsList[0] : null this.initActiveItem() + + Vue.nextTick(() => { + document.querySelectorAll(".fhc-news-card-item .card-body, .fhc-news-card-item .card, .fhc-news-card-item .card-header").forEach((el) => { + el.classList.add("border-0"); + }); + + document.querySelectorAll(".fhc-news-card-item .card-header").forEach((el) => { + el.classList.add("px-5"); + el.classList.add("fhc-primary"); + }); + document.querySelectorAll(".fhc-news-card-item .card-header .row").forEach((el) => { + el.classList.add("w-100"); + el.classList.add("align-items-center"); + + }); + document.querySelectorAll(".fhc-news-card-item .card-header .row h2").forEach((el) => { + el.classList.add("mb-0"); + }); + }) }) .catch((err) => { @@ -167,32 +199,37 @@ export default { } this.initCarouselInstance() + + }, template: /*html*/ `
-
-
-
- {{ news.content_obj.betreff?news.content_obj.betreff:getDate(news.insertamum) }}
- {{ formatDateTime(news.insertamum) }} +
+
+
+
+ {{ formatDate(news.insertamum) }} + {{ formatTime(news.insertamum) }} +
+
+ {{ news.content_obj.betreff?news.content_obj.betreff:getDate(news.insertamum) }} +
+
-
-