jube-fork/Jube.App/Pages/Case/Case.cshtml

@* Copyright (C) 2022-present Jube Holdings Limited
 *
 * This file is part of Jube™ software.
 *
 * Jube™ is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License 
 * as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 * Jube™ is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty  
 * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

 * You should have received a copy of the GNU Affero General Public License along with Jube™. If not, 
 * see <https://www.gnu.org/licenses/>.
 *@
@page
@model Jube.App.Pages.Case.Case
@{
    Layout = "Shared/_Layout";
}
@section Scripts
{
    <script src="/js/Visualisation/Visualisation.js"></script>
    <script src="/js/Case/Case.js"></script>
    <script src="/js/barrating/jquery.barrating.min.js"></script>
    <link rel="stylesheet" href="/js/barrating/themes/css-stars.css">
    <script src="/js/jszip/jszip.min.js"></script>
    
    <!--suppress CssUnusedSymbol -->
    <style>
        .k-upload-files {
            height: 660px;
            overflow-y: scroll;
        }
        .auto-style1 { width: 68px; }
    
        .cellPadding {
          padding: 2px 6px 2px 2px;
        }
    
        .CaseFormContentPaneStyle { padding-left: 5px; }
    
        .k-grid td { white-space: nowrap; }
        
        #MainTab {
            border-width: 0;
            margin: 0;
            padding: 0;
        }
    
        #MainTab > .k-content { overflow: visible; }
    
        #MainTab .k-content { padding: 0; }
    
        #tabstrip {
            border-width: 0;
            margin: 0;
            padding: 0;
        }
    
        #TabStrip > .k-content { overflow: visible; }
        
        .PleaseWait {
            color: red;
            display: none;
        }
    
        .DrillingWait {
            color: red;
            display: none;
        }
    
        .MacroWait {
            color: red;
            display: none;
        }
    
        .CaseFormsSplitterStyle {
            height: 800px;
            width: 99%;
        }
    
        .CaseDisplaysSplitterStyle {
            height: 300px;
            width: 99%;
        }
    
        .SmallCell { width: 8%; }
    </style>
}

<script id="fileTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <span class="k-file-extension-wrapper">
    <span class="k-file-extension">#= files[0].extension #</span> 
    </span>
    <span class="k-file-name-size-wrapper">
    <span class="k-file-name"><a target="_blank" href='../api/CaseFile?id=#=files[0].id#'>#=name#</a></span>
    <span class="k-file-size">#= size #</span>
    </span>
    <strong class="k-upload-status">
        <button type='button' class='k-upload-action'></button>
    </strong>
</script>
<div class="topPaddedGeneral bottomPaddedGeneral">
    <button type="button" id="Peek" class="ButtonDefault">Back</button>
    <button type="button" id="Skim" class="ButtonDefault">Next</button>
    <span id="Updating" hidden="hidden" style="color: #FF0000">Updating</span>
</div>
<span id="Icons"></span> <span class="MacroWait" id="PleaseWaitMacro">Please Wait</span>
<div id="StatusTable">
    <table>
        <tr>
            <td class="cellPadding">Case ID</td>
            <td class="cellPadding">Case Key</td>
            <td class="cellPadding">Case Key Value</td>
            <td class="cellPadding">Closed Status</td>
            <td class="cellPadding">Old Closed Status</td>
            <td class="cellPadding">Closed User</td>
            <td class="cellPadding">Locked</td>
            <td class="cellPadding">Locked User</td>
            <td class="cellPadding">Status</td>
            <td class="cellPadding">Diary</td>
            <td class="cellPadding">Diary User</td>
            <td class="cellPadding">Diary Date</td>
            <td class="cellPadding">Rate</td>
        </tr>
        <tr>
            <td class="cellPadding">
                <div id="CaseId"></div>
            </td>
            <td class="cellPadding">
                <div id="CaseKey"></div>
            </td>
            <td class="cellPadding">
                <div id="CaseKeyValue"></div>
            </td>
            <td class="cellPadding">
                <div>
                    <select id="ClosedStatus" name="ClosedStatus">
                        <option value="0">Open</option>
                        <option value="1">Suspend Open</option>
                        <option value="2">Suspend Close</option>
                        <option value="3">Closed</option>
                        <option value="4">Suspend Bypass</option>
                    </select>
                </div>
            </td>
            <td class="cellPadding" id="CaseStatusColour">
                <div id="LastClosedStatus"></div>
            </td>
            <td class="cellPadding">
                <div id="ClosedUser"></div>
            </td>
            <td class="cellPadding">
                <input type="checkbox" id="Locked" checked="checked"/>
            </td>
            <td class="cellPadding">
                <input id="LockedUser"/>
            </td>
            <td class="cellPadding">
                <select id="Status" name="Status">
                </select>
            </td>
            <td class="cellPadding">
                <input type="checkbox" id="Diary" checked="checked"/>
            </td>
            <td class="cellPadding">
                <div id="DiaryUser"></div>
            </td>
            <td class="cellPadding">
                <input id="datetimepicker"/>
            </td>
            <td class="cellPadding">
                <select id="Rate">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </td>
        </tr>
    </table>
