Merge pull request #4 from SIT-DigiCre/develop

9月アップデート分

bolide_front/Comment.cs

@@ -0,0 +1,5 @@
+class Comment
+{
+    public string text { get; set; }
+    public bool isQuestion { get; set; }
+}

bolide_front/Pages/Index.razor

@@ -1,23 +1,38 @@
 @page "/"
+@using Microsoft.AspNetCore.WebUtilities
+@inject NavigationManager NavigationManager
 
-<p>@state</p>
+<p>@state - ルーム名:@RoomName</p>
 @if (isConnected)
 {
-    <p>ルーム名:@roomName</p>
-    <form class="input-group mb-2" @onsubmit="PostComment">
-        <input type="text" class="form-control" @bind-value="comment" @bind-value:event="oninput">
-        <div class="input-group-append">
-            <button type="button" class="btn btn-outline-primary" @onclick="PostComment">送信</button>
+    <form class="mb-2" @onsubmit="PostComment">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" @bind-value="isQuestion" @bind-value:event="oninput" id="q-check">
+                <label class="form-check-label" for="q-check">質問として投稿</label>
+            </div>
+        <div class="input-group form-group">
+            <input type="text" class="form-control" @bind-value="comment" @bind-value:event="oninput" />
+            <div class="input-group-append">
+                <button type="button" class="btn btn-outline-primary" @onclick="PostComment">送信</button>
+            </div>
         </div>
     </form>
-    @foreach (var log in logs)
+    @foreach (var c in comments)
     {
-        <p>@log</p>
+        @if (c.isQuestion)
+        {
+            <p style="font-weight: bold">[質問]@c.text</p>
+        }
+        else
+        {
+            <p>@c.text</p>
+        }
+
     }
 }
 else
 {
-    <input type="text" @bind-value="roomName" @bind-value:event="oninput">
+    <input type="text" @bind-value="RoomName" @bind-value:event="oninput">
     <button class="btn btn-primary" @onclick="Connect">接続</button>
 }
 
@@ -27,18 +42,29 @@ else
     bool isConnected = false;
     private Connection connection;
     string state = "未接続";
-    List<string> logs = new List<string>();
-    string roomName = "";
+    List<Comment> comments = new List<Comment>();
+    [Parameter]
+    public string RoomName { get; set; } = "";
     string comment = "";
+    public bool isQuestion { get; set; } = false;
+    protected override void OnInitialized()
+    {
+        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("roomname", out var roomName))
+        {
+            RoomName = roomName;
+            Connect();
+        }
+    }
     private void Connect()
     {
-        if (roomName == "")
+        if (RoomName == "")
         {
             state = "room名が空です";
             StateHasChanged();
             return;
         }
-        connection = new Connection(false, roomName, "https://bolide.digicre.net/","wss://bolide.digicre.net/");
+        connection = new Connection(false, RoomName, "https://bolide.digicre.net/","wss://bolide.digicre.net/");
         connection.ConnectionStartHandler += (sender, e) =>
         {
             state = "接続済";
@@ -47,7 +73,7 @@ else
         };
         connection.CommentEventHandler += (sender, e) =>
         {
-            logs.Insert(0, e.comment);
+            comments.Insert(0, new Comment(){ text=e.comment, isQuestion=e.isQuestion });
             StateHasChanged();
         };
         connection.ConnectionErrorHandler += (sender, e) =>
@@ -71,7 +97,7 @@ else
     {
         if (connection == null) return;
         if(comment=="")return;
-        connection.PostComment(comment, false);
+        connection.PostComment(comment, isQuestion);
         comment = "";
         StateHasChanged();
     }

bolide_front/Pages/Viewer.razor

@@ -0,0 +1,75 @@
+@page "/view"
+@using Microsoft.AspNetCore.WebUtilities
+@inject NavigationManager NavigationManager
+@inject IJSRuntime JSRuntime;
+
+<div class="main">
+@if (isConnected)
+{
+    <div id="comment-view">
+    @foreach (var c in comments)
+    {
+        @if (c.isQuestion)
+        {
+            <p class="comment-box question">@c.text</p>
+        }
+        else
+        {
+            <p class="comment-box">@c.text</p>
+        }
+
+    }
+    </div>
+
+}
+else
+{
+    <h1>Room名が未指定です</h1>
+}
+</div>
+
+@code {
+    bool isConnected = false;
+    private Connection connection;
+    List<Comment> comments = new List<Comment>();
+    [Parameter]
+    public string RoomName { get; set; } = "";
+    protected override void OnInitialized()
+    {
+        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("roomname", out var roomName))
+        {
+            RoomName = roomName;
+            Connect();
+        }
+    }
+    private void Connect()
+    {
+        connection = new Connection(false, RoomName, "https://bolide.digicre.net/","wss://bolide.digicre.net/");
+        connection.ConnectionStartHandler += (sender, e) =>
+        {
+            isConnected = true;
+            StateHasChanged();
+        };
+        connection.CommentEventHandler += (sender, e) =>
+        {
+            comments.Add(new Comment(){ text=e.comment, isQuestion=e.isQuestion });
+            JSRuntime.InvokeVoidAsync("scrollToEnd");
+            StateHasChanged();
+        };
+        connection.ConnectionErrorHandler += (sender, e) =>
+        {
+            switch(e.erorrKind){
+                case Connection.ErorrKind.WebsocketClosed:
+                    StateHasChanged();
+                    Connect();
+                    break;
+                case Connection.ErorrKind.WebsocketError:
+                    StateHasChanged();
+                    break;
+            }
+        };
+        connection.StartConnection();
+
+    }
+}

bolide_front/Pages/Viewer.razor.css

@@ -0,0 +1,25 @@
+html {
+  height: 100%;
+}
+
+#comment-view {
+  height: 85vh;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  overflow-wrap: break-word;
+}
+#comment-view::-webkit-scrollbar {
+  display: none;
+  white-space: pre-wrap;
+}
+
+.comment-box {
+  background-color: rgb(216, 216, 216);
+  border-radius: 5px;
+  padding: 2px;
+}
+
+.question {
+  background-color: rgb(255, 194, 80);
+}

bolide_front/bolide_front.csproj

@@ -7,6 +7,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />
     <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
     <PackageReference Include="WebSocket4Net" Version="0.15.2" />
   </ItemGroup>

bolide_front/wwwroot/index.html

@@ -24,6 +24,13 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script>
+        function scrollToEnd(){
+            $("#comment-view").animate({scrollTop: $("#comment-view")[0].scrollHeight},"fast");
+        }
+    </script>
+
 </body>
 
 </html>