First commit.

entries/templates/entries_base.html

@@ -33,6 +33,7 @@
     <li class="nav-item mr-1"><a
                             onclick='window.location.replace(window.currUnifiedFrameId ? "/pl/entries/hierarchy/?unified_frame_id="+window.currUnifiedFrameId : "/pl/entries/hierarchy")'
                             class="nav-link cursor-pointer">{% trans "Hierarchia" %}</a></li>
+    <li class="nav-item mr-1"><a href="{% url 'entries:lu_free' %}" class="nav-link">{% trans "Wolne jednostki" %}</a></li>
 
 {% endif %}
 <li class="nav-item dropdown mr-1">

entries/templates/lu_free.html

+{% extends "entries_base.html" %}
+
+{% load i18n %}
+{% load static %}
+
+{% block title %}{% trans "Hasła" %}{% endblock %}
+
+{% block scripts %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static 'entries/css/unification_frames.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'common/css/role_colours.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/jquery-impromptu.min.js' %}"></script>
+    <script>
+        window.currUnifiedFrameId = {{ unified_frame_id|default:'null' }};
+    </script>
+{% endblock %}
+
+{% block modals %}
+    {{ block.super }}
+    <div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>
+{% endblock %}

entries/urls.py

@@ -19,6 +19,7 @@ urlpatterns = [
     path('change_show_linked_entries/', views.change_show_linked_entries, name='change_show_linked_entries'),
     path('unification/', views.unification, name='unification'),
     path('hierarchy/', views.hierarchy, name='hierarchy'),
+    path('lu_free/', views.lu_free, name='lu_free'),
 
     path('autocomplete/', autocompletes.autocomplete, name='autocomplete'),
     path('plWN_context_lookup/', ajax_plWN_context_lookup, name='plWN_context_lookup'),

entries/views.py

@@ -113,6 +113,27 @@ def hierarchy(request):
     )
 
 
+@login_required
+def lu_free(request):
+
+    unified_frame_id = None
+    if "unified_frame_id" in request.GET:
+        unified_frame_id = request.GET.get("unified_frame_id")
+
+    return render(
+        request,
+        'lu_free.html',
+        {
+            'is_vue_app': True,
+            'unified_frame_id': unified_frame_id,
+            'entries_form': EntryForm(),
+            'frames_form': FrameFormFactory.get_form(as_subform=False),
+            'schemata_form': SchemaFormFactory.get_form(as_subform=False),
+            'unified_frames_form': UnifiedFrameFormFactory.get_form(as_subform=False),
+        },
+    )
+
+
 FORM_TYPES = {
     'entry'      : EntryForm,
 }

frontend/src/components/unification/free_lu/FreeLu.vue

+<script>
+import UnificationFramesList from "../Unification/UnificationFramesList.vue";
+import FreeLuRightPane from "./FreeLuRightPane.vue";
+
+export default {
+  data () {
+    return {
+      entryId: null,
+      lexicalUnitId: null,
+      unifiedFrameId: null,
+      gettext: window.gettext,
+      unificationEntriesListRefreshKey: 1,
+    };
+  },
+  components: {FreeLuRightPane, UnificationFramesList},
+  methods: {
+    lexicalUnitSelected (entryId, lexicalUnitId) {
+      this.entryId = entryId;
+      this.lexicalUnitId = lexicalUnitId;
+    },
+    unifiedFrameSelected (unifiedFrameId, entryId, lexicalUnitId) {
+      this.unifiedFrameId = unifiedFrameId;
+      this.entryId = entryId;
+      this.lexicalUnitId = lexicalUnitId;
+    },
+    refreshEntriesList() {
+      this.unificationEntriesListRefreshKey++;
+    }
+  },
+  setup() {
+    const unified_frame_id = new URL(location.href).searchParams.get('unified_frame_id');
+    return {
+      initial_unified_frame_id: parseInt(unified_frame_id),
+    };
+  },
+  mounted () {
+    this.unifiedFrameSelected(window.currUnifiedFrameId);
+    $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
+      sizes: [20, 80],
+      gutterSize: 4,
+      minSize: 10,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
+  },
+};
+</script>
+
+<template>
+  <div id="entries-list" class="col h-100 w-100 pr-0 overflow-hidden">
+    <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-hidden">
+      <unification-frames-list
+              :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
+              :initialUnifiedFrameId="initial_unified_frame_id"
+              :setupHierarchyMarking="true"
+              @unified-frame-selected="unifiedFrameSelected"
+      />
+    </div>
+  </div>
+  <div id="entry-display" class="col h-100 p-0 overflow-hidden">
+    <free-lu-right-pane
+        ref="hierarchyRightPane"
+        :entryId="entryId"
+        :lexicalUnitId="lexicalUnitId"
+        :initialUnifiedFrameId="unifiedFrameId"
+        @refresh-entries-list="refreshEntriesList"
+    />
+  </div>
+</template>
+

frontend/src/components/unification/free_lu/FreeLuElement.vue

+<script>
+
+export default {
+    name: 'FreeLuElement',
+    props: {
+        node: {
+            type: Object,
+            required: true
+        },
+        spacing: {
+            type: Number,
+            default: 0
+        },
+        spacing_elem_type: String
+    },
+    data() {
+        return {
+            showHyponyms: false,
+            showHypyronyms: false
+        }
+    },
+    computed: {
+        nodeMargin() {
+            return {
+                'margin-left': `${this.spacing}px`
+            }
+        },
+        hasHyponyms() {
+            const {hyponyms} = this.node
+            return hyponyms && hyponyms.length > 0
+        },
+        hasHypyronyms() {
+            const {hypyronyms} = this.node
+            return hypyronyms && hypyronyms.length > 0
+        },
+        toggleChildrenIcon() {
+            return this.showHypyronyms ? 'fas fa-angle-down' : 'fas fa-angle-right'
+        },
+        getSpacingElem() {
+            if(this.spacing_elem_type === "std") {
+                return "&#9474; &#9500;&#8594; &#9474;";
+            } else if(this.spacing_elem_type === "top_corner") {
+                return "&#160; &#160; &#160; &#160; &#9484;&#8594; &#9474; &#9474;";
+            } else if(this.spacing_elem_type === "down_corner") {
+                return "&#9474; &#9474; &#9492;&#8594;";
+            } else {
+                return "";
+            }
+        },
+    },
+    methods: {
+        loadChildren (children) {
+            for (let i in children) {
+                const hypyronym = children[i];
+                if (hypyronym.hasChildrenLoaded !== true) {
+                    $.ajax({
+                        type: 'post',
+                        url: '/' + lang + '/unifier/get_hierarchy_hyperonyms/' + hypyronym.unified_frame_id + "/",
+                        dataType: 'json',
+                        timeout: 60000,
+                        success: function (response) {
+                            hypyronym.hypyronyms = response.hyperonyms;
+                        }.bind(this),
+                        error: function (request, errorType, errorMessage) {
+                            show_error(errorType + ' (' + errorMessage + ')');
+                        }
+                    });
+                    $.ajax({
+                        type: 'post',
+                        url: '/' + lang + '/unifier/get_hierarchy_hyponyms/' + hypyronym.unified_frame_id + "/",
+                        dataType: 'json',
+                        timeout: 60000,
+                        success: function (response) {
+                            hypyronym.hyponyms = response.hyponyms;
+                        }.bind(this),
+                        error: function (request, errorType, errorMessage) {
+                            show_error(errorType + ' (' + errorMessage + ')');
+                        }
+                    });
+                }
+            }
+        }, toggleHypyronyms() {
+            this.loadChildren(this.node.hypyronyms);
+            this.showHypyronyms = !this.showHypyronyms
+        },
+        toggleHyponyms() {
+            this.loadChildren(this.node.hyponyms);
+            this.showHyponyms = !this.showHyponyms
+        }
+    }
+}
+
+</script>
+
+
+<template>
+    <div :style="nodeMargin" style="height: 100%">
+        <div v-if="hasHypyronyms" v-show="showHypyronyms">
+            <free-lu-element
+                    v-for="(child, index) in node.hypyronyms"
+                    :key="child.id"
+                    :node="child"
+                    :spacing_elem_type='index === 0 ? "top_corner" : "std"'
+                    :spacing="spacing + 40"
+            />
+        </div>
+        <div show class="d-flex justify-content-between mb-1">
+            <div class="row">
+                <div class="col" style="max-width: 10px" v-html="getSpacingElem"/>
+                <div class="col">
+                    <div class="row">
+                        <div class="col cursor-pointer" style="text-align: center; font-size: large"><span
+                                v-if="hasHypyronyms"
+                                :class="toggleChildrenIcon"
+                                @click="toggleHypyronyms"
+                                @keypress="toggleHypyronyms">&#9650;</span></div>
+                    </div>
+                    <div class="row">
+                        <div class="col" align="left" style="display: table;">
+                            <div class="unifiedFrame" id="hierarchy-unified-frame-title" v-html="node.unified_frame.title"></div>
+                            <table id="hierarchy-unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
+                                <tbody>
+                                <tr>
+                                    <template v-for="argument in node.unified_frame.arguments">
+                                        <td
+                                                class="argument py-2 px-1 border-top border-left border-secondary role-column"
+                                                :class="argument.role ? argument.role.str + ' ' : ''"
+                                        >
+                                            {{ argument.role_type }}
+
+                                            <div
+                                                    v-if="argument.role"
+                                            >
+                                                [{{ argument.role.str }}]
+                                            </div>
+                                            <div v-else>
+                                                <ul class="ul-role">
+                                                    <li v-for="proposed_role in argument.proposed_roles">
+                                                        {{ proposed_role.str }}
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </td>
+                                    </template>
+                                </tr>
+                                <tr>
+                                    <td hidden class="preferences py-0 px-0 border-top border-left border-secondary role-column align-top"
+                                        v-for='argument in node.unified_frame.arguments'
+                                        :key='argument.id'
+                                    >
+                                        <ul class="ul-preference" v-if="argument.preferences.length > 0">
+                                            <li 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>
+                                            </li>
+                                        </ul>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="row align-content-center">
+                        <div class="col cursor-pointer" style="text-align: center; font-size: large"><span
+                                v-if="hasHyponyms"
+                                :class="toggleChildrenIcon"
+                                @click="toggleHyponyms"
+                                @keypress="toggleHyponyms">&#9660;</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="hasHyponyms" v-show="showHyponyms">
+            <free-lu-element
+                    v-for="(child, index) in node.hyponyms"
+                    :key="child.id"
+                    :node="child"
+                    :spacing_elem_type='index === node.hyponyms.length - 1 ? "down_corner" : "std"'
+                    :spacing="spacing + 40"
+            />
+        </div>
+    </div>
+</template>

frontend/src/components/unification/free_lu/FreeLuPreview.vue

+<script>
+import UnificationFramesList from "../Unification/UnificationFramesList.vue";
+
+export default {
+  props: {
+    initialUnifiedFrameId: Number,
+    initialLexicalUnitId: Number,
+    forceRefresh: Number,
+    hierarchyEditComponent: Object,
+  },
+  data () {
+    return {
+      unifiedFrameId: this.initialUnifiedFrameId
+    };
+  },
+  components: {UnificationFramesList},
+  emits: ['changeFrame', 'refreshEntriesList'],
+  methods: {
+    unifiedFrameSelected (unifiedFrameId) {
+      this.$emit('changeFrame', unifiedFrameId);
+    },
+    refreshEntriesList() {
+      this.$emit('refreshEntriesList')
+    },
+  },
+  mounted () {
+    Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
+      sizes: [60, 40],
+      minSize: 20,
+      gutterSize: 4,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
+  }
+};
+</script>
+
+<template>
+  <div class="row h-100 overflow-hidden">
+    <div :key="unifiedFrameId" class="col h-100 pr-0 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
+      <component v-bind:is="hierarchyEditComponent"
+        v-if="unifiedFrameId !== -1"
+        :readOnly="true"
+        :unifiedFrameId="unifiedFrameId"
+        :forceRefresh="forceRefresh"
+        @refresh-entries-list="refreshEntriesList"
+      />
+      <div v-else class="h-100">
+        Brak ramy do wyświetlenia
+      </div>
+    </div>
+    <div class="col h-100 pl-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
+<!--      <unification-switchable-list-->
+<!--        @unified-frame-selected="unifiedFrameSelected"-->
+<!--      />-->
+      <unification-frames-list
+            @unified-frame-selected="unifiedFrameSelected"
+      />
+    </div>
+  </div>
+</template>

frontend/src/components/unification/free_lu/FreeLuRightPane.vue

+<script>
+import FreeLuEdit from './FreeLuEdit.vue';
+
+export default {
+  components: {FreeLuEdit},
+  props: {
+    entryId: Number,
+    lexicalUnitId: Number,
+    initialUnifiedFrameId: Number,
+  },
+  emits: ['refreshEntriesList'],
+  data() {
+    return this.getInitialData();
+  },
+  methods: {
+    getInitialData() {
+      return {
+        key: this.lexicalUnitId,
+        entryIdLocal: this.entryId,
+        unifiedFrameId: this.initialUnifiedFrameId,
+        previewedUnifiedFrameId: -1
+      };
+    },
+    goToDisplay() {
+      this.unifiedFrameId = null;
+    },
+    refresh() {
+      this.key = null;
+      setTimeout(() => {
+        this.key = this.lexicalUnitId;
+      }, 0);
+    },
+    swapFrames(previewedUnifiedFrameId) {
+      this.previewedUnifiedFrameId = this.unifiedFrameId;
+      this.unifiedFrameId = previewedUnifiedFrameId;
+      this.refresh();
+    },
+    refreshEntriesList() {
+      this.$emit('refreshEntriesList');
+    }
+  },
+  watch: {
+    lexicalUnitId() {
+      Object.assign(this, this.getInitialData());
+    },
+    initialUnifiedFrameId() {
+      Object.assign(this, this.getInitialData());
+    }
+  },
+};
+</script>
+
+<template>
+  <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
+    <free-lu-edit
+      ref="hierarchyEdit"
+      v-if="unifiedFrameId"
+      :key="unifiedFrameId"
+      :readOnly="false"
+      :unifiedFrameId="unifiedFrameId"
+      :previewedUnifiedFrameId="previewedUnifiedFrameId"
+      :initialRightPaneTab="previewedUnifiedFrameId && unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : 'schemata'"
+      @go-to-display="goToDisplay"
+      @swap-frames="swapFrames"
+      @refresh-entries-list="refreshEntriesList"
+    />
+  </div>
+</template>

frontend/src/main.js

@@ -6,6 +6,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Entries from "./components/unification/Entries/Entries.vue";
 import Unification from "./components/unification/Unification/Unification.vue";
 import Hierarchy from "./components/unification/hierarchy/Hierarchy.vue";
+import FreeLu from "./components/unification/free_lu/FreeLu.vue";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -13,6 +14,7 @@ const router = createRouter({
     { path: '/:lang/entries/', component: Entries },
     { path: '/:lang/entries/unification/', component: Unification },
     { path: '/:lang/entries/hierarchy/', component: Hierarchy },
+    { path: '/:lang/entries/lu_free/', component: FreeLu },
     { path: '/:pathMatch(.*)*', component: null, name: '404' },
   ]
 });