The_evening_detective/evening_detective_admin_client
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add features

Browse Source
This commit is contained in:
Владимир Фёдоров 2025-12-07 05:31:53 +07:00
parent 296ec5f222
commit 8b38453a4e
1 changed files with 120 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/components/EditorWindow.vue
View File

@ -13,8 +13,26 @@ const graph = ref<Graph>({
edges: [] edges: []
}) })
const emptyNode = {
id: -1,
label: "",
name: "",
text: "",
applications: [],
links: [],
}
const selectedNode = ref<GraphNode>({ const selectedNode = ref<GraphNode>({
id: 0, id: -1,
label: "",
name: "",
text: "",
applications: [],
links: [],
})
const focusedNode = ref<GraphNode>({
id: -1,
label: "", label: "",
name: "", name: "",
text: "", text: "",
@ -107,6 +125,17 @@ function selectNode(node: GraphNode) {
net.selectNodes([selectedNode.value.id]) net.selectNodes([selectedNode.value.id])
} }
function focusNode(node: GraphNode) {
console.log("Focus node:", node.id)
focusedNode.value = node
}
function copyLink(node: GraphNode) {
console.log("Focus node:", node.id)
navigator.clipboard.writeText("([" + node.label + "])")
focusedNode.value = emptyNode
}
async function updateSelectedNode() { async function updateSelectedNode() {
console.log("Update node:", selectedNode.value) console.log("Update node:", selectedNode.value)
await updateNode(selectedNode.value) await updateNode(selectedNode.value)
@ -143,11 +172,14 @@ function nodeHeader(node: GraphNode): string {
<hr class="hr"> <hr class="hr">
<div v-bind:key="node.id" v-for="node in graph.nodes"> <div v-bind:key="node.id" v-for="node in graph.nodes">
<div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button" <span v-on:mouseenter="focusNode(node)" v-on:mouseleave="focusNode(emptyNode)">
v-on:click="selectNode(node)"> <span :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
{{ nodeHeader(node) }} v-on:click="selectNode(node)">{{ nodeHeader(node) }}</span>
<span v-if="node.applications.length > 0">({{ node.applications.length }})</span> <span v-if="node.applications.length > 0"> ({{ node.applications.length }})</span>
</div> <span v-if="node.id == focusedNode.id" class="copy-node-link" v-on:click="copyLink(node)">
Скопировать ссылку
</span>
</span>
</div> </div>
</div> </div>
@ -243,95 +275,111 @@ function nodeHeader(node: GraphNode): string {
margin: 10px 0; margin: 10px 0;
} }
.copy-node-link {
margin-left: 5px;
}
.copy-node-link:hover {
font-weight: bold;
cursor: pointer;
}
.checkbox-green { .checkbox-green {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
line-height: 28px; line-height: 28px;
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
font-size: 14px; font-size: 14px;
user-select: none; user-select: none;
} }
.checkbox-green .checkbox-green-switch { .checkbox-green .checkbox-green-switch {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
width: 90px; width: 90px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
background: #848484; background: #848484;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
} }
.checkbox-green .checkbox-green-switch:before { .checkbox-green .checkbox-green-switch:before {
content: attr(data-label-on); content: attr(data-label-on);
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
width: 45px; width: 45px;
padding: 0 8px; padding: 0 8px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 45px; left: 45px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 10px; font-size: 10px;
line-height: 20px; line-height: 20px;
} }
.checkbox-green .checkbox-green-switch:after { .checkbox-green .checkbox-green-switch:after {
content: attr(data-label-off); content: attr(data-label-off);
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
width: 44px; width: 44px;
border-radius: 1px; border-radius: 1px;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 1px; left: 1px;
z-index: 5; z-index: 5;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
background: white; background: white;
line-height: 18px; line-height: 18px;
font-size: 10px; font-size: 10px;
color: #777; color: #777;
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
} }
.checkbox-green input[type="checkbox"] { .checkbox-green input[type="checkbox"] {
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
} }
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
background-color: #848484; .checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch {
background-color: #848484;
} }
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
content: attr(data-label-off); .checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:before {
left: 0; content: attr(data-label-off);
left: 0;
} }
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
content: attr(data-label-on); .checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:after {
color: #848484; content: attr(data-label-on);
transform: translate3d(44px, 0, 0); color: #848484;
transform: translate3d(44px, 0, 0);
} }
/* Hover */ /* Hover */
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover { .checkbox-green input[type="checkbox"]:not(:disabled)+.checkbox-green-switch:hover {
cursor: pointer; cursor: pointer;
} }
/* Disabled */ /* Disabled */
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch { .checkbox-green input[type=checkbox]:disabled+.checkbox-green-switch {
opacity: 0.6; opacity: 0.6;
filter: grayscale(50%); filter: grayscale(50%);
} }
/* Focus */ /* Focus */
.checkbox-green.focused .checkbox-green-switch:after { .checkbox-green.focused .checkbox-green-switch:after {
box-shadow: inset 0px 0px 4px #ff5623; box-shadow: inset 0px 0px 4px #ff5623;
} }
</style> </style>