htdocs/WebApplications/GuiEditor/Views/View.html

<style id="GuiEditor_WebAppStyle" type="text/css"></style>

<div id="GuiEditor_SetupName">
    <label id="GuiEditor_AppNameLabel"></label>
    <label>-</label>
    <label id="GuiEditor_SetupNameLabel"></label>
</div>

<div id="GuiEditor_Tabs">
    <ul>
        <li><a href="#GuiEditor_RequestEditorView">Setup Editor</a></li>
        <li><a href="#GuiEditor_InfoAreaView">View Setup as Text</a></li>
        <li><a href="#GuiEditor_ViewmodelContentEditor">Viewmodel Editor</a></li>
        <li><a href="#GuiEditor_ViewContentEditor">View Editor</a></li>
        <li><a href="#GuiEditor_UIConfigEditor">UIConfig Editor</a></li>
    </ul>
    
    <div id="GuiEditor_RequestEditorView" class="tabs">
        <div id="GuiEditor_Buttonbar" class="GuiEditor_Buttonbar">
            <button id="GuiEditor_Button_SetApplication" class="GuiEditor_Button_Left">Change Application</button>
            <button id="GuiEditor_Button_New" class="GuiEditor_Button_Left">New</button>
            <button id="GuiEditor_Button_Load" class="GuiEditor_Button_Left">Load...</button>
            <button id="GuiEditor_Button_Save" class="GuiEditor_Button_Left">Save</button>
            <button id="GuiEditor_Button_SaveAs" class="GuiEditor_Button_Left">Save as...</button>
            <button id="GuiEditor_Button_History" class="GuiEditor_Button_Left">History</button>
            
            <button id="GuiEditor_Button_ExportChartData" class="GuiEditor_Button_Right">Export chart request</button>
            <button id="GuiEditor_Button_ClearSearch" class="GuiEditor_Button_Right">Clear search</button>
            <button id="GuiEditor_Button_Search" class="GuiEditor_Button_Right">Search...</button>
            <button id="GuiEditor_Button_ShowAll" class="GuiEditor_Button_Right">Show all</button>
            <button id="GuiEditor_Button_AddRequest" class="GuiEditor_Button_Right">Add empty request</button>
            <button id="GuiEditor_Button_AddImport" class="GuiEditor_Button_Right">Import setup...</button>
            <button id="GuiEditor_Button_AddView" class="GuiEditor_Button_Right">Add view...</button>
            <button id="GuiEditor_Button_AddViewmodel" class="GuiEditor_Button_Right">Add viewmodel...</button>
        </div>
        <div class="line"></div>
        <div id="GuiEditor_RequestEditorSplit" class="Aligner">
            <div class="GuiEditor_Helpside Aligner_Horizontal_Content">
                <label for="GuiEditor_SortHelpTree" id="GuiEditor_SortButton">Sort</label>
                <input id="GuiEditor_SortHelpTree" type="checkbox"></input>
                <input id="GuiEditor_HelpSearch"></input>
                <div id="GuiEditor_HelpTree"></div>
            </div>
            <div id="GuiEditor_Playground" class="Aligner_Horizontal_Content">
                <div id="GuiEditor_RequestTree"></div>
                <div id="GuiEditor_Legend">
                    <div id="GuiEditor_LegendToggle" title="Toggle Legend"></div>
                    <table id="GuiEditor_LegendTable" class="hidden">
                        <col width="50px"></col>
                        <col width="100px"></col>
                        <tbody>
                            <tr title="The requests are used to query the DataSource for new data. The requests can have some modifications, like filters and selection.">
                                <td colspan="2" class="GuiEditor_LegendCategory">Requests</td>
                            </tr>
                            <tr title="If the request has a selection, and it returns a lits, only the selected respponse's children will be queried.">
                                <td class="GuiEditor_NodeWithData GuiEditor_NodeWithSelection"></td>
                                <td>Selection</td>
                            </tr>
                            <tr title="Filters can be used to filter out some responses which do not match the filter. This can be used to return only specific elements in a list or to only query data when some condition is true.">
                                <td class="GuiEditor_NodeWithData GuiEditor_NodeWithFilter"></td>
                                <td>Filter</td>
                            </tr>
                            <tr title="Range filters are used to query only a part of a list. To control the range filters, specific viewmodels must be used.">
                                <td class="GuiEditor_NodeWithData GuiEditor_NodeWithRangeFilter"></td>
                                <td>Range Filter</td>
                            </tr>
                            <tr title="The writable info can be used to get writability of an element. This can be used for example to disable a label.">
                                <td class="GuiEditor_NodeWithData GuiEditor_NodeWithWritableInfo"></td>
                                <td>Writable Info</td>
                            </tr>
                            <tr title="The editor boxes represent the views and viewmodels which are used by the application to display the data.">
                                <td colspan="2" class="GuiEditor_LegendCategory">Editors</td>
                            </tr>
                            <tr title="Viewmodels convert the data received to something that a view can display. Data connections are used to tell a viewmodel which parts of the data to process. Selection connections are used to control the selection of the requests.">
                                <td class="GuiEditor_ViewmodelEditorLegend"></td>
                                <td>Viewmodel</td>
                            </tr>
                            <tr title="Views represent actual html parts which are displayed on the GUI. Viewmodels supply the views with data and can provide new features for them. Views must be connected to the setup html either directly or through other views, like aligners or tabs.">
                                <td class="GuiEditor_ViewEditorLegend"></td>
                                <td>View</td>
                            </tr>
                            <tr title="Setups can be imported. This greatly reduces duplication and increases mantainability. Similarly to views, imports must be connected to the setup html or other views. The import can be connected to a request. The request of the imported setup will be inserted below the connected request. This way, it is possible to create generic setups, which do not work by themselvs, but can be imported.">
                                <td class="GuiEditor_ImportEditorLegend"></td>
                                <td>Import</td>
                            </tr>
                            <tr title="The html editor represent the setup html. Views can connect to elements that have ids.">
                                <td class="GuiEditor_HtmlEditorLegend"></td>
                                <td>Html</td>
                            </tr>
                            <tr title="The filter editor represents the filter of a request. The filter can be edited similarly to the request: dragging nodes from the help tree or request tree or manually.">
                                <td class="GuiEditor_FilterEditorLegend"></td>
                                <td>Filter</td>
                            </tr>
                            <tr title="The connections are used to connect the different elements to each other.">
                                <td colspan="2" class="GuiEditor_LegendCategory">Connections</td>
                            </tr>
                            <tr title="A data connection tells a viewmodel which part of the response should it get its data from.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_request.png"></td>
                                <td>Data</td>
                            </tr>
                            <tr title="Selection connections are used by viewmodels to control the selections of a request.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_selection.png"></td>
                                <td>Selection</td>
                            </tr>
                            <tr title="Viewmodels connected to views supply them with data and additional capabilities, like sorting and filtering for tables.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_VM_V.png"></td>
                                <td>Viewmodel-View</td>
                            </tr>
                            <tr title="Views must be connected to other views with view-view connections and eventually to the setup html.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_V_V.png"></td>
                                <td>View-View</td>
                            </tr>
                            <tr title="All views must be connected to the setup html either directly or through other views.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_V_html.png"></td>
                                <td>View-Html</td>
                            </tr>
                            <tr title="The request of the imported setup will be inserted below the connected request.">
                                <td><img src="WebApplications/GuiEditor/Res/legend_connection_import_request.png"></td>
                                <td>Import request</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="GuiEditor_InfoAreaView">
        <textarea id="GuiEditor_InfoArea" spellcheck="false"></textarea>
    </div>
    <div id="GuiEditor_ViewmodelContentEditor">
        <div class="GuiEditor_Buttonbar">
            <button id="GuiEditor_ViewmodelContentEditor_Button_New" class="GuiEditor_Button_Left">New</button>
            <button id="GuiEditor_ViewmodelContentEditor_Button_LoadTemplate" class="GuiEditor_Button_Left">Load template</button>
            <button id="GuiEditor_ViewmodelContentEditor_Button_Load" class="GuiEditor_Button_Left">Load</button>
            <button id="GuiEditor_ViewmodelContentEditor_Button_Save" class="GuiEditor_Button_Left">Save</button>
            <button id="GuiEditor_ViewmodelContentEditor_Button_SaveAs" class="GuiEditor_Button_Left">Save as...</button>
        </div>
        <div class="line"></div>
        <div id="GuiEditor_ViewmodelContentEditor_Tabs">
            <ul>
            </ul>
        </div>
    </div>
    <div id="GuiEditor_ViewContentEditor">
        <div class="GuiEditor_Buttonbar">
            <button id="GuiEditor_ViewContentEditor_Button_New" class="GuiEditor_Button_Left">New</button>
            <button id="GuiEditor_ViewContentEditor_Button_LoadTemplate" class="GuiEditor_Button_Left">Load template</button>
            <button id="GuiEditor_ViewContentEditor_Button_Load" class="GuiEditor_Button_Left">Load</button>
            <button id="GuiEditor_ViewContentEditor_Button_Save" class="GuiEditor_Button_Left">Save</button>
            <button id="GuiEditor_ViewContentEditor_Button_SaveAs" class="GuiEditor_Button_Left">Save as...</button>
        </div>
        <div class="line"></div>
        <div id="GuiEditor_ViewContentEditor_Tabs">
            <ul>
            </ul>
        </div>
    </div>
    <div id="GuiEditor_UIConfigEditor">
        <div class="GuiEditor_Buttonbar">
            <button id="GuiEditor_UIConfigEditor_Button_Load" class="GuiEditor_Button_Left">Load</button>
            <button id="GuiEditor_UIConfigEditor_Button_Save" class="GuiEditor_Button_Left">Save</button>
        </div>
        <div id="GuiEditor_UIConfigEditor_EditorContainer"></div>
    </div>
</div>