</div>
<div id="ErrorMessage" class="errorMessage"></div>
<div id="MainTab">
    <ul>
        <li class="k-state-active">Case Detail Views</li>
        <li>Case Visualisation</li>
        <li>Case Forms</li>
    </ul>
    <div id="CaseDetail">
        <div>
            <div id="CaseDisplays">
                <div id="CaseDisplaysSplitter" class="CaseDisplaysSplitterStyle">
                    <div>
                        <ul id="CaseDisplaysMenu">
                        </ul>
                    </div>
                    <div id="CaseDisplaysContentPane" class="CaseFormContentPaneStyle">
                        <div id="CaseDisplayHTML"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tabstrip">
            <ul>
                <li>Activations</li>
                <li class="k-state-active">Case Key Journal</li>
                <li>Case Journal</li>
                <li>Case Notes</li>
                <li>Case Events Journal</li>
                <li>Case Forms Journal</li>
                <li>Case Uploads</li>
            </ul>
            <div>
                <div id="Activations"></div>
            </div>
            <div>
                <table class="horizontalTable">
                    <tr>
                        <td class="cellPadding">Top: </td>
                        <td class="cellPadding">
                            <input id="Top" type="number" title="Top" value="100" min="0" max="1000"/>
                        </td>
                        <td class="cellPadding">
                            Response Elevation Exceeds:
                        </td>
                        <td class="cellPadding">
                            <input id="ResponseElevation" type="number" title="Top" value="0" min="0" max="1000"/>
                        </td>
                        <td class="cellPadding">Activations Only:</td>
                        <td class="cellPadding">
                            <input type="checkbox" id="ActivationsOnly">
                            <label class="k-checkbox-label" for="ActivationsOnly"></label>
                        </td>
                        <td class="cellPadding">
                            <button id="RefreshCaseJournal">Refresh</button>
                        </td>
                        <td class="cellPadding">
                            <button id="Drill">Drill</button>
                        </td>
                        <td class="cellPadding">
                            <Div class="DrillingWait" id="Drilling">Loading</Div>
                        </td>
                    </tr>
                </table>
                <div id="dummyScrollWrapper" style="margin-left: 2px; margin-right: 17px; overflow-x: scroll;">
                    <div id="dummyScroll" style="height: 0.1px;">
                    </div>
                </div>
                <div id="journal">
                </div>
            </div>
            <div>
                <div id="cases"></div>
            </div>
            <div>
                <textarea id="editor" rows="10" cols="30" style="width:100%; height:200px" aria-label="editor"></textarea>
                <table>
                    <tr>
                        <td>
                            Action:
                        </td>
                        <td>
                            <select id="Action"></select>
                        </td>
                        <td>
                            Priority:
                        </td>
                        <td>
                            <select id="Priority"></select>
                        </td>
                        <td>
                            <button id="AddNote">Add Note</button>
                        </td>
                    </tr>
                </table>
                <div id="notes"></div>
            </div>
            <div>
                <div id="audit"></div>
            </div>
            <div>
                <div id="forms"></div>
            </div>
            <div>
                <div id="PlaceholderFiles"></div>
            </div>
        </div>
    </div>
    <div id="CaseVisualisation">
        <div class="fCStyle">
            <div id="Datasources"></div>
            <div id="Grids"></div>
        </div>
    </div>
    <div id="CaseForms">
        <div id="Splitter" class="CaseFormsSplitterStyle">
            <div>
                <ul id="CaseFormsMenu">
                </ul>
            </div>
            <div id="ContentPane" class="CaseFormContentPaneStyle">
                <div id="CaseFormHTML"></div>
                <div id="CaseFormSubmitDiv" class="topPaddedGeneral">
                    <button type="button" id="CaseFormSubmitButton">Submit</button> 
                    <span id="PleaseWaitSpan" class="PleaseWait">Please Wait</span>
                </div>
                <div id="CaseFormResponse"></div>
            </div>
        </div>
    </div>
</div>