Skip to content

Commit de7d812

Browse files
r03ert0r03ert0
committed
wip: user page
1 parent 8571ca3 commit de7d812

3 files changed

Lines changed: 260 additions & 0 deletions

File tree

‎user/index.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>BrainWeb</title>
5+
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
7+
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
8+
<link href="https://cdn.jsdelivr.net/npm/quasar@1.9.10/dist/quasar.min.css" rel="stylesheet" type="text/css">
9+
<link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet">
10+
11+
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
12+
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,900" rel="stylesheet">
13+
14+
<link rel="stylesheet" type="text/css" href="/css/main.css">
15+
<link rel="stylesheet" type="text/css" href="./user.css">
16+
</head>
17+
18+
<body>
19+
20+
<!-- Firebase authentication -->
21+
<div id="firebaseui-auth-container" class="auth-dialog"></div>
22+
23+
<!-- navigation bar -->
24+
<!-- currently, the fixed top class is added, so it sticks to the top -->
25+
<!-- data value of nav bar corresponds to id in each section -->
26+
<nav class="navbar navbar-expand-lg fixed-top ">
27+
28+
<a class="navbar-brand" href="/" >
29+
<div class="logo_brainweb"><p style="padding-left:4em;color:white;cursor:pointer;font-size:14px;font-weight:300;line-height:2.7;vertical-align: middle;">BrainWeb</p></div>
30+
</a>
31+
32+
<button class="navbar-toggler landing-page myCollapsedMenuBarIcon" id="myMenuBtn" type="button" data-toggle="collapse" data-target="#myMenu" aria-controls="myMenu" aria-expanded="false" aria-label="Toggle navigation" style="padding:0;border:none; width:1.5em;height:1.5em;" onclick="this.blur();">
33+
</button>
34+
35+
<div class="collapse navbar-collapse" id="myMenu" style="width:100%;">
36+
<ul class="navbar-nav mr-4" >
37+
<li class="nav-item">
38+
<a class="nav-link" href="/">BrainWeb</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="/#events">Events</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="/projects/">Projects</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="/community/">Community</a>
48+
</li>
49+
<li class="nav-item">
50+
<a class="nav-link" href="/videoconference/">Videoconference</a>
51+
</li>
52+
<li class="nav-item">
53+
<span class="nav-link" id="loginStatus" style="border-bottom:none"><a style="color:white" href="#" onclick="signIn()">Sign In</a></span>
54+
</li>
55+
<li class="nav-item" id="userAvatar">
56+
<img class="userIcon"/>
57+
</li>
58+
</ul>
59+
</div>
60+
</nav>
61+
62+
<div id="q-app" class="q-pa-xl">
63+
<div class="q-pa-xl">
64+
<q-card flat bordered class="q-pa-xl flex justify-center items-start content-start">
65+
<q-card-section horizontal>
66+
<q-card-section class="col-5 flex flex-center">
67+
<q-img
68+
class="rounded-borders"
69+
style="max-width: 200px"
70+
:src="userPicture"
71+
/>
72+
</q-card-section>
73+
74+
<q-card-section class="q-pt-xs flex-top">
75+
<div class="text-overline">{{userName}}</div>
76+
<div class="text-h5 q-mt-sm q-mb-xs">{{userDisplayName}}</div>
77+
78+
<q-select
79+
label="Skills"
80+
filled
81+
v-model="personSkills"
82+
use-input
83+
use-chips
84+
multiple
85+
hide-dropdown-icon
86+
input-debounce="0"
87+
new-value-mode="add-unique"
88+
:options="skills"
89+
></q-select>
90+
</q-card-section>
91+
92+
</q-card-section>
93+
</q-card>
94+
95+
</div>
96+
</div>
97+
98+
<script src="/js/sentry.min.js" data-lazy="no"></script>
99+
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
100+
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.10/dist/quasar.umd.min.js"></script>
101+
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.10/dist/icon-set/svg-material-icons.umd.min.js"></script>
102+
<script defer src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
103+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css" />
104+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
105+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
106+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-database.js"></script>
107+
108+
<script defer src="/js/init-firebase.js"></script>
109+
<script type="module" src="./index.js"></script>
110+
111+
<!-- Global site tag (gtag.js) - Google Analytics -->
112+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138729622-3"></script>
113+
<script>
114+
window.dataLayer = window.dataLayer || [];
115+
function gtag(){dataLayer.push(arguments);}
116+
gtag('js', new Date());
117+
gtag('config', 'UA-138729622-3');
118+
</script>
119+
120+
</body>
121+
</html>

