diff --git a/entries/static/entries/js/components/Entries.js b/entries/static/entries/js/components/Entries.js new file mode 100644 index 0000000000000000000000000000000000000000..c3f846cc19a045c7b6ba67ee04347402c821e0be --- /dev/null +++ b/entries/static/entries/js/components/Entries.js @@ -0,0 +1,65 @@ +import UnificationEntriesList from "./UnificationEntriesList.js"; +import UnificationRightPane from "./UnificationRightPane.js"; + +export default { + data () { + return { + entryId: null, + lexicalUnitId: null, + unifiedFrameId: null, + isEdit: false, + gettext: window.gettext, + }; + }, + components: {UnificationEntriesList, UnificationRightPane}, + methods: { + lexicalUnitSelected (entryId, lexicalUnitId) { + this.entryId = entryId; + this.lexicalUnitId = lexicalUnitId; + this.isEdit = false; + }, + unifiedFrameSelected (unifiedFrameId) { + this.unifiedFrameId = unifiedFrameId; + this.isEdit = true; + } + }, + mounted () { + Split(['#right-pane', '#examples'], { + direction: 'vertical', + sizes: [75, 25], + gutterSize: 4, + }); + }, + template: ` + <div id="entries-list" class="col h-100 w-100 px-0"> + <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-auto"> + <unification-entries-list @lexical-unit-selected="lexicalUnitSelected" /> + </div> + </div> + <div id="entry-display" class="col h-100 p-0"> + <div class="w-100 h-100"> + <div id="right-pane" class="col w-100 p-0"> + <unification-right-pane + :entryId="entryId" + :lexicalUnitId="lexicalUnitId" + :initialUnifiedFrameId="unifiedFrameId" + :initialIsEdit="isEdit" /> + </div> + <div class="col w-100 p-0 tab-pane" id="examples"> + <table id="unmatched-examples" class="table table-sm table-hover"> + <thead> + <tr> + <th scope="col">{{ gettext("Przykład") }}</th> + <th scope="col">{{ gettext("Źródło") }}</th> + <th scope="col">{{ gettext("Opinia") }}</th> + </tr> + </thead> + <tbody id="unmatched-examples-list"> + </tbody> + </table> + <p class="mx-1 my-1" id="unmatched-no-examples">{{ gettext("Brak przykładów") }}</p> + </div> + </div> + </div> + ` +}; diff --git a/entries/static/entries/js/components/main.js b/entries/static/entries/js/components/Unification.js similarity index 100% rename from entries/static/entries/js/components/main.js rename to entries/static/entries/js/components/Unification.js diff --git a/entries/static/entries/js/entries_index.js b/entries/static/entries/js/entries_index.js new file mode 100644 index 0000000000000000000000000000000000000000..69f7aef94b918e0062f63093b143c1a232064887 --- /dev/null +++ b/entries/static/entries/js/entries_index.js @@ -0,0 +1,6 @@ +import Entries from './components/Entries.js'; +const { createApp } = Vue; + +window.update_entries = function () {} + +window.unificationLeftPaneApp = createApp(Entries).mount('#vue-app'); diff --git a/entries/static/entries/js/unification_index.js b/entries/static/entries/js/unification_index.js index 180572f4c99b1204a32f31afc8bc653b88a08486..78c11b9663ee3ade39ac86430b1ef30856d55d46 100644 --- a/entries/static/entries/js/unification_index.js +++ b/entries/static/entries/js/unification_index.js @@ -1,6 +1,6 @@ -import Main from './components/main.js'; +import Unification from './components/Unification.js'; const { createApp } = Vue; window.update_entries = function () {} -window.unificationLeftPaneApp = createApp(Main).mount('#vue-app'); +window.unificationLeftPaneApp = createApp(Unification).mount('#vue-app'); diff --git a/entries/templates/entries.html b/entries/templates/entries.html index 1179c4894db5de3b9b6726ab578ae0708c4f4737..6100d20eb38bdd28ec675ca9fc8cd51d0640f9d7 100644 --- a/entries/templates/entries.html +++ b/entries/templates/entries.html @@ -7,9 +7,18 @@ {% block scripts %} {{ block.super }} - <script src="{% static 'entries/js/entries_list.js' %}"></script> + <link rel="stylesheet" type="text/css" href="{% static 'entries/css/unification_frames.css' %}"> + <script src="{% static 'entries/js/unification_entries_list.js' %}"></script> + <script src="{% static 'entries/js/unification_frames_list.js' %}"></script> + <script src="{% static 'entries/js/unification_entries_for_frames_list.js' %}"></script> + <script src="{% static 'entries/js/unification.js' %}"></script> + <script src="{% static 'entries/js/selectional_preference.js' %}"></script> + <script src="{% static 'entries/js/jquery-impromptu.min.js' %}"></script> + <script src="https://unpkg.com/vue@3"></script> + <script type="module" src="{% static 'entries/js/entries_index.js' %}"></script> {% endblock %} -{% block left_pane %}{% include "entries_list.html" %}{% endblock %} - -{% block right_pane %}{% include "entry_display.html" %}{% endblock %} +{% block content %} + <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div> + <div id="vue-app" class="row h-100 m-0 p-0 bg-secondary"></div> +{% endblock %} diff --git a/entries/templates/entries_base.html b/entries/templates/entries_base.html index 25530300ee885a061498d9055c00b7272d443542..da1deaa1b541320a66565b0164d6710ceca55237 100644 --- a/entries/templates/entries_base.html +++ b/entries/templates/entries_base.html @@ -80,21 +80,6 @@ {% endblock %} {% block content %} - -<div class="row h-100 m-0 p-0 bg-secondary"> - <!-- left panel: list of entries --> - <div id="entries-list" class="col h-100 w-100 px-0"> - <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-auto"> - {% block left_pane %}{% endblock %} - </div> - </div> - - <!-- right panel: entry display (syntax, semantics, examples) --> - <div id="entry-display" class="col h-100 p-0"> - {% block right_pane %}{% endblock %} - </div> -</div> - {% endblock %} {% block modals %} diff --git a/entries/templates/entries_list.html b/entries/templates/entries_list.html deleted file mode 100644 index efd94e29fae9caafe5a16ad0e6a8696d21fdfe53..0000000000000000000000000000000000000000 --- a/entries/templates/entries_list.html +++ /dev/null @@ -1,13 +0,0 @@ -{% load i18n %} - -<table id="entries-table" class="table table-sm table-hover text-dark"> - <thead> - <tr> - <th class="p-1">{% trans "Lemat" %}</th> - <th class="p-1">Status</th> - <th class="p-1">{% trans "Cz. mowy" %}</th> - </tr> - </thead> - <tbody id="entries"> - </tbody> -</table> diff --git a/entries/templates/entry_display.html b/entries/templates/entry_display.html deleted file mode 100644 index cf620b880ec55094d84ddca819c75a16fe9bd4fa..0000000000000000000000000000000000000000 --- a/entries/templates/entry_display.html +++ /dev/null @@ -1,79 +0,0 @@ -{% load i18n %} - -<ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist"> - <li class="nav-item mr-1"> - <a class="btn btn-sm btn-outline-dark nav-link active" id="semantics-tab" data-toggle="tab" href="#semantics" role="tab" aria-controls="semantics" aria-selected="true"> - {% trans "Semantyka (ramy + schematy)" %} - </a> - </li> - <li class="nav-item mr-1"> - <a class="btn btn-sm btn-outline-dark nav-link" id="syntax-tab" data-toggle="tab" href="#syntax" role="tab" aria-controls="syntax" aria-selected="false"> - {% trans "Składnia (schematy)" %} - </a> - </li> - <li class="nav-item mr-0"> - <a class="btn btn-sm btn-outline-dark nav-link" id="examples-tab" data-toggle="tab" href="#examples" role="tab" aria-controls="examples" aria-selected="false"> - {% trans "Przykłady niedopasowane" %} - </a> - </li> -</ul> - -<div class="tab-content h-100 w-100 p-0" id="entryTabsContent"> - <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab"> - <div class="row m-0 p-0" id="semantics-top-pane"> - <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-frames-pane"> - <div id="semantics-frames"></div> - </div> - <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane"> - <div id="semantics-schemata"></div> - </div> - </div> - <div class="row m-0 p-0 overflow-auto" id="semantics-examples-pane"> - <table id="semantics-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="semantics-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="semantics-no-examples">{% trans "Brak przykładów" %}</p> - </div> - </div> - <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab"> - <div class="col w-100 px-1 pt-0 pb-0 overflow-auto" id="syntax-schemata-pane"> - <div id="syntax-schemata"></div> - </div> - <div class="col w-100 p-0 overflow-auto" id="syntax-examples-pane"> - <table id="syntax-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}</th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="syntax-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="syntax-no-examples">{% trans "Brak przykładów" %}</p> - </div> - </div> - <div class="col h-100 w-100 p-0 tab-pane" id="examples" role="tabpanel" aria-labelledby="examples-tab"> - <table id="unmatched-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}</th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="unmatched-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="unmatched-no-examples">{% trans "Brak przykładów" %}</p> - </div> -</div> diff --git a/entries/templates/unification.html b/entries/templates/unification.html index 2a73f0a9bf2d7f29122bc19fe5b4d33cbf6d3ff6..349d0b23fca215ee5f08472cf62c5c56a02a7b96 100644 --- a/entries/templates/unification.html +++ b/entries/templates/unification.html @@ -18,11 +18,6 @@ <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script> {% endblock %} -{% block left_pane %}<div id="unification-left-pane"></div>{% endblock %} - -{% block right_pane %}{% include "unification_lexical_unit_display.html" %}{% endblock %} - - {% block content %} <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div> <div id="vue-app" class="row h-100 m-0 p-0 bg-secondary"></div> diff --git a/entries/templates/unification_lexical_unit_display.html b/entries/templates/unification_lexical_unit_display.html deleted file mode 100644 index 96beac9dcdc2197deeb0052f38537723294d5ae1..0000000000000000000000000000000000000000 --- a/entries/templates/unification_lexical_unit_display.html +++ /dev/null @@ -1,56 +0,0 @@ -{% load i18n static %} - - -<div class="tab-content h-100 w-100 p-0" id="entryTabsContent"> - <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab"> - <div id="semantics-top-pane" class="overflow-auto"></div> - - <div class="row m-0 p-0 overflow-auto" id="semantics-examples-pane"> - <table id="semantics-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="semantics-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="semantics-no-examples">{% trans "Brak przykładów" %}</p> - </div> - </div> - <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab"> - <div class="col w-100 px-1 pt-0 pb-0 overflow-auto" id="syntax-schemata-pane"> - <div id="syntax-schemata"></div> - </div> - <div class="col w-100 p-0 overflow-auto" id="syntax-examples-pane"> - <table id="syntax-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}</th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="syntax-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="syntax-no-examples">{% trans "Brak przykładów" %}</p> - </div> - </div> - <div class="col h-100 w-100 p-0 tab-pane" id="examples" role="tabpanel" aria-labelledby="examples-tab"> - <table id="unmatched-examples" class="table table-sm table-hover"> - <thead> - <tr> - <th scope="col">{% trans "Przykład" %}</th> - <th scope="col">{% trans "Źródło" %}</th> - <th scope="col">{% trans "Opinia" %}</th> - </tr> - </thead> - <tbody id="unmatched-examples-list"> - </tbody> - </table> - <p class="mx-1 my-1"id="unmatched-no-examples">{% trans "Brak przykładów" %}</p> - </div> -</div>