Textcreator LIVE V13.1 Cloud Music OS — Deel 17 van 23
Dit deel gaat direct verder onder deel 16.
Toegevoegd:
UI Engine V13.1
centrale interface componenten
dashboard widgets
statuskaarten
meldingen systeem
voorbereiding mobiele app-weergave
Plak dit onder deel 16.
<script>
/*
====================================================
TEXTCREATOR LIVE V13.1
PART 17
UI ENGINE
====================================================
*/
const UI_ENGINE={
version:"V13.1",
notifications:[],
components:{}
};
/*
====================================================
UI CREATE ELEMENT
====================================================
*/
function ui(id,html){
const element=
document.getElementById(id);
if(element){
element.innerHTML=html;
}
}
/*
====================================================
NOTIFICATION SYSTEM
====================================================
*/
function notify(message,type="info"){
const notification={
message:message,
type:type,
time:new Date()
};
UI_ENGINE.notifications.push(
notification
);
console.log(
"UI Notification",
notification
);
showNotification(
notification
);
}
function showNotification(data){
const area=
document.getElementById(
"workspace"
);
if(!area)
return;
const color=
data.type==="error"
?
"❌"
:
data.type==="success"
?
"✅"
:
"ℹ️";
const box=document.createElement(
"div"
);
box.className="song-card";
box.innerHTML=
`
${color}
${data.message}
`;
area.prepend(box);
setTimeout(()=>{
box.remove();
},4000);
}
/*
====================================================
CARD COMPONENT
====================================================
*/
function createCard(title,content,icon="🎵"){
return `
<div class="song-card">
<h3>
${icon}
${title}
</h3>
<p>
${content}
</p>
</div>
`;
}
/*
====================================================
STATUS CARD
====================================================
*/
function createStatusCard(){
return `
<div class="card">
<h2>
🚀 Cloud Music Status
</h2>
${
createCard(
"API",
V13_SYSTEM.api
?
"Online 🟢"
:
"Offline 🔴",
"☁️"
)
}
${
createCard(
"Generated",
APP.generated.length+
" songs",
"📚"
)
}
${
createCard(
"Jukebox",
APP.songs.length+
" songs",
"🎧"
)
}
${
createCard(
"AI",
APP.ai.length+
" providers",
"🤖"
)
}
</div>
`;
}
/*
====================================================
DASHBOARD VIEW
====================================================
*/
function openDashboard(){
setWorkspace(`
<h2>
📊 Textcreator LIVE Dashboard
</h2>
${
createStatusCard()
}
<div class="card">
<h3>
☁️ Cloud Music OS
</h3>
<p>
Versie:
V13.1
</p>
<p>
Maker:
Stijn Gabeler
</p>
<p>
Artist:
@GoDoGood
</p>
</div>
`);
notify(
"Dashboard geopend",
"success"
);
}
/*
====================================================
LOADING COMPONENT
====================================================
*/
function showLoading(target,message="Laden..."){
const area=
document.getElementById(target);
if(area){
area.innerHTML=
`
<div class="song-card">
⏳ ${message}
</div>
`;
}
}
/*
====================================================
EMPTY STATE
====================================================
*/
function emptyState(title,text){
return `
<div class="song-card">
<h3>
${title}
</h3>
<p>
${text}
</p>
</div>
`;
}
/*
====================================================
MOBILE UI HELPERS
====================================================
*/
function isMobile(){
return window.innerWidth < 800;
}
function mobileMode(){
if(isMobile()){
console.log(
"Mobile UI actief"
);
return true;
}
return false;
}
/*
====================================================
REGISTER UI COMPONENTS
====================================================
*/
function initUIEngine(){
UI_ENGINE.components={
dashboard:
openDashboard,
notify:
notify,
card:
createCard
};
console.log(
"UI Engine gestart",
UI_ENGINE
);
}
window.addEventListener(
"DOMContentLoaded",
()=>{
initUIEngine();
});
console.log(
"UI Engine V13.1 loaded"
);
</script>
Einde deel 17/23.
Volgend deel 18 van 23:
Song Management Engine
toevoegen/bewerken/verwijderen
favoriete songs
song status workflow
koppeling met Library en Jukebox.