luci-app-upnp: Add Expires to port map listing

[Self-Hosting-Group]

Status/overview UI:

Screenshot 23.05 release

The Port Control Protocol (PCP) is the successor to NAT-PMP, has similar protocol concepts and packet formats, but adds support for IPv6 port maps and options/extensions. For more information, see:
Port Mapping Protocols Overview and Comparison 2024: About UPnP IGD & PCP/NAT-PMP
https://github.com/Self-Hosting-Group/wiki/wiki/Port-Mapping-Protocols-Overview

Maintainer: @jow-

Previous improvement: #7407

[Self-Hosting-Group]

Draft, as the cell should have a text-align: right to display correctly, the following CSS would still need to be inserted, or can the alignment be set via the LuCI API?

#upnp_status_table th:nth-child(6),
#upnp_status_table td:nth-child(6) {
	text-align: right;
}

The time calculation is done on the client, the backend would probably be more accurate.

I chose expires because it is clear, short and should be easy to translate. However, another term could be used, the following come to mind:

Port map ...

• valid until
• expiration
• time left
• duration
• lifetime
• expires
• expiry
• valid

Could be a nice thing for the 24.10 release.

[Self-Hosting-Group]

Thanks for simplifying the code. I have taken your suggestions and re-tested. The code runs on the frontend, which is fine, only the noted CSS would complete the PR.

[systemcrash]

OK, did you re-run i18n-sync after the js changes?

[Self-Hosting-Group]

OK, did you re-run i18n-sync after the js changes?

Yes. Can the CSS code above be added?

[systemcrash]

Above?

[Self-Hosting-Group]

Above?

First comment.

[systemcrash]

Sure. Test the CSS for that column. But it might be a bit over-engineered to do so. Maybe Expiry would be better?

[Self-Hosting-Group]

Sure. Test the CSS for that column. But it might be a bit over-engineered to do so. Maybe Expiry would be better?

But the Expires can also include hours and the right-hand alignment would actually be good. I understand Expires better as a non-native speaker. CSS is already tested.

[systemcrash]

Add the equivalent style to that column.

[Self-Hosting-Group]

I discovered the CSS class right, I think this is the most elegant solution, and set the class via JS.

I have also just written the first ucode to perform the most important function of the expires calculation with the backend/router time.

[systemcrash]

Merged. Thanks @Self-Hosting-Group

[Self-Hosting-Group]

@systemcrash Happy 2025! Thanks to you too. Cool how quickly we were able to get this PR done.