/
main.html
120 lines (114 loc) · 5.32 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
#graph svg{
height:63px !important;
}
</style>
</head>
<body>
<h1>Entity relational diagram Helper</h1>
<div id="output">
</div>
<div id="app"></div>
<script>
function left2right(entity1, entity2, relation, cardinality, ordinality) {
return `
<p>
<input class="input" type="text" name="entity1" value=${entity1}>는
<select class="input" name="entity1_entity2_cadinality">
<option ${cardinality === '1' ? 'selected' : ''} value="1">하나</option>
<option ${cardinality === 'N' ? 'selected' : ''} value="N">여러개</option>
</select>의
<input class="input" type="text" name="entity2" value=${entity2}>에
<select class="input" name="entity1_entity2_ordinality" >
<option ${ordinality === 'Mandatory' ? 'selected' : ''} value="Mandatory">반드시</option>
<option ${ordinality === 'Optional' ? 'selected' : ''} value="Optional">어쩌다</option>
</select>의
<input class="input" type="text" name="relation" value=${relation}>된다.
</p>
`;
}
function right2left(entity1, entity2, relation, cardinality, ordinality) {
return `
<p>
<input class="input" type="text" name="entity2" value=${entity2}>는
<select class="input" name="entity2_entity1_cadinality">
<option ${cardinality === '1' ? 'selected' : ''} value="1">하나</option>
<option ${cardinality === 'N' ? 'selected' : ''} value="N">여러개</option>
</select>의
<input class="input" type="text" name="entity1" value=${entity1}>에
<select class="input" name="entity2_entity1_ordinality" >
<option ${ordinality === 'Mandatory' ? 'selected' : ''} value="Mandatory">반드시</option>
<option ${ordinality === 'Optional' ? 'selected' : ''} value="Optional">어쩌다</option>
</select>의
<input class="input" type="text" name="relation" value=${relation}>된다.
</p>
`;
}
var initStore = {
entity1: '댓글',
entity2: '저자',
'entity1_entity2_cadinality':'1',
'entity1_entity2_ordinality':'Mandatory',
'entity2_entity1_cadinality':'1',
'entity2_entity1_ordinality':'Mandatory',
relation: '소속'
};
var reducer = function (state, action) {
if (action.type === 'init') {
return initStore;
}
var newState = Object.assign({}, state);
console.log('reducer', action);
if (action.type === 'INPUT_CHANGE') {
newState[action.name] = action.value;
}
return newState;
}
var store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
store.subscribe(function () {
var state = store.getState();
console.log(state);
document.querySelector('#app').innerHTML =
left2right(state.entity1, state.entity2, state.relation, state.entity1_entity2_cadinality,state.entity1_entity2_ordinality) +
right2left(state.entity1, state.entity2, state.relation, state.entity2_entity1_cadinality,state.entity2_entity1_ordinality);
document.querySelector('#output').innerHTML = `
<input class="input" type="text" name="entity1" value=${state.entity1}>
<select>
<option ${state.entity2_entity1_cadinality === 'N' ? 'selected' : ''}>></option>
<option ${state.entity2_entity1_cadinality === '1' ? 'selected' : ''}>-</option>
</select>
<select>
<option ${state.entity2_entity1_ordinality === 'Optional' ? 'selected' : ''} value="Optional">O</option>
<option ${state.entity2_entity1_ordinality === 'Mandatory' ? 'selected' : ''} value="Mandatory">|</option>
</select>
-
<span>${state.relation}</span>
-
<select>
<option ${state.entity1_entity2_ordinality === 'Optional' ? 'selected' : ''} value="Optional">O</option>
<option ${state.entity1_entity2_ordinality === 'Mandatory' ? 'selected' : ''} value="Mandatory">|</option>
</select>
<select>
<option ${state.entity1_entity2_cadinality === 'N' ? 'selected' : ''}><</option>
<option ${state.entity1_entity2_cadinality === '1' ? 'selected' : ''}>-</option>
</select>
<span>${state.entity2}</span>
`;
})
store.dispatch({
type: 'init'
});
$('body').on('change', '.input', function (event) {
store.dispatch({
type: 'INPUT_CHANGE',
name: event.target.name,
value: event.target.value
})
})
</script>
</body>
</html>