From aae5f32fb5240716478e2ee5ea5497865dc6420c Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Tue, 12 Jul 2022 20:42:51 +0200
Subject: [PATCH] Second attempt for Vue implementation of entries.js frame
visualization.
---
.../static/entries/js/components/Entries.js | 40 +++----
.../js/components/LexicalUnitDisplay.js | 108 ++++++++++--------
.../entries/js/components/LexicalUnitEdit.js | 4 +-
.../frame-components/ExamplesComponent.js | 47 ++++++++
.../SemanticsSchemataComponent.js | 4 -
.../frame-components/SlowalFrameComponent.js | 71 ++++++++++++
entries/static/entries/js/entries.js | 12 +-
7 files changed, 210 insertions(+), 76 deletions(-)
create mode 100644 entries/static/entries/js/components/frame-components/ExamplesComponent.js
rename entries/static/entries/js/components/{ => frame-components}/SemanticsSchemataComponent.js (98%)
create mode 100644 entries/static/entries/js/components/frame-components/SlowalFrameComponent.js
diff --git a/entries/static/entries/js/components/Entries.js b/entries/static/entries/js/components/Entries.js
index 8635a0c..bc04b05 100644
--- a/entries/static/entries/js/components/Entries.js
+++ b/entries/static/entries/js/components/Entries.js
@@ -38,12 +38,12 @@ export default {
}
},
});
- Split(['#right-pane', '#examples'], {
- direction: 'vertical',
- sizes: [75, 25],
- gutterSize: 4,
- minSize: 10,
- });
+ // Split(['#right-pane', '#examples'], {
+ // direction: 'vertical',
+ // sizes: [75, 25],
+ // gutterSize: 4,
+ // minSize: 10,
+ // });
},
template: `
<div id="entries-list" class="col h-100 w-100 px-0 overflow-hidden">
@@ -66,20 +66,20 @@ export default {
:initialIsEdit="isEdit"
@refresh-entries-list="refreshEntriesList" />
</div>
- <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">
- <table id="semantics-examples" class="table table-sm table-hover">
- <thead>
- <tr>
- <th scope="col">{{ gettext("Przykład") }}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>
- <th scope="col">{{ gettext("Źródło") }}</th>
- <th scope="col">{{ gettext("Opinia") }}</th>
- </tr>
- </thead>
- <tbody id="semantics-examples-list">
- </tbody>
- </table>
- <p class="mx-1 my-1" id="semantics-no-examples">{{ gettext("Brak przykładów") }}</p>
- </div>
+<!-- <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">-->
+<!-- <table id="semantics-examples" class="table table-sm table-hover">-->
+<!-- <thead>-->
+<!-- <tr>-->
+<!-- <th scope="col">{{ gettext("Przykład") }}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>-->
+<!-- <th scope="col">{{ gettext("Źródło") }}</th>-->
+<!-- <th scope="col">{{ gettext("Opinia") }}</th>-->
+<!-- </tr>-->
+<!-- </thead>-->
+<!-- <tbody id="semantics-examples-list">-->
+<!-- </tbody>-->
+<!-- </table>-->
+<!-- <p class="mx-1 my-1" id="semantics-no-examples">{{ gettext("Brak przykładów") }}</p>-->
+<!-- </div>-->
</div>
</div>
`
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js
index 02c1805..56aad1d 100644
--- a/entries/static/entries/js/components/LexicalUnitDisplay.js
+++ b/entries/static/entries/js/components/LexicalUnitDisplay.js
@@ -1,9 +1,11 @@
import Spinner from './Spinner.js';
-import SemanticsSchemataComponent from "./SemanticsSchemataComponent.js";
+import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.js";
+import ExamplesComponent from "./frame-components/ExamplesComponent.js";
+import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.js";
export default {
- components: { Spinner, SemanticsSchemataComponent },
+ components: { Spinner, SemanticsSchemataComponent, ExamplesComponent, SlowalFrameComponent },
props: {
entryId: Number,
lexicalUnitId: Number
@@ -14,6 +16,7 @@ export default {
alternations: null,
realisation_phrases: null,
realisation_descriptions: null,
+ examples: null,
}
},
emits: ['refresh', 'refreshEntriesList'],
@@ -83,15 +86,18 @@ export default {
this.alternations = entry.alternations;
this.realisation_phrases = entry.realisation_phrases;
this.realisation_descriptions = entry.realisation_descriptions;
+ this.examples = entry.examples;
setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, 'meanings.LexicalUnit', this.setup_notes);
});
}
},
-
- // created () {
- // this.setup();
- // },
mounted () {
+ Split(['#main-frames-pane', '#vue-examples'], {
+ direction: 'vertical',
+ sizes: [75, 25],
+ gutterSize: 4,
+ minSize: 10
+ });
Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
sizes: [40, 60],
gutterSize: 4,
@@ -105,47 +111,52 @@ export default {
this.setup();
},
template: `
- <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
- <spinner />
- <div id="semantics-frames"></div>
- <div class="text-center mb-3">
- <div>
- <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="isLeksykograf() ? markAsInvalid() : markAsBad()">{{ !isLeksykograf() ? gettext('Zła') : gettext('Błędna') }}</a>
- <a class="btn btn-sm btn-outline-dark mr-2" v-if="isReadyToGet() && unifiedFrame === null" @click="take">{{ gettext('Pobierz') }}</a>
- <a
- class="btn btn-sm btn-outline-dark mr-2"
- v-if="isReadyToProcess()"
- @click="goToEdit(this.unifiedFrame.pk, this.entryId, this.lexicalUnitId)"
- >
- {{ isLeksykograf() ? gettext('Obrabiaj') : gettext('Sprawdź') }}
- </a>
- <a
- class="btn btn-sm btn-outline-dark mr-2"
- v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
- @click="goToEdit(this.unifiedFrame.pk)"
- >
- {{ gettext('Obejrzyj') }}
- </a>
- <a
- class="btn btn-sm btn-outline-dark mr-2"
- v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
- @click="frame?.status === 'C' ? frame_confirm_as_not_matching_unified_frame() : confirmInvalid()"
- >
- {{ gettext('Potwierdź') }}
- </a>
- <a
- class="btn btn-sm btn-outline-dark mr-2"
- v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
- @click="frame?.status === 'C' ? frame_reject_as_not_matching_unified_frame() : rejectInvalid()"
- >
- {{ gettext('Odrzuć') }}
- </a>
+ <div class="col w-100 p-0 h-100 overflow-auto" id="main-frames-pane" >
+ <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
+ <spinner />
+<!-- <div id="semantics-frames"></div>-->
+ <div id="vue-semantics-frames" v-if="frame">
+ <slowal-frame-component :frame="frame" :key="frame"/>
</div>
-<!-- <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>-->
+
+ <div class="text-center mb-3">
+ <div>
+ <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="isLeksykograf() ? markAsInvalid() : markAsBad()">{{ !isLeksykograf() ? gettext('Zła') : gettext('Błędna') }}</a>
+ <a class="btn btn-sm btn-outline-dark mr-2" v-if="isReadyToGet() && unifiedFrame === null" @click="take">{{ gettext('Pobierz') }}</a>
+ <a
+ class="btn btn-sm btn-outline-dark mr-2"
+ v-if="isReadyToProcess()"
+ @click="goToEdit(this.unifiedFrame.pk, this.entryId, this.lexicalUnitId)"
+ >
+ {{ isLeksykograf() ? gettext('Obrabiaj') : gettext('Sprawdź') }}
+ </a>
+ <a
+ class="btn btn-sm btn-outline-dark mr-2"
+ v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
+ @click="goToEdit(this.unifiedFrame.pk)"
+ >
+ {{ gettext('Obejrzyj') }}
+ </a>
+ <a
+ class="btn btn-sm btn-outline-dark mr-2"
+ v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
+ @click="frame?.status === 'C' ? frame_confirm_as_not_matching_unified_frame() : confirmInvalid()"
+ >
+ {{ gettext('Potwierdź') }}
+ </a>
+ <a
+ class="btn btn-sm btn-outline-dark mr-2"
+ v-if="(frame?.status === 'B' || frame?.status === 'C') && hasPermission('semantics.manage_invalid_lexical_units')"
+ @click="frame?.status === 'C' ? frame_reject_as_not_matching_unified_frame() : rejectInvalid()"
+ >
+ {{ gettext('Odrzuć') }}
+ </a>
+ </div>
+ <!-- <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>-->
+ </div>
+ <div id="lexical-unit-notes"></div>
</div>
- <div id="lexical-unit-notes"></div>
- </div>
- <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
+ <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
<!-- <semantics-schemata-component -->
<!-- :subentries="subentries"-->
<!-- :key="subentries"-->
@@ -156,5 +167,12 @@ export default {
<!-- />-->
<div id="semantics-schemata"></div>
</div>
+ </div>
+ <div class="col w-100 p-0 tab-pane overflow-auto" id="vue-examples">
+ <examples-component
+ :examples="examples"
+ :key="examples"
+ />
+ </div>
`
}
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index 2c8c64c..26033a5 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -176,7 +176,9 @@ Object.assign(LexicalUnitEdit, {
setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.unified_frame.id, 'unifier.UnifiedFrame', this.setup_notes_unified_frame);
},
setup_notes_slowal_frame () {
- setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id, 'semantics.Frame', this.setup_notes_slowal_frame);
+ if(this.active_slowal_frame) {
+ setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id, 'semantics.Frame', this.setup_notes_slowal_frame);
+ }
},
setup_notes_slowal_frame_with_title_and_body (title, body) {
this.right_pane_tab = 'notes';
diff --git a/entries/static/entries/js/components/frame-components/ExamplesComponent.js b/entries/static/entries/js/components/frame-components/ExamplesComponent.js
new file mode 100644
index 0000000..1a8f93f
--- /dev/null
+++ b/entries/static/entries/js/components/frame-components/ExamplesComponent.js
@@ -0,0 +1,47 @@
+
+export default {
+ props: {
+ examples: Object,
+ },
+ data() {
+ return {
+ img_prefix: String
+ }
+ },
+ methods: {
+ },
+ mounted () {
+ this.img_prefix = window.STATIC_URL;
+ },
+ template: `
+ <table id="semantics-examples" class="table table-sm table-hover" style="">
+ <thead>
+ <tr>
+ <th scope="col">Przykład<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i>
+ </th>
+ <th scope="col">Źródło</th>
+ <th scope="col">Opinia</th>
+ </tr>
+ </thead>
+ <tbody id="semantics-examples-list">
+
+ <tr v-for="example in examples" class="example" data-example_id="345858">
+ <td class="py-1">{{example.sentence}}
+ <span v-if="example.note" data-toggle="tooltip"
+ data-placement="bottom"
+ data-html="true" title=""
+ :data-original-title="'Komentarz: <i>'+ example.note +'</i>'"><img
+ :src="img_prefix + '/common/img/info.svg'" alt="info" width="14"
+ height="14"></span>
+ </td>
+ <td class="py-1">{{example.source}}</td>
+ <td class="py-1">{{example.opinion}}</td>
+ </tr>
+
+ </tbody>
+ </table>
+ <p class="mx-1 my-1" id="semantics-no-examples" style="display: none;">Brak przykładów</p>
+ `
+}
+
+
diff --git a/entries/static/entries/js/components/SemanticsSchemataComponent.js b/entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js
similarity index 98%
rename from entries/static/entries/js/components/SemanticsSchemataComponent.js
rename to entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js
index 6591d18..d8f74f3 100644
--- a/entries/static/entries/js/components/SemanticsSchemataComponent.js
+++ b/entries/static/entries/js/components/frame-components/SemanticsSchemataComponent.js
@@ -91,10 +91,6 @@ export default {
},
mounted () {
this.img_prefix = window.STATIC_URL;
- console.log(this.subentries);
- },
- created () {
- console.log(this.subentries);
},
template: `
<div>
diff --git a/entries/static/entries/js/components/frame-components/SlowalFrameComponent.js b/entries/static/entries/js/components/frame-components/SlowalFrameComponent.js
new file mode 100644
index 0000000..be52e31
--- /dev/null
+++ b/entries/static/entries/js/components/frame-components/SlowalFrameComponent.js
@@ -0,0 +1,71 @@
+
+export default {
+ props: {
+ frame: Object,
+ },
+ data() {
+ return {
+ img_prefix: String
+ }
+ },
+ methods: {
+ getTitleHTML() {
+ const ret = window.lexical_units2dom(this.frame.lexical_units);
+ return ret;
+ },
+ getOpinionHTML() {
+ return window.make_opinion_row(this.frame, this.frame.arguments.length, 3).outerHTML;
+ },
+ getArguments() {
+ return this.frame.arguments;
+ }
+ },
+ mounted () {
+ this.img_prefix = window.STATIC_URL;
+ },
+ template: `
+ <div class="frame mb-3 active" data-frame_id="52">
+ <div class="frame mt-3" id="lexical-unit" v-html="getTitleHTML()"></div>
+ <table class="table m-0 table-borderless border border-secondary text-dark">
+ <tbody>
+ <tr class="opinion-row" v-html="getOpinionHTML()">
+ </tr>
+ <tr>
+ <th scope="row" class="py-2 px-1 text-secondary">Rola</th>
+ <template v-for="argument in frame.arguments">
+ <td class="argument py-2 px-1 border-top border-left border-secondary" :class="argument.role" data-argument_id="52-129"
+ data-role="initiator">{{argument.str}}
+ </td>
+ </template>
+ </tr>
+ <tr>
+ <th scope="row" class="py-0 px-1 text-secondary">Preferencje selekcyjne</th>
+ <template v-for="argument in getArguments()">
+
+ <td class="preferences py-0 px-0 border-top border-left border-secondary" data-argument_id="104513-142252" data-role="condition">
+
+ <template v-if="argument.preferences.length > 0" v-for='preference in argument.preferences'>
+ <div
+ v-if="preference.url != null"
+ class="preference py-2 px-1 preference-bold"
+ >
+ <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
+ </div>
+ <div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div>
+ <span v-if="preference.info" data-toggle="tooltip"
+ data-placement="bottom"
+ data-html="true"
+ :title="'definicja: <i>'+ preference.info +'</i>'"><img
+ :src="img_prefix + '/common/img/info.svg'" alt="info" width="14"
+ height="14"></span>
+ </template>
+ </td>
+ </template>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ `
+}
+
+
diff --git a/entries/static/entries/js/entries.js b/entries/static/entries/js/entries.js
index 72b3e2d..27be8a7 100644
--- a/entries/static/entries/js/entries.js
+++ b/entries/static/entries/js/entries.js
@@ -594,9 +594,9 @@ function unbind_frame_opinion_click(frame) {
function select_frame(frame) {
var frame_id = frame.data('frame_id');
- if(window.unificationLeftPaneApp && window.unificationLeftPaneApp.$refs.unificationRightPane) {
- window.unificationLeftPaneApp.$refs.unificationRightPane.$refs.lexicalUnitEdit.slowalFrameSelected(frame_id);
- }
+ // if(window.unificationLeftPaneApp && window.unificationLeftPaneApp.$refs.unificationRightPane) {
+ // window.unificationLeftPaneApp.$refs.unificationRightPane.$refs.lexicalUnitEdit.slowalFrameSelected(frame_id);
+ // }
if ($('.frame.active').length > 0) {
unselect_frame($('.frame.active'));
} else {
@@ -613,9 +613,9 @@ function select_frame(frame) {
function unselect_frame(frame) {
var frame_id = frame.data('frame_id');
- if(window.unificationLeftPaneApp && window.unificationLeftPaneApp.$refs.unificationRightPane) {
- window.unificationLeftPaneApp.$refs.unificationRightPane.$refs.lexicalUnitEdit.slowalFrameSelected(frame_id);
- }
+ // if(window.unificationLeftPaneApp && window.unificationLeftPaneApp.$refs.unificationRightPane) {
+ // window.unificationLeftPaneApp.$refs.unificationRightPane.$refs.lexicalUnitEdit.slowalFrameSelected(frame_id);
+ // }
unbind_arguments_click(frame);
unbind_lus_click(frame);
unbind_frame_opinion_click(frame);
--
GitLab