Skip to content
Snippets Groups Projects
Commit 03e23b19 authored by dcz2's avatar dcz2
Browse files

Improve the edit view

parent 800bb5a8
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 212 additions and 236 deletions
entries/static/entries/js/components/InfoTooltip.js 0 → 100644
+ 26
− 0
View file @ 03e23b19
export default {
props: { text: String },
data () {
return {
iconUrl: window.STATIC_URL + 'common/img/info.svg'
}
},
computed: {
quotedText () {
return this.text.replace(/"/g, '"');
}
},
created () {
$("[data-toggle='tooltip']").tooltip();
},
template: `
<span
data-toggle="tooltip"
data-placement="bottom"
data-html="true"
:title="quotedText"
>
<img :src="iconUrl" alt="info" width="14" height="14" />
</span>
`
}
entries/static/entries/js/components/LexicalUnitDisplay.js
+ 4
− 1
View file @ 03e23b19
...@@ -93,5 +93,8 @@ export default { ...@@ -93,5 +93,8 @@ export default {
</div> </div>
<div id="lexical-unit-notes"></div> <div id="lexical-unit-notes"></div>
</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>
` `
} }
entries/static/entries/js/components/LexicalUnitEdit.js
+ 163
− 210
View file @ 03e23b19
import InfoTooltip from "./InfoTooltip.js";
import Spinner from "./Spinner.js";
export default { export default {
props: { props: {
...@@ -5,15 +7,18 @@ export default { ...@@ -5,15 +7,18 @@ export default {
}, },
data() { data() {
return { return {
count: 0, gettext: window.gettext,
unified_frame: Object, unified_frame: Object,
unified_frame_arguments: [], unified_frame_arguments: [],
title_str: Object, active_unified_frame_argument: null,
slowal_frames2selecional_preferencies_mapping: {}, slowal_frames2selecional_preferencies_mapping: {},
lexical_units: [], lexical_units: [],
img_prefix: String img_prefix: String,
frames: []
} }
}, },
components: { InfoTooltip, Spinner },
emits: ['goToDisplay', 'refresh'],
watch: { watch: {
unifiedFrameId: function () { unifiedFrameId: function () {
this.loadFrame(); this.loadFrame();
...@@ -35,17 +40,11 @@ export default { ...@@ -35,17 +40,11 @@ export default {
this.unified_frame = response.unified_frame; this.unified_frame = response.unified_frame;
this.unified_frame_arguments = this.unified_frame.arguments; this.unified_frame_arguments = this.unified_frame.arguments;
this.frames = response.frames;
this.count = this.count + 100;
this.lexical_units = frames2lexical_units(response.frames); this.lexical_units = frames2lexical_units(response.frames);
this.title_str = this.unified_frame.title; $('#lexical-unit').html(this.unified_frame.title || lexical_units2dom(this.lexical_units));
if(this.title_str == null) {
//title as list of lexical units from all slowal frames
var lexical_units_html = lexical_units2dom(this.lexical_units);
this.title_str = lexical_units_html;
}
this.slowal_frames2selecional_preferencies_mapping = slowal_frames2selecional_preferencies(this.unified_frame, response.frames); this.slowal_frames2selecional_preferencies_mapping = slowal_frames2selecional_preferencies(this.unified_frame, response.frames);
...@@ -62,7 +61,7 @@ export default { ...@@ -62,7 +61,7 @@ export default {
curr_examples_by_id[curr_examples[i].id] = curr_examples[i]; curr_examples_by_id[curr_examples[i].id] = curr_examples[i];
} }
// show_syntax(response.subentries); // show_syntax(response.subentries);
show_unified_frame(response.unified_frame, response.frames) // show_unified_frame(response.unified_frame, response.frames)
show_unified_frame_lexical_units(response.frames) show_unified_frame_lexical_units(response.frames)
fulfill_slowal_frames_arguments_with_empty_elems(response.unified_frame, response.frames) fulfill_slowal_frames_arguments_with_empty_elems(response.unified_frame, response.frames)
show_semantics_unified_view(response.frames, response.subentries); show_semantics_unified_view(response.frames, response.subentries);
...@@ -77,72 +76,62 @@ export default { ...@@ -77,72 +76,62 @@ export default {
} }
}); });
} } catch (error) {
catch (error) {
console.log(error); console.log(error);
} }
},
unifiedFrameArgumentSelected (argument) {
if (this.active_unified_frame_argument === argument) {
this.active_unified_frame_argument = null;
} else {
this.active_unified_frame_argument = argument;
}
},
addSelectivePreference () {
if (!this.active_unified_frame_argument) {
alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
} else {
window.addSelectivePreference(this.unified_frame, this.active_unified_frame_argument.id, this.frames);
}
} }
}, },
created() { created() {
this.loadFrame(); this.loadFrame();
}, },
template: ` template: `
<!--{% load i18n %}-->
<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 class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
<table class="table-button-menu" cellspacing="1"> <table class="table-button-menu" cellspacing="1">
<tr style="background-color: white;"> <tr style="background-color: white;">
<td id="change-title" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="change-title" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień nazwę</td>
Zmień nazwę <td id="add-arg" style="padding: 10px 15px 10px 15px; color: #000000;">Dodaj argum.</td>
</td> <td style="padding: 10px 15px 10px 15px; color: #000000;" @click="addSelectivePreference">Dodaj prefer.</td>
<td id="add-arg" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="merge" style="padding: 10px 15px 10px 15px; color: #000000;">Scal</td>
Dodaj argum. <td style="padding: 10px 15px 10px 15px; color: #000000;" @click="$emit('goToDisplay')">Gotowe</td>
</td>
<td id="add-pref" style="padding: 10px 15px 10px 15px; color: #000000;"
onclick="addSelectivePreference()">
Dodaj prefer.
</td>
<td id="merge" style="padding: 10px 15px 10px 15px; color: #000000;">
Scal
</td>
<td id="ready" style="padding: 10px 15px 10px 15px; color: #000000;">
Gotowe
</td>
</tr> </tr>
<tr style="background-color: white;"> <tr style="background-color: white;">
<td id="change-role" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="change-role" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień rolę</td>
Zmień rolę <td id="remove-arg" style="padding: 10px 15px 10px 15px; color: #000000;">Usuń argum.</td>
</td> <td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;">Zamień okna</td>
<td id="remove-arg" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="duplicates" style="padding: 10px 15px 10px 15px; color: #000000;">Duplikuj</td>
Usuń argum. <td id="save-changes" style="padding: 10px 15px 10px 15px; color: #000000;">Zapisz</td>
</td>
<td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;">
Zamień okna
</td>
<td id="duplicates" style="padding: 10px 15px 10px 15px; color: #000000;">
Duplikuj
</td>
<td id="save-changes" style="padding: 10px 15px 10px 15px; color: #000000;">
Zapisz
</td>
</tr> </tr>
</table> </table>
<br> <spinner />
<div class="unifiedFrame mb-3" data-frame_id="3"><p class="mb-1"><span class="lexical-unit">{{ title_str }}</span></p> <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="lexical-unit"></div>
<table class="table m-0 table-borderless border border-secondary text-dark"> <table v-if="unified_frame.id" id="unified-frame" class="table m-0 table-borderless border border-secondary text-dark">
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="py-2 px-1 text-secondary">Role</th> <th scope="row" class="py-2 px-1 text-secondary">Role</th>
<td class="argument py-2 px-1 border-top border-left border-secondary role" <td
class="argument py-2 px-1 border-top border-left border-secondary role"
:class="argument == active_unified_frame_argument && 'active'"
v-for="argument in unified_frame_arguments" v-for="argument in unified_frame_arguments"
:key="argument.id" :key="argument.id"
>{{ argument.role_type }} @click="unifiedFrameArgumentSelected(argument)"
<ul>
<li
v-for='proposed_role in argument.proposed_roles'
> >
{{ argument.role_type }}
<ul>
<li v-for="proposed_role in argument.proposed_roles">
{{ proposed_role.role }} {{ proposed_role.role }}
</li> </li>
</ul> </ul>
...@@ -150,46 +139,42 @@ export default { ...@@ -150,46 +139,42 @@ export default {
</tr> </tr>
<tr> <tr>
<th scope="row" class="py-0 px-1 text-secondary">Selectional preferences</th> <th scope="row" class="py-0 px-1 text-secondary">Selectional preferences</th>
<td class="preferences py-0 px-0 border-top border-left border-secondary" <td class="preferences py-0 px-0 border-top border-left border-secondary"
v-for='argument in unified_frame_arguments' v-for='argument in unified_frame_arguments'
:key='argument.id' :key='argument.id'
> >
<ul> <ul>
<li <li v-for='preference in argument.preferences'>
v-for='preference in argument.preferences' <div
v-if="preference.url != null"
class="preference py-2 px-1 preference-bold"
> >
<div v-if="preference.url != null" class="preference py-2 px-1 preference-bold"><a class="synset-plwn" <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
v-bind:href="preference.url" </div>
target="_blank">{{ preference.str }}</a></div>
<div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div> <div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li <li v-for="preference in slowal_frames2selecional_preferencies_mapping[argument.id]">
v-for='preference in slowal_frames2selecional_preferencies_mapping[argument.id]' <span v-if="preference.url != null" class="preference py-2 px-1">
> <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
<div v-if="preference.url != null" class="preference py-2 px-1"><a class="synset-plwn" </span>
v-bind:href="preference.url" <span v-else class="preference py-2 px-1">{{ preference.str }}</span>
target="_blank">{{ preference.str }}</a></div> <info-tooltip v-if="preference.info" :text="preference.info" />
<div v-else class="preference py-2 px-1">{{ preference.str }}</div>
</li> </li>
</ul> </ul>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="frame mb-3"> <div v-if="unified_frame.id" class="frame mt-3 mb-3">
<table class="table m-0 table-borderless border border-secondary text-dark"> <table class="table m-0 table-borderless border border-secondary text-dark">
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th> <th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
<th scope="row" class="py-2 px-1 text-secondary">Opinion</th> <th scope="row" class="py-2 px-1 text-secondary">Opinion</th>
</tr> </tr>
<tr class="preferences py-0 px-0 border-top border-left border-secondary" <tr class="preferences py-0 px-0 border-top border-left border-secondary"
v-for='lexical_unit in lexical_units' v-for='lexical_unit in lexical_units'
> >
...@@ -203,28 +188,18 @@ export default { ...@@ -203,28 +188,18 @@ export default {
</table> </table>
</div> </div>
<table v-if="unified_frame.id" class="table-button-menu" cellspacing="1">
<!-- <div id="unified-frame"></div>-->
<!-- <div id="unified-frame-lexical-units"></div>-->
<br>
<table class="table-button-menu" cellspacing="1">
<tr style="background-color: white;"> <tr style="background-color: white;">
<td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Błędna</td>
Błędna <td
</td> style="padding: 10px 15px 10px 15px; color: #000000;"
<td id="extract-frame" style="padding: 10px 15px 10px 15px; color: #000000;" onclick="extract_frames_to_new_frame(1, [104274,104238], null)"
onclick="extract_frames_to_new_frame(1, [104274,104238], null)"> >
Rozdziel Rozdziel
</td> </td>
<td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Ukryj</td>
Ukryj <td id="ready-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Gotowe</td>
</td> <td id="filter-slowal-frames" style="padding: 10px 15px 10px 15px; color: #000000;">Filtruj</td>
<td id="ready-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
Gotowe
</td>
<td id="filter-slowal-frames" style="padding: 10px 15px 10px 15px; color: #000000;">
Filtruj
</td>
</tr> </tr>
<tr style="background-color: white;"> <tr style="background-color: white;">
<td id="inccorect-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="inccorect-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
...@@ -240,52 +215,30 @@ export default { ...@@ -240,52 +215,30 @@ export default {
<td id="reollback-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="reollback-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
Przywróć Przywróć
</td> </td>
<td id="empty" style="padding: 10px 15px 10px 15px; color: #000000;"> <td id="empty" style="padding: 10px 15px 10px 15px; color: #000000;"></td>
</td>
</tr> </tr>
</table> </table>
<br>
<div id="semantics-frames"></div> <div id="semantics-frames"></div>
</div> </div>
<div class="gutter gutter-horizontal" style="width: 4px;"></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">
<ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist"> <ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist">
<li class="nav-item mr-1"> <li class="nav-item mr-1">
<a class="btn btn-sm btn-outline-dark nav-link active" id="unified-frame-semantics-tab" data-toggle="tab" href="#semantics" role="tab" aria-controls="semantics" aria-selected="true"> <a class="btn btn-sm btn-outline-dark nav-link active" id="unified-frame-semantics-tab" data-toggle="tab" href="#semantics" role="tab" aria-controls="semantics" aria-selected="true">
{% trans "Schematy" %} {{ gettext('Schematy') }}
</a> </a>
</li> </li>
<li class="nav-item mr-1"> <li class="nav-item mr-1">
<a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-view2-tab" data-toggle="tab" href="#syntax" role="tab" aria-controls="syntax" aria-selected="false"> <a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-view2-tab" data-toggle="tab" href="#syntax" role="tab" aria-controls="syntax" aria-selected="false">
{% trans "Podgląd ram" %} {{ gettext('Podgląd ram') }}
</a> </a>
</li> </li>
<li class="nav-item mr-0"> <li class="nav-item mr-0">
<a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-notes-tab" data-toggle="tab" href="#examples" role="tab" aria-controls="examples" aria-selected="false"> <a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-notes-tab" data-toggle="tab" href="#examples" role="tab" aria-controls="examples" aria-selected="false">
{% trans "Notatki" %} {{ gettext('Notatki') }}
</a> </a>
</li> </li>
</ul> </ul>
<div id="semantics-schemata"></div> <div id="semantics-schemata"></div>
</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>
` `
} }
entries/static/entries/js/components/main.js
+ 1
− 4
View file @ 03e23b19
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
} }
}, },
template: ` template: `
<div v-if="key" :key="key"> <div v-if="key" :key="key" class="row m-0 p-0 overflow-auto" id="semantics-top-pane">
<lexical-unit-display <lexical-unit-display
v-if="lexicalUnitId && !isEdit" v-if="lexicalUnitId && !isEdit"
:entryId="entryId" :entryId="entryId"
...@@ -52,8 +52,5 @@ export default { ...@@ -52,8 +52,5 @@ export default {
@go-to-display="goToDisplay" @go-to-display="goToDisplay"
/> />
</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>
` `
} }
entries/static/entries/js/selectional_preference.js
+ 17
− 20
View file @ 03e23b19
...@@ -3,16 +3,6 @@ var relations = []; ...@@ -3,16 +3,6 @@ var relations = [];
var synsets = []; var synsets = [];
var change = false; var change = false;
function existingSelect() {
let availablePreferencies = slowal_frames2selecional_preferencies(unified_frame_active_frame, unified_view_frame_content)[unified_frame_active_argument_id];
if (!availablePreferencies) {
return gettext('Brak preferencji selekcyjnych do wyboru.')
}
return availablePreferencies.map(preference => {
return `<label><input type="checkbox" name="existing" value="${preference.type}:${preference.id}" /> ${preference.str}</label><br />`;
}).join("");
}
function predefinedSelect() { function predefinedSelect() {
var display = ""; var display = "";
...@@ -55,8 +45,8 @@ function argumentSelect(frame, complement_id) { ...@@ -55,8 +45,8 @@ function argumentSelect(frame, complement_id) {
var i; var i;
for (i = 0; i < frame.arguments.length; i++) { for (i = 0; i < frame.arguments.length; i++) {
var local_complement_id = parseInt(frame.arguments[i].id.split('-')[1]); var local_complement_id = frame.arguments[i].argument_id;
if (local_complement_id != complement_id) { if (local_complement_id && local_complement_id !== String(complement_id)) {
// var list = frame_content[unified_frame_id].display.roles[i].argument; // var list = frame_content[unified_frame_id].display.roles[i].argument;
// //
// var text = []; // var text = [];
...@@ -129,15 +119,12 @@ function attachPlWNContextAutocomplete() { ...@@ -129,15 +119,12 @@ function attachPlWNContextAutocomplete() {
}); });
} }
function addSelectivePreference() { function addSelectivePreference(unified_frame, unified_frame_active_argument_id, frames) {
if (!unified_frame_active_argument_id) { if (!unified_frame_active_argument_id) return;
alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję.")); addSelectivePreferenceBase(unified_frame, frames, unified_frame_active_argument_id);
return;
}
addSelectivePreferenceBase(unified_frame_active_frame, unified_view_frame_content[0], unified_frame_active_argument_id);
} }
function addSelectivePreferenceBase(unified_frame, frame, complement_id) { function addSelectivePreferenceBase(unified_frame, frames, complement_id) {
let unified_frame_id = unified_frame.id; let unified_frame_id = unified_frame.id;
var submitSynsetSelection = function(e,v,m,f){ var submitSynsetSelection = function(e,v,m,f){
...@@ -157,6 +144,16 @@ function addSelectivePreferenceBase(unified_frame, frame, complement_id) { ...@@ -157,6 +144,16 @@ function addSelectivePreferenceBase(unified_frame, frame, complement_id) {
} }
} }
var existingSelect = function () {
let availablePreferencies = slowal_frames2selecional_preferencies(unified_frame, frames)[complement_id];
if (!availablePreferencies) {
return gettext('Brak preferencji selekcyjnych do wyboru.')
}
return availablePreferencies.map(preference => {
return `<label><input type="checkbox" name="existing" value="${preference.type}:${preference.id}" /> ${preference.str}</label><br />`;
}).join("");
};
var select_preference = { var select_preference = {
state0: { state0: {
title: 'Typ preferencji selekcyjnej', title: 'Typ preferencji selekcyjnej',
...@@ -233,7 +230,7 @@ function addSelectivePreferenceBase(unified_frame, frame, complement_id) { ...@@ -233,7 +230,7 @@ function addSelectivePreferenceBase(unified_frame, frame, complement_id) {
}, },
state3: { state3: {
title: 'Wybierz relację i argument', title: 'Wybierz relację i argument',
html: relationArgument(frame, complement_id), html: relationArgument(unified_frame, complement_id),
buttons: { Anuluj: -1, Zatwierdź: 1 }, buttons: { Anuluj: -1, Zatwierdź: 1 },
focus: 1, focus: 1,
submit: function(e,v,m,f){ submit: function(e,v,m,f){
......
entries/templates/unification_lexical_unit_display.html
+ 1
− 1
View file @ 03e23b19
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab"> <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">
<!-- Vue.js app --> <!-- Vue.js app -->
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue@3"></script>
<div class="row m-0 p-0 overflow-auto" id="semantics-top-pane"></div> <div id="semantics-top-pane" class="overflow-auto"></div>
<script type="module" src="{% static 'entries/js/unification_index.js' %}"></script> <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
<!-- Vue.js app --> <!-- Vue.js app -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment