Skip to content

Commit b8492b4

Browse files
RCNRCRCNRC
committed
All design solutions, except several of them
1 parent f9d9323 commit b8492b4

File tree

8 files changed

+318
-200
lines changed

8 files changed

+318
-200
lines changed

‎.eslintcache

+1-1
Large diffs are not rendered by default.

‎src/App.tsx

+98-69
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
import React, {FormEvent} from 'react';
2-
//import logo from './logo.svg';
3-
import './App.css';
2+
import { Component } from 'react';
3+
44
import {
55
ToolButton,
66
ToolButtonList,/* IGraphView, IMatrixView, INGraphsView, State, ToolButton*/
77
} from "graphlabs.core.template";
88
import { GraphVisualizer, Template, Toolbar, store, StudentMark, Console, graphActionCreators, adapter } from "graphlabs.core.template";
9-
import { /*Graph, SccBuilder, Vertex, Edge,*/ IGraph, IVertex, IEdge, GraphGenerator } from "graphlabs.core.graphs";
9+
import { /*Graph, SccBuilder, Vertex, Edge,*/
10+
IGraph,
11+
IVertex,
12+
IEdge,
13+
GraphGenerator,
14+
Vertex
15+
} from "graphlabs.core.graphs";
1016
import styles from './Template.module.scss';
1117
import 'graphlabs.core.template/dist/main.css';
1218
import {WritableAdapter} from "graphlabs.core.visualizer";
1319

20+
import './App.css';
21+
1422
import { /*Component,*/ SFC} from 'react';
1523
import { init1, graphModel1, init2, graphModel2, initres, /*graphModelres,*/ init, graphModel } from './ForMyGraphModel';
16-
import {message_0, message_0_changing, num_0, num_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, T_s, T_s_changing, T_s_shawing} from './ForMeVars';
24+
import {message_0, message_0_changing, num_0, num_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, T_s, T_s_changing, T_s_shawing } from './ForMeVars';
1725
import { ChooseTask } from './Ops';
1826
import { CheckingAnswer, StartDifficult, LastCheckingAnswer } from "./CheckAnswer";
1927
import { GraphsInit } from "./GraphsInit"
28+
import ReactDOM from "react-dom";
29+
import {log} from "util";
2030

2131
class App extends Template {
2232

@@ -28,7 +38,11 @@ class App extends Template {
2838
StartDifficult();
2939
mark_0_changing(0);
3040
GraphsInit();
31-
let timerId = setInterval(()=>{T_s_changing(T_s-1);this.forceUpdate();}, 1000);
41+
42+
let timerId = setInterval(()=>{
43+
T_s_changing(T_s-1);
44+
ReactDOM.render(T_s_shawing(), document.getElementById("T_s"));
45+
}, 1000);
3246
window.setTimeout(()=>{clearInterval(timerId);LastCheckingAnswer();},1000*45*60);
3347
}
3448

@@ -73,10 +87,11 @@ class App extends Template {
7387
);
7488
}*/
7589

76-
77-
7890
// 1) разобраться со store, dispatch и др
7991

92+
// Проблема с огромным пробелом на сайте не в модуле, а в самом сайте, там проблема скорее не в flex
93+
94+
// пустое пространство му графами в задании тем меньше, чем больше соотношение экрана.
8095

8196
protected getTaskToolbar() {
8297
//super.getTaskToolbar()
@@ -89,55 +104,67 @@ class App extends Template {
89104
}
90105
ToolButtonList.prototype.beforeComplete = beforeComplete.bind(this);
91106
ToolButtonList.prototype.help = () => `В данном задании вы должны построить результат операции, указанной в задании в правой части экрана. Для этого вы можете добавлять любое число вершин/рёбер. Также вы можете удалять любое число вершин, не инцидентных ни одному ребру или рёбер. Оценка зависит только от того, правильно ли вы построите граф.`;
107+
ToolButtonList.prototype.toolButtons = {};
92108

93-
ToolButtonList.prototype.toolButtons = {
109+
/*ToolButtonList.prototype.toolButtons = {
94110
"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='add_vertex.png')": () => {
95111
const start = new Date().getTime();
96112
adapter.addVertex();
97113
const end = new Date().getTime();
98114
T_s_changing(T_s - Math.round((end-start)/1000));
99115
},
100-
"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='add_edge.png')": () => { // Меняю имя всем рёбрам на адекватные - ужасный костыль
101-
const start = new Date().getTime();
102-
adapter.addEdge();
103-
graphModel.edges.forEach((e:IEdge, i=0)=>{e.name = `${i++}`;});
104-
const end = new Date().getTime();
105-
T_s_changing(T_s - Math.round((end-start)/1000));
106-
},
107-
"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='remove_vertex.png')": () => { // Меняю имя всем рёбрам на адекватные - ужасный костыль
108-
const start = new Date().getTime();
109-
adapter.removeVertex();
110-
const end = new Date().getTime();
111-
T_s_changing(T_s - Math.round((end-start)/1000));
112-
},
113-
"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='remove_edge.png')": () => { // Меняю имя всем рёбрам на адекватные - ужасный костыль
114-
const start = new Date().getTime();
115-
adapter.removeEdge();
116-
const end = new Date().getTime();
117-
T_s_changing(T_s - Math.round((end-start)/1000));
118-
}
119-
};
116+
};*/
120117
return ToolButtonList;
121118
};
122119
Toolbar.prototype.render = () => {
123120
const Buttons = Toolbar.prototype.getButtonList();
124121
return (
125-
<div>
126-
<div>Панель инструментов</div>
122+
<div style={{marginLeft:'4px'}}>
123+
<p>Панель инструментов</p>
127124
<Buttons/>
128-
<button type={"button"} style={{border: '1px double black', background: 'white', margin: '4px'}} onClick={()=>{
129-
CheckingAnswer();
130-
num_0_changing(num_0+1);
131-
GraphsInit();
125+
<button style={{marginTop:'4px', border: '1px double black', borderRadius:'10px', background: 'white', width:'130px', height:'46px', textAlign: 'center', font:'13pt serif'}} onClick={()=>{
126+
const start = new Date().getTime();
127+
//adapter.addVertex();
128+
graphModel.addVertex(new Vertex(`${window.prompt("Добавте вершину, имя вершины должно состоять из последовательности цифр.", '0')}`));
129+
this.render();
132130
this.forceUpdate();
133-
if (num_0 === 7){ // удалить кнопку было бы хорошо
134-
message_1_changing("Завершите выполнение теста.");
135-
this.disable();
131+
const end = new Date().getTime();
132+
T_s_changing(T_s - Math.round((end-start)/1000));
133+
}}>Добавить<br/>вершину</button>
134+
<button style={{marginTop:'4px', border: '1px double black', borderRadius:'10px', background: 'white', width:'130px', height:'46px', textAlign: 'center', font:'13pt serif'}} onClick={()=>{
135+
const start = new Date().getTime();
136+
adapter.addEdge();
137+
graphModel.edges.forEach((e:IEdge, i=0)=>{e.name = `${i++}`;});
138+
const end = new Date().getTime();
139+
T_s_changing(T_s - Math.round((end-start)/1000));
140+
}}>Добавить<br/>ребро</button>
141+
<button style={{marginTop:'17px', border: '1px double black', borderRadius:'10px', background: 'white', width:'130px', height:'46px', textAlign: 'center', font:'13pt serif'}} onClick={()=>{
142+
const start = new Date().getTime();
143+
adapter.removeVertex();
144+
const end = new Date().getTime();
145+
T_s_changing(T_s - Math.round((end-start)/1000));
146+
}}>Удалить<br/>вершину</button>
147+
<button style={{marginTop:'4px', border: '1px double black', borderRadius:'10px', background: 'white', width:'130px', height:'46px', textAlign: 'center', font:'13pt serif'}} onClick={()=>{
148+
const start = new Date().getTime();
149+
adapter.removeEdge();
150+
const end = new Date().getTime();
151+
T_s_changing(T_s - Math.round((end-start)/1000));
152+
}}>Удалить<br/>ребро</button>
153+
<button type={"button"} style={{marginTop:'17px', border: '1px double black', borderRadius:'10px', background: 'white', width:'130px', height:'46px', textAlign: 'center', font:'13pt serif'}} onClick={()=> {
154+
if(window.confirm("Вы уверены, что хотите перейти к новой операции?")){
155+
CheckingAnswer();
156+
num_0_changing(num_0 + 1);
157+
GraphsInit();
158+
this.forceUpdate();
159+
if (num_0 === 7) { // удалить кнопку было бы хорошо
160+
message_1_changing("Завершите выполнение теста.");
161+
this.disable();
162+
}
136163
}
137164
}}>{message_1}</button>
138-
<div>Time left: {T_s_shawing()}</div>
165+
<T_s_shawing/>
139166
</div>);
140-
}
167+
};
141168
return Toolbar;
142169
}
143170

@@ -149,20 +176,21 @@ class App extends Template {
149176
}
150177

151178
protected getArea(): SFC<{}> {
152-
return () => <div>
153-
<p>
179+
return () =>
180+
<div style={{marginLeft:'4px', marginTop:'4px'}}>
181+
<p className={"help_for_casuals"} data-title="Рабочая область. В ней вы можете строить граф, являющийся результатом операции из области задания. Чтобы выделить ребро или вершину, нужно нажать на соответствующий элемент (который при выделении окрашивается в зелёный или красный соответственно)." >
182+
<img src={"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='Help.png')"}></img>
183+
</p>
154184
<GraphVisualizer
155185
graph={graphModel}
156186
adapterType={'writable'}
157187
namedEdges={false}
158188
vertexNaming={true}
159-
withoutDragging={true}
189+
withoutDragging={false}
160190
edgeNaming={false}
161191
incidentEdges={false}
162192
/>
163-
</p>
164-
</div>;
165-
193+
</div>
166194
//return () =>
167195
// <GraphVisualizer
168196
// graph={graphModelres}
@@ -177,31 +205,32 @@ class App extends Template {
177205

178206
protected task(): SFC<{}> {
179207
return () =>
180-
<div>
181-
<p>
182-
{message_0}
208+
<div style={{marginLeft:'5px'}}>
209+
<p className={"help_for_casuals"} data-title="Область задания. Здесь представлено задание, которое нужно выполнить." >
210+
<img src={"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='Help.png')"}></img>
183211
</p>
184-
<div>
185-
<p>
186-
{num_0!==1?"1.":''}<GraphVisualizer
187-
graph={graphModel1}
188-
adapterType={'readable'}
189-
namedEdges={false}
190-
vertexNaming={false}
191-
withoutDragging={true}
192-
edgeNaming={false}
193-
incidentEdges={false}
194-
/>
195-
{num_0!==1?"2.":''}<GraphVisualizer
196-
graph={graphModel2}
197-
adapterType={'readable'}
198-
namedEdges={false}
199-
vertexNaming={false}
200-
withoutDragging={true}
201-
edgeNaming={false}
202-
incidentEdges={false}
203-
/>
204-
</p>
212+
{message_0}
213+
<div className={"raph-Model-1"}>
214+
<GraphVisualizer
215+
graph={graphModel1}
216+
adapterType={'readable'}
217+
namedEdges={false}
218+
vertexNaming={false}
219+
withoutDragging={true}
220+
edgeNaming={false}
221+
incidentEdges={false}
222+
/>
223+
</div>
224+
<div className={"raph-Model-2"}>
225+
<GraphVisualizer
226+
graph={graphModel2}
227+
adapterType={'readable'}
228+
namedEdges={false}
229+
vertexNaming={false}
230+
withoutDragging={true}
231+
edgeNaming={false}
232+
incidentEdges={false}
233+
/>
205234
</div>
206235
</div>;
207236
}

‎src/CheckAnswer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ function CheckingAnswer(){// мое добавление для проверки
5252
}
5353

5454
if(markN===100){
55-
window.alert(`Вы верно выполнили задание`);
55+
window.alert(`Вы верно выполнили предыдущее задание`);
5656
mark_0_changing(mark_0+9+k_s[num_0]);
5757
}
5858

5959
if(markN<100){
60-
window.alert(`Вы неверно выполнили задание`);
60+
window.alert(`Вы неверно выполнили предыдущее задание`);
6161
}
6262
}
6363

‎src/ForMeVars.ts

-21
This file was deleted.

‎src/ForMeVars.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
let message_0 = '';
4+
let message_1 = "Следующая операция";// костылим на первое время
5+
let num_0 = 0;
6+
let mark_0 = 0;
7+
let k_s = [0,0,0,0,0,0,0,0];
8+
let T_s = 45*60;
9+
10+
function message_0_changing (new_message: string) {message_0 = new_message;}
11+
function message_1_changing (new_message: string) {message_1 = new_message;}
12+
function num_0_changing (new_num: number) {num_0 = new_num;}
13+
function mark_0_changing (new_mark: number) {mark_0 = new_mark;}
14+
function k_s_changing (new_k_s: number[]) {k_s = new_k_s;}
15+
function T_s_changing (new_T_s: number) {T_s = new_T_s;}
16+
function T_s_shawing () {
17+
let T_min, T_sec;
18+
T_sec = T_s%60;
19+
T_min = (T_s - T_sec)/60;
20+
if(T_min>=45){
21+
return (<p style={{border: '1px double black', borderRadius:'0px', background: 'white', width:'130px', height:'60px', textAlign: 'center', font:'13pt serif', position:'inherit', marginTop:'4px'}} id={"T_s"}> Осталось времени:<br/>{`${T_min}min ${T_sec}sec`} </p>);
22+
}
23+
else if(T_sec%2===0){
24+
return (<p style={{border: '1px double black', borderRadius:'0px', background: 'white', width:'130px', height:'60px', textAlign: 'center', font:'13pt serif', position:'inherit'}} id={"T_s"}> Осталось времени:<br/>{`${T_min}min ${T_sec}sec`} </p>);
25+
}
26+
else{
27+
return (<p style={{border: '1px double black', borderRadius:'0px', background: 'ffc069', width:'130px', height:'60px', textAlign: 'center', font:'13pt serif', position:'inherit'}} id={"T_s"}> Осталось времени:<br/>{`${T_min}min ${T_sec}sec`} </p>);
28+
}
29+
}
30+
31+
export { num_0, message_0, num_0_changing, message_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, k_s, k_s_changing, T_s, T_s_changing, T_s_shawing };

0 commit comments

Comments
 (0)