‎user/index.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* global Vue Quasar */
2+
/* eslint-disable camelcase */
3+
import * as BWData from "../community/brainweb-data.js";
4+
import * as BWFirebase from "../community/brainweb-firebase.js";
5+
6+
Quasar.Dark.set(true);
7+
8+
const app = new Vue({
9+
el: '#q-app',
10+
data () {
11+
return {
12+
userSignedIn: false,
13+
userName: "",
14+
userDisplayName: "",
15+
userPicture: "",
16+
personSkills: [],
17+
skills: []
18+
};
19+
},
20+
methods: {
21+
goTo (url) {
22+
window.location = url;
23+
}
24+
}
25+
});
26+
27+
const dataReceived = (circle) => {
28+
29+
const skills = Array.from(new Set(Object.keys(circle).map((k) => {
30+
if(circle[k].skills) {
31+
return circle[k].skills.map((s) => s.toLowerCase().trim());
32+
}
33+
34+
return [];
35+
})
36+
.flat()));
37+
38+
app.skills.length = 0;
39+
app.skills.push(...skills);
40+
41+
console.log(circle["2310732"]);
42+
app.userName = circle["2310732"].username;
43+
// app.displayName = circle["2310732"].displayname;
44+
app.personSkills.length = 0;
45+
app.personSkills.push(...circle["2310732"].skills);
46+
};
47+
48+
BWFirebase.init({
49+
BWData,
50+
dataReceivedFn: dataReceived
51+
});
52+
53+
// eslint-disable-next-line no-undef
54+
startFirebase();
55+
window.addEventListener('load', () => {
56+
// eslint-disable-next-line no-undef
57+
initApp({
58+
loginUserFn: async (user) => {
59+
const { displayName, photoURL, providerData } = user;
60+
document.querySelector("#userAvatar img").src = photoURL;
61+
document.querySelector("#userAvatar").style.display = "inline-block";
62+
document.getElementById("loginStatus").innerHTML = `<span id="user">${displayName}</span> (<a style="color:white" href="#" onclick="signOut()">Sign Out</a>)`;
63+
64+
const [{uid}] = providerData;
65+
app.uid = uid;
66+
app.userSignedIn = true;
67+
app.userDisplayName = displayName?displayName:((await BWData.fetchUserInfoFromGitHub(uid)).login);
68+
app.userPicture = photoURL;
69+
},
70+
logoutUserFn: () => {
71+
document.querySelector("#userAvatar").style.display = "none";
72+
document.querySelector("#userAvatar img").src = "";
73+
document.getElementById("loginStatus").innerHTML = `<a style="color:white" href="#" onclick="signIn()">Sign In</a>`;
74+
document.querySelectorAll(".logged").forEach((el) => { el.classList.remove("logged"); });
75+
76+
app.userSignedIn = false;
77+
app.uid = null;
78+
app.userDisplayName = null;
79+
app.userGitHubName = null;
80+
app.userPicture = null;
81+
}
82+
});
83+
84+
BWFirebase.listen({
85+
circleName: "BrainWeb"
86+
});
87+
});

‎user/user.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
html {
2+
height:100%;
3+
}
4+
body {
5+
height:100%;
6+
}
7+
#q-app {
8+
height:100%;
9+
}
10+
#videoconference {
11+
height: 100%;
12+
margin-top:4rem;
13+
}
14+
.userIcon {
15+
width: 32px;
16+
height: 32px;
17+
clip-path: circle(16px at center);
18+
}
19+
#userAvatar {
20+
display: none;
21+
}
22+
.auth-dialog > div:first-child {
23+
position: absolute;
24+
left: 50%;
25+
top: 50%;
26+
background: rgba(0,0,0,0.5);
27+
border: thin solid #777;
28+
transform: translate(-50%, -50%);
29+
z-index: 1050;
30+
}
31+
#loginStatus a {
32+
border-bottom: none;
33+
}
34+
#loginStatus a:hover {
35+
border-bottom: 1px solid white;
36+
}
37+
#jitsi {
38+
width: 100%;
39+
height: calc( 100% - 4rem );
40+
}
41+
42+
[v-cloak] {
43+
display: none
44+
}
45+
.row {
46+
margin-left: 0 !important;
47+
margin-right: 0 !important;
48+
}
49+
.col {
50+
padding-left: 0 !important;
51+
padding-right: 0 !important;
52+
}

0 commit comments

Comments
 (0)