Add hosting high scores to LCARS display

apiserver/apiserver/api/views.py

@@ -1607,6 +1607,24 @@ class HostingViewSet(Base):
 
         return Response(200)
 
+    @action(detail=False, methods=['get'])
+    def high_scores(self, request):
+        members = models.Member.objects.all()
+        members = members.annotate(
+            hosting_hours=Sum('user__hosting__hours'),
+        ).exclude(hosting_hours__isnull=True).order_by('-hosting_hours')
+
+        hours = []
+
+        for member in members:
+            hours.append(dict(
+                name=member.preferred_name + ' ' + member.last_name[0],
+                hours=member.hosting_hours,
+                member_id=member.id,
+            ))
+
+        return Response(hours)
+
 
 class RegistrationView(RegisterView):
     serializer_class = serializers.MyRegisterSerializer

webclient/src/Display.js

@@ -38,6 +38,10 @@ export function LCARS1Display(props) {
 					<DisplayScores />
 				</div>
 
+				<div className='display-scores'>
+					<DisplayHosting />
+				</div>
+
 				<div className='display-usage'>
 					<DisplayUsage token={token} name={'trotec'} />
 				</div>
@@ -122,3 +126,39 @@ export function DisplayScores(props) {
 		</>
 	);
 };
+
+export function DisplayHosting(props) {
+	const { token, name } = props;
+	const [scores, setScores] = useState(false);
+
+	const getScores = () => {
+		requester('/hosting/high_scores/', 'GET')
+		.then(res => {
+			setScores(res);
+		})
+		.catch(err => {
+			console.log(err);
+			setScores(false);
+		});
+	};
+
+	useEffect(() => {
+		getScores();
+		const interval = setInterval(getScores, 60000);
+		return () => clearInterval(interval);
+	}, []);
+
+	return (
+		<>
+			<Header size='large'>Most Host</Header>
+
+			{scores && scores.slice(0, 5).map((x, i) =>
+				<div key={i}>
+					<Header size='medium'>#{i+1} — {x.name}. {i === 0 ? <img className='toast' src='/toast.png' /> : ''}</Header>
+					<p>{x.hours.toFixed(2)} hours</p>
+				</div>
+			)}
+
+		</>
+	);
+};

webclient/src/light.css

@@ -203,6 +203,12 @@ body {
 	text-align: right;
 }
 
+.display .display-scores .toast {
+	width: 40px;
+	height: 40px;
+	margin-bottom: 15px;
+}
+
 .usage {
 	height: 100vh;
 	background-color: black;