yerasyl11/port-calc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

добавил историю расчётов

Browse Source
This commit is contained in:
Dauren777 2026-06-19 06:08:49 +00:00
parent eb47f3687c
commit 098029c178
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@ -24,6 +24,15 @@ button:active{transform:scale(.98)}
.result .detail{font-size:14px;color:#5B6573;margin-top:8px}
.error{color:#e74c3c;font-size:14px;margin-top:8px;display:none}
.error.show{display:block}
.history{margin-top:32px;padding-top:24px;border-top:2px solid #e8eaed;display:none}
.history.show{display:block}
.history h3{font-size:15px;color:#5B6573;font-weight:600;margin-bottom:12px}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;cursor:pointer;transition:.1s;font-size:15px}
.history-item:hover{background:#f0f2f5}
.history-item .h-port{font-weight:700}
.history-item .h-result{color:#0088cc;font-weight:600}
.history-item .h-copy{color:#9aa3b2;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px}
.history-item .h-copy:hover{background:#d0d5dd;color:#0F1218}
@media(max-width:480px){.card{padding:24px}h1{font-size:24px}input[type=number]{font-size:20px}}
</style>
</head>
@ -41,12 +50,20 @@ button:active{transform:scale(.98)}
<div class="big" id="output"></div>
<div class="detail" id="detail"></div>
</div>
<div class="history" id="history">
<h3>📋 История расчётов</h3>
<div id="historyList"></div>
</div>
</div>
<script>
const PORTS_PER_CASSETTE = 16;
const TOTAL_CASSETTES = 84;
const TOTAL_PORTS = TOTAL_CASSETTES * PORTS_PER_CASSETTE;
const MAX_HISTORY = 50;
let history = JSON.parse(localStorage.getItem('portHistory')||'[]');
function calc(){
const input=document.getElementById('port');
@ -72,9 +89,45 @@ function calc(){
output.innerHTML=`${cassette} <span>кассета</span> — ${port} <span>порт</span>`;
detail.textContent=`Кассета ${cassette}: порты ${firstPort}–${lastPort}`;
result.classList.add('show');
addHistory(val,cassette,port,firstPort,lastPort);
}
function addHistory(portNum,cassette,port,firstPort,lastPort){
const entry={portNum,cassette,port,firstPort,lastPort,time:Date.now()};
history.unshift(entry);
if(history.length>MAX_HISTORY)history=history.slice(0,MAX_HISTORY);
localStorage.setItem('portHistory',JSON.stringify(history));
renderHistory();
}
function renderHistory(){
const el=document.getElementById('history');
const list=document.getElementById('historyList');
if(!history.length){el.classList.remove('show');return}
el.classList.add('show');
list.innerHTML=history.map((h,i)=>`
<div class="history-item" onclick="useHistory(${i})" title="Нажми чтобы вставить номер">
<span class="h-port">${h.portNum}</span>
<span class="h-result">${h.cassette} к — ${h.port} п</span>
<span class="h-copy" onclick="event.stopPropagation();copyResult(${i})" title="Копировать">📋</span>
</div>
`).join('');
}
function useHistory(i){
document.getElementById('port').value=history[i].portNum;
calc();
}
function copyResult(i){
const h=history[i];
const text=`${h.portNum} → ${h.cassette} кассета — ${h.port} порт`;
navigator.clipboard.writeText(text).catch(()=>{});
}
document.getElementById('port').addEventListener('keydown',e=>{if(e.key==='Enter')calc()});
renderHistory();
</script>
</body>
</html>