Page Title

/* I'm so happy to announce that I've completed one of my biggest codes. This is a full featured WEB APP and my first code of 2020. You can create group with other members and code together. You can publish the group as a code too. Hope you'll find it enjoyable. I'll continue making this type of web app onwards. Stay tunned ! I'll be happy to get any bug report. Lol STARTED-ON : 28/12/2019 COMPLETED-ON : 06/02/2020 PUBLISHED-ON : 06/02/2020 BEST WISHES FROM Arb ! */ window.onload = () => { ////////// Values /////////////// let pageName = ''; let nav; let names = ['Overview', 'Codes', 'Coders', 'Groups']; let icons = ['home', 'code', 'user', 'group']; let pages = ['overview-page', 'code-page' ,'user-page', 'group-page']; let overviewNav; let onNames = ['All', 'Denied']; let onIcons = ['certificate', 'times']; let pNav; let pNavNames = ['Groups', 'Denied']; let pIcons = ['group', 'times']; let cpNav; let cpNavNames = ['HTML', 'CSS', 'JS', 'OUTPUT']; let cpNavIcons = ['code', 'code', 'code', 'code']; let editorPages = ['html', 'css', 'js', 'output']; let html, css, js, frame, code; let readOnly = true; let hasGroup = false; let acceptedUserGroups = []; let vr = false; let uProfile, oProfile; let createUserClicked = false; let selectedUsers = 0; let selectedUsersArray = []; let groupID = 0; let initHtml, initCss, initJs; let ovNavIndex; let yourCreatedGroups = []; let publicId, publicGroupId; let publicGroupUsers = []; /* Firebase */ let db = firebase.database(); let userRef = db.ref('users'); let rawUsers = db.ref('raw-users'); let rawGroups = db.ref('raw-groups'); let rawCodes = db.ref('raw-codes'); ///////////////// Class //////////////// class Notification { constructor(text, type, uid) { this.text = text; this.type = type; this.uid = uid; this.notiDiv = document .createElement('div'); this.notiDiv .classList.add('noti'); this.html = `

${this.text[0]}

${this.text}

`; this.notiDiv.innerHTML = this.html; } send() { id('noti-holder') .appendChild(this.notiDiv); } onClick() { this.notiDiv .addEventListener('click', () => { /// Noti Clicked if (this.type == 'group') { allowWriting(); openCodePlayGround(this.uid); } }); } } class Profile { constructor ( id, name, email, verified, utype, position ) { this.id = id; this.email = email; this.name = name; this.isVerified = verified; this.uType = utype; this.position = position; } update() { id('short-name') .innerText = this.name[0] + this.name[1]; id('full-name').innerText = this.name; id('username').innerText = this.email; id('vrfd').innerText = this.isVerified ? 'Verified' : 'Unverified'; id('uType').innerText = this.uType; id('pos').innerText = this.position; } } class CodeList { constructor ( id, name, time, views, type, accepted, group, hc, cc, jc ) { this.id = id; this.name = name; this.acceptedName = subStr(this.name, 12); this.isAccepted = accepted; this.time = time; this.views = views; this.type = type; this.group = group; this.htmlCode = hc; this.cssCode = cc; this.jsCode = jc; this.codeDiv = document .createElement('div'); this.codeDiv.classList.add('g-code'); this.html = `

${this.name[0]}

${this.acceptedName} ${ this.isAccepted ? 'Accepted' : 'Unaccepted' } ${this.time} ${this.views}

From the group ${this.group}

${this.type}

`; this.codeDiv.innerHTML = this.html; } init() { id('codeList') .appendChild(this.codeDiv); } onClick() { this.codeDiv .addEventListener('click', () => { displayNone(id('front-page')); display(id('code-playground'), 'block'); showLoader(); id('code-title').value = '.....'; displayNone(id('html')); displayNone(id('css')); displayNone(id('js')); displayNone(id('output')); cpNav.update(0); displayNoneIcons(); /// Request // setTimeout(() => { hideLoader(); cpNav.active = 0; showPage(cpNav.active, editorPages); html .setValue(this.htmlCode); css.setValue(this.cssCode); js.setValue(this.jsCode); display(id('lock-code'), 'flex'); readOnly = true; id('code-title').value = subStr(this.name, 25); id('cp-g-name').innerText = this.group; }, 1000); }); } } class GroupList { constructor( id, name, admin, users, accepted, prn ) { this.id = id; this.name = name; this.acceptedName = subStr(this.name, 15); this.admin = admin; this.accepted = accepted; this.users = users; this.groupUsers = []; this.prn = prn; this.htmlCode = ` Page Title `; this.cssCode = `body { margin: 0; }`; this.jsCode = ''; for (let n of this.users) { if (n.id !== uProfile.id) { this.groupUsers .push( ` ${subStr(n.name, 5)} ` ); } } this.groupDiv = document .createElement('div'); this.groupDiv .classList.add('user'); this.u_i = document .createElement('div'); this.u_i .classList.add('u-i'); this.buttonDiv = document .createElement('div'); this.buttonDiv.classList .add('grp-btn-div'); this.buttonDiv.innerHTML = ` `; this.u_meta = document .createElement('div'); this.u_meta.classList.add('u-meta'); this.u_i.innerHTML = `

${this.name[0]}

`; this.u_meta.innerHTML = `

${this.acceptedName} ${this.accepted ? 'Accepted' : 'Denied'}

Created by ${this.admin}

Coders : ${ this.groupUsers.length <= 3 ? this.groupUsers.join('') : this.groupUsers[0] + this.groupUsers[1] + this.groupUsers[2] + 'and more.' }

`; } init() { this.groupDiv .appendChild(this.u_i); this.groupDiv .appendChild(this.u_meta); this.groupDiv .appendChild(this.buttonDiv); id(this.prn) .appendChild(this.groupDiv); } onClick() { this.groupDiv .addEventListener('click', () => { // allowed users if (groupUserFunc(this.users)) { allowWriting(); } else { readOnlyAll(); } //open playground when group //is clicked if (this.accepted || groupUserFunc(this.users)) { openCodePlayGround(this.id); } else { alert('Denied group can only be opened by the members.'); } }); } } class UserList { constructor( id, name, email, ver, admin, you, groups, prn ) { this.name = name; this.id = id; this.email = email; this.acceptedName = subStr(this.name, 13); this.isVerified = ver; this.isAdmin = admin; this.userGroups = groups; this.makeGroups = []; this.isYou = you; this.prn = prn; for (let n of this.userGroups) { this.makeGroups .push( ` ${subStr(n, 5)} ` ); } // All user's groups with span this.allGroupLebels = String([...this.makeGroups]) .replace(',', ''); // Main user div this.userDiv = document .createElement('div'); this.userDiv.classList.add('user'); // Image div this.u_i = document .createElement('div'); this.u_i .classList.add('u-i'); // Meta Div this.u_meta = document .createElement('div'); this.u_meta.classList.add('u-meta'); // Checkbox Div this.chkboxDiv = document .createElement('div'); this.chkboxDiv .classList.add('chkbox'); this.img = document .createElement('p'); this.img.classList.add('img'); this.img.innerText = this.name[0]; // Checkbox this.checkbox = document.createElement('input'); this.checkbox.type = 'checkbox'; this.u_meta.innerHTML = `

${this.acceptedName} ${ this.isVerified ? 'Verified' : 'Unverified' }

Email : ${subStr(this.email, 25)}

`; } init() { this.u_i.appendChild(this.img); this.chkboxDiv .appendChild(this.checkbox); this.userDiv.appendChild(this.u_i); this.userDiv .appendChild(this.u_meta); this.userDiv .appendChild(this.chkboxDiv); id(this.prn) .appendChild(this.userDiv); } onClick() { // when the user is clicked this.u_meta .addEventListener('click', () => { showUserInfo(this.id);// }); } onProfileClick() { this.img .addEventListener('click', () => { showUserInfo(this.id);// }); /// Checkbox //// this.checkbox .addEventListener('change', () => { if (this.checkbox.checked) { selectedUsers++; pageNameRef.innerText = selectedUsers + ' selected'; } else { selectedUsers--; pageNameRef.innerText = selectedUsers + ' selected'; } }); } } ////////// Properties /////////// let pageNameRef = id('page-name'); let loader = id('loader'); /////// Local Func ///////// function showDialogBox() { display(id('db-holder'), 'block'); } function hideDialogBox() { displayNone(id('db-holder')); } function showProfile() { /*id('profile') .style.zIndex = '5000';*/ display(id('bg'), 'block'); id('pfl').style.bottom = '0'; } function hideProfile() { displayNone(id('bg')); id('pfl').style.bottom = '-85%'; } function setIcon(i, icn) { id('tab-icon') .classList.remove('fa-bars'); for (let j of icn) { id('tab-icon') .classList.remove('fa-' + j); } id('tab-icon').classList.add('fa-' + icn[i]); } function randomize() { setRandomBg('img'); setRandomBg('lebel'); setRandomBg('badge'); setRandomBg('crtGroup'); } function groupUserFunc(u) { let count = 0; for (let i = 0; i < u.length; i++) { if (u[i].id !== uProfile.id) { count++; } } if (count == u.length) return false; return true; } function openCodePlayGround(gUid) { //console.log(this.name); displayNone(id('front-page')); displayNone(id('noti-page')); display(id('code-playground'), 'block'); hideProfile(); displayNone(id('gu-page')); showLoader(); id('code-title').value = '.....'; displayNone(id('html')); displayNone(id('css')); displayNone(id('js')); displayNone(id('output')); cpNav.update(0); /// Extra //// //readOnlyAll(); let cUser = firebase.auth().currentUser; uProfile.name = cUser.displayName; uProfile.update(); html.setValue(''); css.setValue(''); js.setValue(''); // raw-groups > codes let groupCodeRef = rawGroups.child('codes'); // raw-groups > codes > uid let insertCodeRef = groupCodeRef.child(gUid); groupID = gUid; //publishAsCode(gUid); insertCodeRef.once('value'). then(v => { let val = v.val(); html.setValue(val.html); css.setValue(val.css); js.setValue(val.js); initHtml = val.html; initCss = val.css; initJs = val.js; // raw-groups > general let insertGroupRef = rawGroups.child('general'); insertGroupRef .once('value').then(v => { let val = v.val(); let keys = Object .keys(val); for (let i = 0; i < keys.length; i++) { let k = keys[i] if (val[k].id == gUid) { hideLoader(); cpNav.active = 0; showPage(cpNav.active, editorPages); id('code-title').value = subStr(val[k].name, 25); id('cp-g-name').innerText = val[k].name; showGroupUsers (val[k].users); publicGroupUsers = val[k].users; vr = val[k].verified; publicGroupId = val[k].id; if (readOnly) { display(id('lock-code'), 'flex'); } displayIcons(); } } }); }).catch(err => { hideLoader(); alert('Something went wrong'); }); } function showUserInfo(uid) { /* @@ This function is fired when a user is clicked from the user list @@ */ // Force to display none and // showing the loader displayNone(id('userList')); showLoader(); let userChild = userRef .child(uid); // users > uid > general let userGenInf = userChild .child('general'); userGenInf.once('value').then(snap => { let val = snap.val()[Object.keys(snap.val())[0]]; oProfile.name = val.name; oProfile.id = val.id; oProfile.email = val.email; oProfile.update(); display(id('userList'), 'block'); randomize(); getSpecificGroupCall ( uid, 'accepted', 'p-con', false ); showProfile(); publicId = uid; pNav.update(0); }); } function displayNoneIcons() { displayNone(id('setting')); displayNone(id('chatroom')); displayNone(id('saveAsCode')); } function displayIcons() { display(id('setting'), 'flex'); display(id('chatroom'), 'flex'); display(id('saveAsCode'), 'flex'); } function setRandomBg(c) { let colors = [ '#FC2750', '#626EBD', '#3C4784', '#FB8443', '#04BCA4', '#916EBA', '#04947C', '#EB6C93']; for ( let i = 0; i < cls(c).length; i++) { let clr = colors[Math .floor(Math.random() * colors .length)]; cls(c)[i].style.background = clr; } } function setPad() { let pad = Math.ceil( (innerHeight - parseInt(getComputedStyle (q('#log-reg')).height)) / 2); // set responsive padding q('.log-reg-mh').style .paddingTop = pad + 'px'; } function readOnlyAll() { html.setOptions({ readOnly: true }); css.setOptions({ readOnly: true }); js.setOptions({ readOnly: true }); readOnly = true; //return true; } function allowWriting() { html.setOptions({ readOnly: false }); css.setOptions({ readOnly: false }); js.setOptions({ readOnly: false }); readOnly = false; } function setEditor(e, m, t) { e.setTheme('ace/theme/'+ t); e.session.setMode('ace/mode/' + m); } function subStr(txt, len) { let acceptedText = txt.length < len ? txt : txt.substring(0, len - 1) + '...'; return acceptedText; } function showPage(i, pages) { display(id(pages[i]), 'block'); } function hidePage(i, pages) { displayNone(id(pages[i])) } function hideLoader() { loader.style.display = 'none'; } function setText(e, txt) { e.innerText = txt; } function showLoader() { loader.style.display = 'block'; } function displayNone(e) { e.style.display = 'none'; } function display(e, type) { e.style.display = type; } function q(qr) { return document.querySelector(qr); } function id(id) { return document.getElementById(id); } function cls(c) { return document .getElementsByClassName(c); } function showTip() { displayNone(id('cp-nav-h')); displayNone(id('cp-top-bar')); id('html').style.height = '100vh'; id('css').style.height = '100vh'; id('js').style.height = '100vh'; id('output').style.height = '100vh'; display(id('tip'), 'flex'); display(id('cp-bottom-nav'), 'grid'); } function hideTip() { display(id('cp-nav-h'), 'block'); display(id('cp-top-bar'), 'grid'); id('html').style.height = 'calc(100% - 110px)'; id('css').style.height = 'calc(100% - 110px)'; id('js').style.height = 'calc(100% - 110px)'; id('output').style.height = 'calc(100% - 110px)'; displayNone(id('tip')); displayNone(id('cp-bottom-nav')); } function init_cp_nav( names, icons, active ) { cpNav = new Nav(id('cp-nav-h'), 'cp-nav', names, icons, active); cpNav.init(); cpNav.init_Tabs(); cpNav.onTabClick(); } function init_p_nav( names, icons, active ) { pNav = new Nav(id('p-nav'), 'overview-nav', names, icons, active); pNav.init(); pNav.init_Tabs(); pNav.onTabClick(); } function init_on_nav(names, icons, active) { overviewNav = new Nav(id('ov-page'), 'overview-nav', names, icons, active); overviewNav.init(); overviewNav.init_Tabs(); overviewNav.onTabClick(); } function init_bottom_nav( names, icons, active ) { nav = new Nav(id('front-page'), 'bottom-navbar', names, icons, active); nav.init(); nav.init_Tabs(); nav.onTabClick(); } function setPageName(txt) { pageName = txt; return pageNameRef.innerText = pageName; } function updateOutput() { displayNone(id('lock-code')); let h = html.getValue(); let c = css.getValue(); let j = js.getValue(); let code = h + '' + '(function() { ' + j + '})()' + ''; let outpt = id("output") .contentWindow.document; outpt.open(); outpt.writeln(code); outpt.close(); } function codeEditor(){ html = ace.edit("html"); css = ace.edit("css"); js = ace.edit("js"); setEditor(html, 'html', 'textmate'); setEditor(css, 'css', 'textmate'); setEditor(js, 'javascript', 'textmate'); // set default html html.setValue(` Page Title `); // set default css css.setValue(`body { margin: 0; }`); // Set js to none js.setValue(''); } function registerFunc() { let regHtml = `

Name:

Email:

Password:

`; q('.lr-i').innerHTML = regHtml; q('.lr-h').innerText = 'Register'; display(id('regPageBackBtn'), 'flex'); displayNone(id('regBtn')); display(id('regMainBtn'), 'block'); displayNone(id('loginBtn')); setPad(); } function loginFunc() { let logHtml = `

Email:

Password:

`; q('.lr-i').innerHTML = logHtml; q('.lr-h').innerText = 'Login'; display(id('loginBtn'), 'block'); displayNone(id('regPageBackBtn')); displayNone(id('regMainBtn')); display(id('regBtn'), 'block'); setPad(); } function showNoti() { id('alert').style.opacity = '1'; setTimeout(() => { id('alert').style.opacity = '0'; }, 2000); } function showGroupUsers(u) { id('gu-holder').innerHTML = ''; for (let i = 0; i < u.length; i++) { if (u[i].id !== uProfile.id) { let user = new UserList( u[i].id, u[i].name, u[i].email, true, true, true, [], 'gu-holder' ); user.init(); user.onClick(); user.onProfileClick(); } } } function createGroupInterface() { for (e of cls('chkbox')){ display(e, 'flex'); displayNone(mkGroup); } hidePage(0, pages); hidePage(1, pages); hidePage(2, pages); hidePage(3, pages); nav.update(2); showPage(2, pages); id('tab-icon').classList .remove('fa-home'); id('tab-icon').classList .add('fa-angle-left'); displayNone(id('bell-icon')); displayNone(id('yourPfl')); id('tob-bar') .style.gridTemplateColumns = '1fr 4fr 1fr 1fr'; id('signOut-icon').classList .remove('fa-sign-out'); id('signOut-icon').classList .add('fa-send'); id('page-name').innerHTML = selectedUsers + ' selected'; createUserClicked = true; } function hideCreateGroupInterface() { if (createUserClicked) { for (e of cls('chkbox')){ displayNone(e); display(mkGroup, 'flex'); } id('tab-icon').classList .add('fa-home'); id('tab-icon').classList .remove('fa-angle-left'); display(id('bell-icon'), 'flex'); display(id('yourPfl'), 'flex'); id('tob-bar') .style.gridTemplateColumns = '0.8fr 3.2fr 0.8fr 0.8fr 0.8fr'; id('signOut-icon').classList .add('fa-sign-out'); id('signOut-icon').classList .remove('fa-send'); let selectedUsers = 0; id('page-name').innerHTML = 'Coders'; createUserClicked = false; } } function addNoti(g, u, uid) { for (let i = 0; i < u.length; i++) { // users > uid let userChild = userRef .child(u[i].id); // users > uid > general let userNoti = userChild .child('noti'); userNoti.push({ text : 'You are added to the group ' + g + '', type : 'group', uid : uid }); } } function notiFunc(u) { for (let i = 0; i < u.length; i++) { // users > uid let userChild = userRef .child(u[i].id); // users > uid > general let userNoti = userChild .child('noti'); userNoti.on('value', v => { let val = v.val(); /*if (u[i].id == uProfile.id) { console.log(val.text); }*/ console.log(val.uid) }); } } function loadNoti() { // users > uid let userChild = userRef .child(currentUid()); // users > uid > general let userNoti = userChild .child('noti'); displayNone(id('front-page')); display(id('noti-page'), 'block'); showLoader(); displayNone(id('noti-holder')); id('noti-holder').innerHTML = ''; // Load noti userNoti.once('value').then(v => { let val = v.val(); let keys = Object.keys(val); for (let k of keys) { let noti = new Notification(val[k].text, val[k].type, val[k].uid); noti.send(); noti.onClick(); } hideLoader(); display(id('noti-holder'), 'block'); randomize(); }).catch (err => { hideLoader(); id('noti-holder').innerHTML = '

No notification found.

'; }); } function createGroup(us){ let mainGroupUsers = []; let groupUUID = uuid(); for (let u of us) { if (u.checkbox.checked){ mainGroupUsers.push(u); } } // add admin to the group for (let u of users) { if (u.id == uProfile.id) { mainGroupUsers.push(u); } } let cUser = firebase.auth() .currentUser; uProfile.id = cUser.uid; uProfile.email = cUser.email; uProfile.name = cUser.displayName; uProfile.update(); let groupData = { id : groupUUID, name : q('.db-input').value, ownerId : currentUid(), owner : uProfile.name, users : mainGroupUsers, verified : true } let htmlCode = ` Page Title `; let cssCode = `body { margin: 0; }` let jsCode = ``; showLoader(); hideDialogBox(); hideCreateGroupInterface(); for (let j = 0; j < pages.length; j++) { hidePage(j, pages); } // raw-groups > general let insertGroupRef = rawGroups.child('general'); // raw-groups > codes let groupCodeRef = rawGroups.child('codes'); insertGroupRef.push(groupData, err => { if (err) { hideLoader(); showPage(2, pages); alert(err); } else { // insert code groupCodeRef .child(groupUUID).set({ html : htmlCode, css : cssCode, js : jsCode }); // insert noti addNoti(groupData.name, us, groupData.id); if (groupUserFunc(groupData.users)) { allowWriting(); } else { readOnlyAll(); } //open playground when group //is clicked if (groupData.accepted || groupUserFunc(groupData.users)) { openCodePlayGround(groupData.id); } randomize(); } }); } function getUserCall(bol) { rawUsers.once('value').then(snap => { let val = snap.val(); let keys = Object.keys(val); for (let i = 0; i < keys.length; i++){ let k = keys[i]; let user = new UserList( val[k].id, val[k].name, val[k].email, true, true, true, acceptedUserGroups, 'userList' ); if (val[k].id !== uProfile.id) { user.init(); user.onClick(); user.onProfileClick(); } users.push(user); } hideLoader(); randomize(); //notiFunc(users); if (bol) { createGroupInterface(); } }).catch(err => { hideLoader(); id('userList').innerHTML = '

No user found.

'; }); } function getGroupCall() { // raw-groups > general let insertGroupRef = rawGroups.child('general'); id('groupList').innerHTML = ''; insertGroupRef.once('value') .then( snap => { let val = snap.val(); let keys = Object.keys(val); for (let i = 0; i < keys.length; i++){ let k = keys[i]; let group = new GroupList( val[k].id, val[k].name, val[k].owner, val[k].users, val[k].verified, 'groupList'); if (val[k].verified == true) { group.init(); group.onClick(); } } setError('groupList'); hideLoader(); randomize(); }).catch( err => { hideLoader(); setError('groupList'); }); } function mainGroupCall() { // raw-groups > general let insertGroupRef = rawGroups.child('general'); id('code-list').innerHTML = ''; showLoader(); insertGroupRef.once('value') .then( snap => { let val = snap.val(); let keys = Object.keys(val); for (let i = 0; i < keys.length; i++){ let k = keys[i]; if (yourGroups(val[k].users, currentUid())) { let group = new GroupList( val[k].id, val[k].name, val[k].owner, val[k].users, val[k].verified, 'code-list'); group.init(); group.onClick(); //q('.error').style.display = 'none'; } else { //id('code-list').innerHTML = '

No group found here

'; } } hideLoader(); randomize(); overviewNav.update(ovNavIndex); display(id('ov-holder'), 'block'); showPage(0, pages); }).catch( err => { hideLoader(); //id('code-list').innerHTML = '

No group found here

'; overviewNav.update(ovNavIndex); display(id('ov-holder'), 'block'); showPage(0, pages); //console.log(err) }); } function yourGroups(g, uuiid) { let count = 0; for (let i = 0; i < g.length; i++) { if (g[i].id == uuiid) { count++; } } if (count == 1) { return true; } } function setError(container) { if (id(container) .childNodes.length == 0) { //id(container).innerHTML = '

No group found here.

'; } } function getSpecificGroupCall(thisId, type, container, mainPage) { let con; if (type == 'accepted') { con = true; } else { con = false; } // raw-groups > general let insertGroupRef = rawGroups.child('general'); id(container).innerHTML = ''; showLoader(); if (mainPage) { displayNone (id('ov-holder')); nav.update(nav.active); } insertGroupRef.once('value') .then(snap => { let val = snap.val(); let keys = Object.keys(val); for (let i = 0; i < keys.length; i++){ let k = keys[i]; if (val[k].verified == con) { if (yourGroups(val[k].users, thisId)) { let group = new GroupList( val[k].id, val[k].name, val[k].owner, val[k].users, val[k].verified, container); group.init(); group.onClick(); acceptedUserGroups .push(group.name); if (mainPage) { yourCreatedGroups .push(group); } for (let e of cls('error')) { displayNone(e); } } } } randomize(); hideLoader(); overviewNav.update(ovNavIndex); display(id('ov-holder'), 'block'); if (mainPage) { showPage(0, pages); } setError(container); }).catch (err => { hideLoader(); setError(container); display(id('ov-holder'), 'block'); if (mainPage) { showPage(0, pages); } }); } function currentUid() { let cUser = firebase.auth().currentUser; return cUser.uid; } function goToUserPage() { id('userList').innerHTML = ''; hidePage(0, pages); hidePage(1, pages); hidePage(2, pages); hidePage(3, pages); nav.update(2); showPage(2, pages); showLoader(); users = []; selectedUsers = 0; selectedUsersArray = []; getUserCall(true); } function publishAsCode() { /*let codes = rawGroups.child('codes').child(uid); codes.once('value').then(v => { let val = v.val(); let data = { id : '', htmlCode : val.html, cssCode : val.css, jsCode : val.js, views : 0, time : '0 min', group : 'Bongo' } });*/ let data = { id : uuid(), name : id('code-title').value, group : id('code-title').value, htmlCode : html.getValue(), cssCode : css.getValue(), jsCode : js.getValue() } rawCodes.push(data, err => { if (err) { alert(err) } else { //console.log('Added'); updateGroup(); alert('The group was published as a code.') } }); } function updateGroup() { let gRef = rawGroups.child('codes') .child(groupID); gRef.update({ html: html.getValue(), css : css.getValue(), js : js.getValue() }).then (err => { if (!err) { displayNone(id('code-playground')); display(id('front-page'), 'block'); //overviewNav.update(lastNavIndex); displayNone(id('lock-code')); } }); } function loadCodes() { rawCodes.once('value').then(v => { let val = v.val(); let keys = Object.keys(val); for (let i = 0; i < keys.length; i++) { let k = keys[i]; c1 = new CodeList( val[k].id, val[k].name, '2 min', '255', 'Web', true, val[k].group, val[k].htmlCode, val[k].cssCode, val[k].jsCode ); c1.init(); c1.onClick(); } hideLoader(); randomize(); }).catch(err => { hideLoader(); id('codeList').innerHTML = '

No code found.

'; }) } //////////////////////////////////////////// /** Adding firebase **/ id('loginBtn') .addEventListener('click', () => { // Show Loader showLoader(); // e & p let email = id('login-email').value; let pass = id('login-pass').value; // Crrate promise let promise = firebase.auth() .signInWithEmailAndPassword(email, pass).then(v => { let cUser = firebase.auth() .currentUser; id('yourPfl').innerText = cUser.displayName[0]; }); // check error promise.catch(e => { hideLoader(); alert(e.message); }); /*setTimeout(() => { //hideLoader(); }, 3000);*/ }); id('regMainBtn') .addEventListener('click', () => { // Show Loader showLoader(); // e & p & n let name = id('reg-name').value; let email = id('reg-email').value; let pass = id('reg-pass').value; if (name.length < 2) { name = 'AA'; } // Crrate promise let promise = firebase.auth() .createUserWithEmailAndPassword (email, pass); // check error promise.catch( e => { hideLoader(); alert(e.message); }); promise.then( r => { /* Add User to Database */ let uRef = userRef .child(r.user.uid) .child('general'); let genInf = { name : name, id : r.user.uid, pass : pass, email : email, verified : true }; // add to raw users too // to make a list - lol rawUsers.push(genInf); uRef.push(genInf); id('yourPfl').innerText = name[0]; // set display name return r.user.updateProfile({ displayName : name }); }); }); firebase.auth() .onAuthStateChanged( user => { // if user exists if (user) { displayNone(id('log-reg-page')); display (id('front-page'), 'block'); // update user profile for (let p of pages) { displayNone(id(p)); } uProfile = new Profile(user.uid, 'Test', user.email, false, 'Coder', 'Top'); uProfile.update(); // Load Homepage /*getSpecificGroupCall ( currentUid(), 'denied', 'code-list', true );*/ mainGroupCall(); ovNavIndex = 0; } }); //////////////////////////////////////////// oProfile = new Profile('02', 'Test', 'email', false, 'Coder', 'Top'); // init main bottom nav init_bottom_nav(names, icons, 0); // init overview nav init_on_nav(onNames, onIcons, 0); // init profile nav init_p_nav(pNavNames, pIcons, 0); // init code playground nav init_cp_nav(cpNavNames, cpNavIcons, 0); codeEditor(); let gu = []; let users = []; let userLoaded = false; randomize(); setPad(); displayNoneIcons(); id('saveAsCode') .addEventListener('click', () => { if (vr == true) { let publish = confirm('Publish as a code?'); if (publish) { publishAsCode(); } } else { alert('Denied group can not be published as a code.'); } }); id('bg') .addEventListener('touchstart', () => { /*id('profile') .style.zIndex = '0';*/ hideProfile(); }); id('setting') .addEventListener('click', () => { displayNone(id('code-playground')); displayNone(id('gu-holder')); display(id('gu-page'), 'block'); showLoader(); setTimeout(() => { display(id('gu-holder'), 'block'); hideLoader(); randomize(); }, 1000); }); id('backFromGu') .addEventListener('click', () => { display(id('code-playground'), 'block'); displayNone(id('gu-page')); hideLoader(); }); nav.tabs[0].tabDiv .addEventListener('click', () => { showLoader(); id('code-list').innerHTML = ''; overviewNav.update(0); mainGroupCall(); ovNavIndex = 0; setIcon(0, icons); }); nav.tabs[1].tabDiv .addEventListener('click', () => { id('codeList').innerHTML = ''; showLoader(); loadCodes(); setIcon(1, icons); }); nav.tabs[2].tabDiv .addEventListener('click', () => { showLoader(); id('userList').innerHTML = ''; selectedUsers = 0; hideCreateGroupInterface(); display(id('mkGroup'), 'flex'); selectedUsersArray = []; selectedUsers = 0; users = []; getUserCall(false); setIcon(2, icons); }); nav.tabs[3].tabDiv .addEventListener('click', () => { showLoader(); id('groupList').innerHTML = ''; getGroupCall(); setIcon(3, icons); }); let lastIndex = nav.active; for (let i = 0; i < nav.tabs.length; i++) { nav.tabs[i] .tabDiv .addEventListener('click', () => { for ( let j = 0; j < pages.length; j++){ if (i !== j){ hidePage(j, pages); } } showPage(i, pages); setPageName(names[i]); }); } overviewNav.tabs[0] .tabDiv.addEventListener('click', () => { mainGroupCall(); ovNavIndex = 0; }); overviewNav.tabs[1] .tabDiv.addEventListener('click', () => { getSpecificGroupCall ( currentUid(), 'denied', 'code-list', false ); ovNavIndex = 1; }); pNav.tabs[0] .tabDiv.addEventListener('click', () => { getSpecificGroupCall ( publicId, 'denied', 'p-con', false ); }); pNav.tabs[1] .tabDiv.addEventListener('click', () => { getSpecificGroupCall ( publicId, 'denied', 'p-con', false ); }); // when the plus button is clicked (on the coders page) mkGroup.addEventListener('click', () => { createGroupInterface(); }); id('mkGroup-g') .addEventListener('click', () => { goToUserPage(); }); id('addToGu') .addEventListener('click', () => { displayNone(id('gu-page')); display(id('front-page'), 'block'); updateGroup(); goToUserPage(); }); id('mkGroup-ov') .addEventListener('click', () => { //createGroupInterface(); goToUserPage(); }); id('HomeBackBtn') .addEventListener('click', () => { hideCreateGroupInterface(); }); // when your profile is clicked yourPfl.addEventListener('click', () => { let cUser = firebase.auth() .currentUser; // Set Image id('yourPfl').innerText = cUser.displayName[0]; // Show profile Info showUserInfo(currentUid()); // show group list id('p-con').innerHTML = ''; for (g of yourCreatedGroups) { g.prn = 'p-con'; g.init(); g.onClick(); } publicId = currentUid(); }); // code playground tab functionality for (let i = 0; i < cpNav.tabs.length; i++){ cpNav.tabs[i] .tabDiv .addEventListener('click', () => { showPage(i, editorPages); if (readOnly) { display(id('lock-code'), 'flex'); } for (let j = 0; j < cpNav.tabs.length; j++){ if (i !== j){ hidePage(j, editorPages); } } }); } // when back button is clicked display none the code playround and show the front page backBtn.addEventListener('click', () => { if (!readOnly) { let svcode = confirm('Do you want to save the changes?'); if (svcode) { updateGroup(); } } else { displayNone(id('code-playground')); display(id('front-page'), 'block'); //overviewNav.update(0); displayNone(id('lock-code')); } //showPage(0, onNames); }); // when output tab is clicked, update the output cpNav.tabs[3].tabDiv .addEventListener('click', () => { updateOutput(); }); let cpNavTabIndex = cpNav.active; html.addEventListener('click', () => { if (readOnly == false) { showTip(); cpNavTabIndex = 0; } else { alert('Read Only'); } }); css.addEventListener('click', () => { if (readOnly == false) { showTip(); cpNavTabIndex = 1; } else { alert('Read Only'); } }); js.addEventListener('click', () => { if (readOnly == false) { showTip(); cpNavTabIndex = 2; } else { alert('Read Only'); } }); cpNav.tabs[3].tabDiv .addEventListener('click', () => { showTip(); displayNone(id('cp-bottom-nav')); cpNavTabIndex = 3; }); id('tip') .addEventListener('click', () => { hideTip(); showPage(cpNavTabIndex, editorPages); }); id('run') .addEventListener('click', () => { updateOutput(); hidePage(0, editorPages); hidePage(1, editorPages); hidePage(2, editorPages); showPage(3, editorPages); cpNav.update(3); displayNone(id('cp-bottom-nav')); cpNavTabIndex = 3; }); id('signOut') .addEventListener('click', () => { if (!createUserClicked){ showLoader(); firebase.auth().signOut(); loginFunc(); selectedUsersArray = []; selectedUsers = 0; users = []; setTimeout(() => { hideLoader(); displayNone( id('front-page')); display(id('log-reg-page'), 'block'); }, 1000); } else { /// Create Group /// selectedUsersArray = []; for (let u of users){ if (u.checkbox.checked){ selectedUsersArray.push(u); } } // show d box //showDialogBox(); if (selectedUsers <= 5){ showDialogBox(); } else { alert('Max 5 users.'); } } }); id('db-create') .addEventListener('click', () => { createGroup(selectedUsersArray); selectedUsersArray = []; selectedUsers = 0; users = []; id('db-enter').value = ''; }); id('db-cancel') .addEventListener('click', () => { hideDialogBox(); }); id('regBtn') .addEventListener('click', () => { registerFunc(); }); id('regPageBackBtn') .addEventListener('click', () => { loginFunc(); }); id('bell-icon') .addEventListener('click', () => { loadNoti(); }); id('backFromNoti') .addEventListener('click', () => { displayNone(id('noti-page')); display(id('front-page'), 'block'); }); id('chatroom') .addEventListener('click', () => { id('chtroom').style.left = '0'; q('.chatroom-bg').style.left = '0'; }) q('.chatroom-bg') .addEventListener('click', () => { id('chtroom').style.left = '-80vw'; q('.chatroom-bg').style.left = '-100vw'; }) //////////////////////////////////////////// } /*Onload ends*/ //////// Nav Creater ///////// // Created by myself 😁 class Nav{ constructor(node, cls, tabsName, tabsIcon, active){ this.tabsName = tabsName; this.tabsIcon = tabsIcon; this.cls = cls; this.active = active; this.bottomNavDiv = document .createElement('div'); this.bottomNavDiv.classList .add(this.cls); this.bottomNavDiv.style .gridTemplateColumns = 'repeat(' + this.tabsName.length + ', 1fr)'; this.bottomNavDiv.style.display = 'grid'; this.node = node; this.tabs = []; } init(){ this.node .appendChild(this.bottomNavDiv); } init_Tabs(){ for (let i = 0; i < this.tabsName.length; i++){ let tab = new Tab( this.tabsName[i], this.bottomNavDiv, 'nav-tab', this.tabsIcon[i] ); this.tabs.push(tab); tab.add(); } this.tabs[this.active].doActive(); } onTabClick(){ for ( let i = 0; i < this.tabs.length; i++){ this.tabs[i].tabDiv .addEventListener('click', () => { this.tabs[i] .doActive(); for ( let j = 0; j < this.tabs.length; j++ ){ if (i !== j) this.tabs[j] .removeActive(); } }); } } update(i) { this.tabs[i].doActive(); for (let j = 0; j < this.tabs.length; j++){ if (i !== j) { this.tabs[j].removeActive(); } } } } class Tab { constructor(name, parent, tabCls, icon){ this.tabClsGiven = tabCls; this.parent = parent; this.icon = icon; this.name = name; this.tabDiv = document.createElement('div'); this.p1 = document .createElement('p'); this.p2 = document .createElement('p'); this.p1.classList .add('nav-tab-icon'); this.p2.classList .add('bottom-nav-text'); this.p1.innerHTML = ` `; this.p2.innerText = this.name; this.tabDiv.appendChild(this.p1); this.tabDiv.appendChild(this.p2); this.tabDiv.classList .add(this.tabClsGiven); } add(){ this.parent .appendChild(this.tabDiv); } doActive(){ this.tabDiv.classList .add('active'); this.p1.classList .add('active'); this.p2.classList .add('active'); } removeActive(){ this.tabDiv.classList .remove('active'); this.p1.classList .remove('active'); this.p2.classList .remove('active'); } }

GROUP CODING [ WEB APP ]