From 223baa712a79f7671e5ba769cac7f68f53e974b6 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Fri, 16 Jul 2021 14:48:29 +0200
Subject: [PATCH] add active users counter to comment-list
---
.../comment-list/comment-list.component.html | 4 +++-
.../comment-list/comment-list.component.scss | 18 +++++++++++++++---
.../comment-list/comment-list.component.ts | 2 +-
src/app/services/http/active-user.service.ts | 4 ++--
src/assets/icons/view.png | Bin 0 -> 1145 bytes
src/assets/icons/viewer.svg | 9 +++++++++
src/styles.scss | 7 +++++++
7 files changed, 37 insertions(+), 7 deletions(-)
create mode 100644 src/assets/icons/view.png
create mode 100644 src/assets/icons/viewer.svg
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 57627e228..95f3ecd00 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -260,7 +260,9 @@
</div>
<!-- Active User Overlay -->
<div class="activeUserOverlay">
- <p>Active Users: {{activeUsers}}</p>
+ <div class="viewer-icon">
+ </div>
+ <p style="float:left;">Active Users: {{activeUsers}}</p>
</div>
<!-- No Questions Present -->
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 845ae6dc0..bb413dd36 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -260,10 +260,22 @@ h1{
}
.activeUserOverlay{
- width:100px;
- height:100px;
+ width:180px;
+ height:25px;
position:fixed;
- background-color:red;
top:80px;
left:20px;
+ >*{
+ float:left;
+ padding:0;
+ margin:0;
+ }
+ >p{
+ font-family:'Roboto', sans-serif;
+ font-weight:bold;
+ float:left;
+ padding:5px;
+ margin:0;
+ color:var(--on-background);
+ }
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 3838b3872..18d71b3c1 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -244,7 +244,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
this.roomId = room.id;
this.activeUserService.getActiveUser(this.room)
.subscribe(i=>{
- this.activeUsers=i;
+ this.activeUsers=i.length;
});
this._subscriptionRoomService = this.wsRoomService.getRoomStream(this.roomId).subscribe(msg => {
const message = JSON.parse(msg.body);
diff --git a/src/app/services/http/active-user.service.ts b/src/app/services/http/active-user.service.ts
index d8e864e98..8c60106e4 100644
--- a/src/app/services/http/active-user.service.ts
+++ b/src/app/services/http/active-user.service.ts
@@ -18,8 +18,8 @@ export class ActiveUserService extends BaseHttpService {
super();
}
- public getActiveUser(room: Room):Observable<number>{
- const url = '/api/roomsubscription/usercount';
+ public getActiveUser(room: Room):Observable<any>{
+ const url = '/api/roomsubscription/usercount?ids='+room.id;
return this.http.get(url, httpOptions).pipe(
tap(_ => ''),
catchError(this.handleError<any>('yeet'))
diff --git a/src/assets/icons/view.png b/src/assets/icons/view.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1c4a4e15328218b7e73df60d475c0401f7d8102
GIT binary patch
literal 1145
zcmV-<1cv*GP)<h;3K|Lk000e1NJLTq001cf001cn1^@s6s9*s00004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ>7vm1v`j1WT=8*K~%(1t5Adrp;l<s!Q|2}Xws0R
zxHt-~1qVMCs}3&Cx;nTDg5U>;o12rOi<J1kq|hS9gX4a@yZ5+z2MF~t)2xnhK+|nA
zm57U(?5Y@gMF@QeV-zzovy3@OO2T)1-6O!)yBN>%KlkV8QF9gp0wVD&GfbO!gLrz=
zHaPDSM_5r-iO-40Ou8WPBi9v=-#8as7I<dFOsD3FBgA5%jg>ZLMN=c5B95w>PWeK{
zW0mt3XRTai&3p0}hI9JLGS_JiA%R6KL4pVcRg_SMjTo&uDHc++ANTPOx_*gV3b{&P
z<XAuj8f4cG{s+Iiweph_UQ##?biO#w$1o7u1sXNS`95}>#t9I72Cnp$zfuQgK1r{&
zwCEAgyA51iw=`uBxZD8-o($QPT`5RY$mfCgGy0}1(0>bbuX(*S_i_3Fq^Yaq4RCM>
zj1(w)-RIq1?Y;ebrrF;Qwls3WO8gIH00006VoOIv0RI600RN!9r;`8x010qNS#tmY
zE+YT{E+YYWr9XB6000McNliru<p&T9EefH5;fnwO02y>eSad^gZEa<4bO1wgWnpw>
zWFU8GbZ8()Nlj2!fese{00L1-L_t(o!|j;8Yg9oL#eYUE#Gnx3cQk^Eg%%=cf~Zl*
zKd@Rw#i)gXR$}KrV51^pWh+(^?Ij8lMFWYIp9zSKqU5nEgiX|}&*nTBhBvd5w{J1R
z9JsJM@7%d(?wh%DcOfDoA|m3y$D$JFS`KvU^GBezkQTZVxDU(%scZ%q0(L9}fk!1M
zbyy8J@-GGMwzB848DLj4ffhT)*8}H)6ToKRHSpWw+yS-)#8?7s5#Qd!=YZ4NG9Q5H
zP~p8m)yl>Mu*Tr51?mA=%&ZQqw)`h8P8H}075UB)$jn6FJOpNT(D1+O;JgVDxX}~j
zi@`fwK;$9A|Eq`BWs7RFzW?+rz<f5L2}6+r?+e6n;+bQGH!R-BJhJ%2^1bQcjfAdx
zYtFtL)@d}cPba>Sz+XCyCfb3=7VoX9Krog872qP!@3}rtNrX?}pyx{NSB#2cwhTSW
zO5G|skAOX`XfQf}3%X6(jqwC{3f#^q>KRr6+l{(9<=`y^&I0>^PGfu;cnRDBzPSW<
z1D_kbx`7fBbF9H${se4tIS+XptH56Ix_~Rdm}=)Za7l+_ovc@5<Km3TXM^WfGwq&B
zWa4m`1rCUFMx9Ms&}uqt=mv5%D2cD&=Gj#}KiPyh)BXU*HRm-CFBfx;HmgI2;zvm$
zQ{cM}O{XK9bFOP~I7j$%?VUkjMTuo=rQS>eyvTX}(C+mzRMbVAH_Izy|CEhB;5u+w
z{iIon9u%2yw8U4P*=T6+wkA9HR{Sa`EHY_<$f@{`LPSJFL^=2iF6v{J3^nDD00000
LNkvXXu0mjfo6Z22
literal 0
HcmV?d00001
diff --git a/src/assets/icons/viewer.svg b/src/assets/icons/viewer.svg
new file mode 100644
index 000000000..f2854a1b0
--- /dev/null
+++ b/src/assets/icons/viewer.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#000000" d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7
+ 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1
+ 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1
+ 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5
+ 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0
+ 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256
+ 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"/>
+</svg>
diff --git a/src/styles.scss b/src/styles.scss
index e1ed208b5..fe8ab4bda 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -240,3 +240,10 @@ a {
height: 1px !important;
border-top-color: rgba(0, 0, 0, 0.12) !important;
}
+
+.viewer-icon{
+ width:25px;
+ height:25px;
+ background-size:cover;
+ background-image:url("assets/icons/view.png");
+}
--
GitLab